Creating synchronous automation in Selenium: A step-by-step guide

Question

Creating synchronous automation in Selenium: A step-by-step guide

I am feeling increasingly frustrated at the moment and I am hoping to seek assistance on stackexchange.

First and foremost, I must admit that I am not a seasoned Javascript developer, probably not even an experienced developer overall, but I do have some knowledge of basic scripting languages like C# and Java. For my current web automation script, I decided to venture into writing in Javascript, but now I am seriously contemplating starting over with a less confusing language.

Could someone please advise me on how I can ensure that my code is executed synchronously from top to bottom?

After spending countless hours googling, here are some attempts I have made:

Added #! /usr/bin/env node at the beginning of line 1 and started it in the terminal using ./app.js
Converted every function to an async function
Used await on all methods

Despite these efforts, when I run the script, I encounter multiple instances of

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'isDisplayed' of undefined

and similar issues, indicating that Node is running some of my methods/functions asynchronously. These exceptions appear in the console long before the browser window is loaded.

The tools and versions I am using include: * selenium-webdriver 3.6.0 * Firefox 60.0.2 * node 8.10.0

This is a snippet of what my code looks like:

// JavaScript code goes here...
// More code sample provided...

In essence, as far as my understanding goes, I initiate the webdriver and Firefox with my async init() function. Within this function, I utilize await for all the methods. Following the initiation of the webdriver/Firefox, I assign the Object variables to the locations (which I want to happen once the browser is fully loaded).

However, for some reason unknown to me, the script appears to execute all functions and code it encounters immediately after starting. It seems to wait until the browser has fully loaded last. Prior to the complete loading, I receive several UnhandledPromiseRejectionWarning messages..

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'sendKeys' of undefined

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'click' of undefined

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'isDisplayed' of undefined

Any help or guidance on this matter would be greatly appreciated.

javascript selenium ubuntu asynchronous selenium-webdriver

Answer 1

Answer №1

To achieve purely synchronous execution in async/await functions, it appears that only one function should be allowed to run at a time.

Instead of calling init(); for browser initialization and then later running run(); for automation, it is recommended to create a small function called main() that calls both functions:

async main(){
  await init;
  await run();
}
main();

This approach seems to resolve the issue with asynchronous runs. However, there may still be complications with await driver.sleep(1000);, as it does not work as intended.

Further research led me to references about explicit waits and webdriver-sync. Though the latter is considered outdated, I plan to explore its capabilities.

If anyone has insights on resolving issues like the ineffective use of await driver.sleep(1000); within a loop structure, such as:

array.forEach(async function(entry){
  for(){
    for(){
      await driver.sleep(1000);
    }
  }
}

I would greatly appreciate any advice or suggestions.

Answer 2

To achieve purely synchronous execution in async/await functions, it appears that only one function should be allowed to run at a time.

Instead of calling init(); for browser initialization and then later running run(); for automation, it is recommended to create a small function called main() that calls both functions:

async main(){
  await init;
  await run();
}
main();

This approach seems to resolve the issue with asynchronous runs. However, there may still be complications with await driver.sleep(1000);, as it does not work as intended.

Further research led me to references about explicit waits and webdriver-sync. Though the latter is considered outdated, I plan to explore its capabilities.

If anyone has insights on resolving issues like the ineffective use of await driver.sleep(1000); within a loop structure, such as:

array.forEach(async function(entry){
  for(){
    for(){
      await driver.sleep(1000);
    }
  }
}

I would greatly appreciate any advice or suggestions.

Answer 3

Answer №2

Your implementation of the await keyword is on the right track, but you need to adjust how you use the .then method. In this case, .then expects a function (or two) as an argument. You are currently making function calls inside then() which results in passing the result of that function call rather than the function itself.

async function setup(){
    let options = await new firefox.Options()
    .setProfile('/home/ruphus/.mozilla/firefox/selenium_profile.backtesting');

    let driver = await new webdriver.Builder()
        .forBrowser('firefox')
        .setFirefoxOptions(options)
        .build();
    await driver.get('https://www.someurl.com/')
        .then(openStrategySettings)  // <-- Pass the function instead
        .then(() => btnStrategySettings.click());  // <-- Arrow functions come handy when the argument isn't just a plain function name 

// ... Define webelements/locations for the previously created objects using xpath

inputPeriod = await driver.findElement(By.xpath("//div[@id='header-toolbar-intervals']/div/div/div"));
}


async function openStrategySettings() {
    if (! await someWebelement.isDisplayed()){  // <-- Ensure to await the settlement of isDisplayed(), which returns a Promise
        return await tabStrategyTester.click();  // <-- Always handle Promises appropriately
    }
}
async function inputValue(element, value) {
    return await element.sendKeys(Key.BACK_SPACE + Key.BACK_SPACE + value.toString());  // <-- Never ignore a Promise
}

When returning the result of an asynchronous function within another async function, you can omit the await keyword since a Promise inside a Promise is automatically unwrapped. Therefore, using return element.sendKeys( will yield the same result, but relying on await may enhance clarity.

Answer 4

Your implementation of the await keyword is on the right track, but you need to adjust how you use the .then method. In this case, .then expects a function (or two) as an argument. You are currently making function calls inside then() which results in passing the result of that function call rather than the function itself.

async function setup(){
    let options = await new firefox.Options()
    .setProfile('/home/ruphus/.mozilla/firefox/selenium_profile.backtesting');

    let driver = await new webdriver.Builder()
        .forBrowser('firefox')
        .setFirefoxOptions(options)
        .build();
    await driver.get('https://www.someurl.com/')
        .then(openStrategySettings)  // <-- Pass the function instead
        .then(() => btnStrategySettings.click());  // <-- Arrow functions come handy when the argument isn't just a plain function name 

// ... Define webelements/locations for the previously created objects using xpath

inputPeriod = await driver.findElement(By.xpath("//div[@id='header-toolbar-intervals']/div/div/div"));
}


async function openStrategySettings() {
    if (! await someWebelement.isDisplayed()){  // <-- Ensure to await the settlement of isDisplayed(), which returns a Promise
        return await tabStrategyTester.click();  // <-- Always handle Promises appropriately
    }
}
async function inputValue(element, value) {
    return await element.sendKeys(Key.BACK_SPACE + Key.BACK_SPACE + value.toString());  // <-- Never ignore a Promise
}

When returning the result of an asynchronous function within another async function, you can omit the await keyword since a Promise inside a Promise is automatically unwrapped. Therefore, using return element.sendKeys( will yield the same result, but relying on await may enhance clarity.

Answer 5

Answer №3

async function executeCode(){
    for(value of array){
        for(){
            for(){
                await driver.pause(1000);
            }
        }
    }
}

driver.pause() is a method that returns a Promise object which is resolved after the specified time has passed. The use of await in JavaScript stops the execution of code until the Promise is settled. This allows other tasks to be executed while waiting for the Promise to resolve. While ignoring the value of the await statement might be acceptable, it does not disregard the Promise itself. It's important to note that async functions return Promises. When using the .forEach method, the return value from the callback function is ignored, including any Promises it may create, leading to potentially unexpected behavior. By not using await, tasks are executed in an unpredictable order, highlighting the importance of asynchronous programming.

Answer 6

async function executeCode(){
    for(value of array){
        for(){
            for(){
                await driver.pause(1000);
            }
        }
    }
}

driver.pause() is a method that returns a Promise object which is resolved after the specified time has passed. The use of await in JavaScript stops the execution of code until the Promise is settled. This allows other tasks to be executed while waiting for the Promise to resolve. While ignoring the value of the await statement might be acceptable, it does not disregard the Promise itself. It's important to note that async functions return Promises. When using the .forEach method, the return value from the callback function is ignored, including any Promises it may create, leading to potentially unexpected behavior. By not using await, tasks are executed in an unpredictable order, highlighting the importance of asynchronous programming.

Creating synchronous automation in Selenium: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Getting the content inside a div tag with selenium in python

Ways to automatically update React.js state when localStorage changes occur

Adjusting color with the .on method in Event Listener

My current objective is to extract the information from a specific item within a combobox by implementing the following code

Is it possible to extract information from a form's POST request without relying on the traditional "action" attribute within form elements?

Access Denied: BrowserStack Requires Authorization

Identify the currently active subitem within the item-active class in a PHP carousel slider

The connection to the firebase callback

formik does not support using the "new Date" function as an initial value

What factors determine how a React component should be re-rendered based on a specific file?

Making API calls using JavaScript

What is the best way to end a table row after every group of four items?

Selenium IDE could not locate the specified ID span

Emphasizing the date variable within a spreadsheet

Sending data from TextBox as json format

Troubleshooting Images in a React Application Integrated with WordPress API

The browser is opting to download the HTML file rather than displaying it

Finding the file in a separate directory within the src path

What is the best way to access the local Express server that is located in the same directory as the frontend project

Ways to access UserProfile in a different Dialogio