Utilize WebdriverIO to loop through elements and trigger a click event on a link

Question

Utilize WebdriverIO to loop through elements and trigger a click event on a link

I am currently using Javascript and webdriverio (v2.1.2) for data extraction on an internal website. The process involves:

Authentication
Opening the necessary URL once authenticated
Searching for an anchor tag with a specific keyword on the new page
Clicking on the found anchor tag

The code snippet below shows what I have attempted so far, which is working for the last two steps. However, in order to achieve this, I had to utilize Q and async. My goal is to use only Q for this task. Could someone assist me in achieving this using only Q?

    var EmployeeAllocationDetails = (function () {
'use strict';
/*jslint nomen: true */
var Q = require('Q'),
    async = require('async'),   
    _ead_name = 'Employee Allocation Details',
    goToEadFromHome;

goToEadFromHome = function (browserClient) {
    browserClient.pause(500);
    var deferred = Q.defer();
    browserClient.elements('table.rmg td.workListTD div.tab2 div.contentDiv>a', function (err, results) {
        if (err) {
            deferred.reject(new Error('Unable to get EAD page. ' + JSON.stringify(err)));
        } else {

        async.each(results.value, function (oneResult, callback) {
                console.log('Processing: ' + JSON.stringify(oneResult));
                browserClient.elementIdText(oneResult.ELEMENT, function (err, result) {
                    if (err) {
                        if (err.message.indexOf('referenced element is no longer attached to the DOM') > -1 ){
                            callback();
                        } else {
                            callback('Error while processing :' + JSON.stringify(oneResult) + '. ' + err);
                        }
                    } else if(!result){
                        console.log('result undefined. Cannot process: ' + JSON.stringify(oneResult));
                        callback();
                    } else if(result.value.trim() === _ead_name){
                        deferred.resolve(oneResult);
                        callback();
                    }
                });
            }, function (err) {
                // if any of the processing produced an error, err would equal that error
            if( err ) {
        // One of the iterations produced an error.
        // All processing will now stop.
            console.log('A processing failed to process. ' + err);
            } else {
            console.log('All results have been processed successfully');
            }
            }); //end of async.each

        }
    });
    return deferred.promise;
};

return {
    launchEad : goToEadFromHome
  }
})();
module.exports = EmployeeAllocationDetails;

For more information, you can refer to the related Github Issue link here

javascript selenium-webdriver q webdriver-io

Answer 1

Answer №1

Using the async function is recommended in this case. The code provided is efficient as it executes tasks in parallel and handles errors effectively.

However, if you decide to remove the async function, there are alternative options available:

Utilize the Q flow control module
Manually replicate async's functionality
Create your own implementation

Incorporating Q's flow control may involve a pseudo-code similar to the following:

var getTextActions = [];
function createAction(element){ 
    return function(){
        return element.getText();
    }
}

each(elements, function(element){ getTextActions.push( createAction(element) ) }); 
Q.all(getTextActions).then(function(results) {
    //Iterate through results and resolve promise with corresponding element
} );

It is important to note that this approach may have lower performance compared to using async, as it retrieves text from all elements before resolving promises.

Creating a custom implementation, though not recommended, would involve pseudo-code resembling the following:

var elementsCount = elements.length; 
elements.each(function(element){
    element.getText(function(err, result){
        elementsCount --;
        if ( !!err ) { logger.error(err); /** Handle error **/ } 
        if ( isThisTheElement(result) ) { deferred.resolve(result); }
        if ( elementsCount == 0 ){ 
            deferred.resolve(null);
        }
    })
})

If you require further clarification or if the answer does not fully address your question, feel free to let me know so I can enhance the explanation.

Answer 2

Using the async function is recommended in this case. The code provided is efficient as it executes tasks in parallel and handles errors effectively.

However, if you decide to remove the async function, there are alternative options available:

Utilize the Q flow control module
Manually replicate async's functionality
Create your own implementation

Incorporating Q's flow control may involve a pseudo-code similar to the following:

var getTextActions = [];
function createAction(element){ 
    return function(){
        return element.getText();
    }
}

each(elements, function(element){ getTextActions.push( createAction(element) ) }); 
Q.all(getTextActions).then(function(results) {
    //Iterate through results and resolve promise with corresponding element
} );

It is important to note that this approach may have lower performance compared to using async, as it retrieves text from all elements before resolving promises.

Creating a custom implementation, though not recommended, would involve pseudo-code resembling the following:

var elementsCount = elements.length; 
elements.each(function(element){
    element.getText(function(err, result){
        elementsCount --;
        if ( !!err ) { logger.error(err); /** Handle error **/ } 
        if ( isThisTheElement(result) ) { deferred.resolve(result); }
        if ( elementsCount == 0 ){ 
            deferred.resolve(null);
        }
    })
})

If you require further clarification or if the answer does not fully address your question, feel free to let me know so I can enhance the explanation.

Utilize WebdriverIO to loop through elements and trigger a click event on a link

Answer №1

Similar questions

Replace the hyperlink with plain text using JQuery

Vue-Router functions only on specific routes

Displaying an error page instead of the error message when a backend or template engine error occurs

How to identify the character encoding in a node.js request

Finding a way to choose and interact with elements at random using Selenium WebDriver in Python

Vue is unable to capture Cordova events

Step-by-step guide for implementing a scroll event on FancyBox

Avoiding the occurrence of moiré patterns when using pixi.js

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

Positioning Images in Tailwind Modals

Separating the login/register functionality from the main app using the MEAN Stack

What is the best way to create a function that allows us to "wait for ajax" to load before proceeding with the page and then easily reuse that function in other test methods

Establishing the value of "document.cookie"

What is the reason for the error message "Why does the method getText() appear as undefined for the String type?"

difficulty arises when attempting to invoke a viewmodel from another viewmodel inside a ko.computed function

Execute a JavaScript function on a Node server following a click event in an HTML document

Guide on building a REST API with Node.js Express.js and OracleDB to perform database updates

Error: The specified element to insert before is not a direct descendant of this parent node

Unusual escape_javascript quirk witnessed in Ruby on Rails