Exploring AngularJS testing using Protractor's browser.wait() method

Question

Exploring AngularJS testing using Protractor's browser.wait() method

In the process of developing an automated test suite for an AngularJS application using Protractor, I have reached a point where I no longer need to manually pause the script at each step with browser.pause(). Now, I want to let the script run through to completion on its own.

To achieve this, I am exploring the use of browser.wait() to ensure the browser has loaded before executing the next step. I am passing the last line of each test as a parameter to browser.wait() along with a timeout value. For example:

it('should log the user in to the application', function() {
    browser.wait(loginAsUser(username, password), 10000);
});

instead of the previous:

browser.pause();

it('should log the user in to the application', function() {
    loginAsUser(username, password);
});

However, I encountered a failure with the message: "Failed: Wait condition must be a promise-like object, function, or a Condition object". This error puzzled me as the wait condition is a function, specifically the loginAsUser() function previously defined.

Further edits to my test revealed issues with subsequent tests failing due to elements not being found after the login step. It seems that the page was not given enough time to load following the login when browser.pause() was removed.

Attempts to use browser.wait() within the failing test did not resolve the issue, leading to the same "Failed: No element found using locator" error. It became clear that the application required more time to load after the login before proceeding to the next test.

Finally, I optimized the test script with a new approach utilizing EC.visibilityOf() and browser.wait() to wait for elements to be displayed before interacting with them. However, the test still failed with unexpected results, indicating a need for further debugging and understanding of the implementation.

javascript angularjs protractor automated-tests

Answer 1

Answer №1

Typically, waiting for a hardcoded period of time is not recommended.

It is advisable to pair the waiting process with an expected condition to break free as soon as the condition is met.

Here's an example of a helper method:

public static async waitForPresenceOf(element: ElementFinder, waitMs?: number): Promise<boolean> {
    return browser.wait(EC.presenceOf(element), waitMs || 5000).then(() => true, () => false);
}

You can also apply the same concept to wait for the visibility of elements and similar scenarios.

Below is a collection of helper methods, written in TypeScript, that you might find useful:

// Collection of helper methods
import * as webdriver from 'selenium-webdriver';
import By = webdriver.By;

// Other imports
import {browser, element, protractor, by, WebElement, ElementFinder, ElementArrayFinder} from "protractor";

// Main class definition
import * as _ from 'lodash';
import {expect} from "./asserts.config";

let EC = protractor.ExpectedConditions;

export default class BrowserHelper {
    // Methods definition here...
}

When writing test cases, it's important to incorporate waiting periods. Here's an example:

it('should log the user in to the application', function(done) {
      BrowserHelper.sendKeys(usernameInputField, username)
        .then(function() { 
            return BrowserHelper.sendKeys(passwordInputField, password) 
        })
        .then(function() {
            return BrowserHelper.click(loginBtn)
        }).then(done)
});

Make sure to include the done parameter in the test case to indicate when the test is completed.

Alternatively, you can achieve the same result by returning a promise:

it('should log the user in to the application', function() {
      return BrowserHelper.sendKeys(usernameInputField, username)
        .then(function() { 
            return BrowserHelper.sendKeys(passwordInputField, password) 
        })
        .then(function() {
            return BrowserHelper.click(loginBtn)
        })
});

Answer 2

Typically, waiting for a hardcoded period of time is not recommended.

It is advisable to pair the waiting process with an expected condition to break free as soon as the condition is met.

Here's an example of a helper method:

public static async waitForPresenceOf(element: ElementFinder, waitMs?: number): Promise<boolean> {
    return browser.wait(EC.presenceOf(element), waitMs || 5000).then(() => true, () => false);
}

You can also apply the same concept to wait for the visibility of elements and similar scenarios.

Below is a collection of helper methods, written in TypeScript, that you might find useful:

// Collection of helper methods
import * as webdriver from 'selenium-webdriver';
import By = webdriver.By;

// Other imports
import {browser, element, protractor, by, WebElement, ElementFinder, ElementArrayFinder} from "protractor";

// Main class definition
import * as _ from 'lodash';
import {expect} from "./asserts.config";

let EC = protractor.ExpectedConditions;

export default class BrowserHelper {
    // Methods definition here...
}

When writing test cases, it's important to incorporate waiting periods. Here's an example:

it('should log the user in to the application', function(done) {
      BrowserHelper.sendKeys(usernameInputField, username)
        .then(function() { 
            return BrowserHelper.sendKeys(passwordInputField, password) 
        })
        .then(function() {
            return BrowserHelper.click(loginBtn)
        }).then(done)
});

Make sure to include the done parameter in the test case to indicate when the test is completed.

Alternatively, you can achieve the same result by returning a promise:

it('should log the user in to the application', function() {
      return BrowserHelper.sendKeys(usernameInputField, username)
        .then(function() { 
            return BrowserHelper.sendKeys(passwordInputField, password) 
        })
        .then(function() {
            return BrowserHelper.click(loginBtn)
        })
});

Answer 3

Answer №2

The error you're encountering is due to the fact that the wait method requires a condition to be met or a promise to be resolved.

For instance, if you're waiting for an element with the id abc to become visible after loginBtn.click();, you would write something like the following. Refer to ExpectedConditions for more details.

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to become visible in the DOM.
browser.wait(EC.visibilityOf($('#abc')), 5000);

Alternatively, if you need to wait for a specific custom condition (e.g., the visibility of an element), you can use the following approach:

browser.wait(function(){
    element.isDisplayed().then(function(isDisplayed){
       if(!isDisplayed) {
          return false; // continue looking until it's visible;
       }
       return true; // exit unless the timeout has been reached
    });
}, 5000);

Additional information provided in their documentation:

For example, suppose you have a function called startTestServer that returns a promise indicating when the server is ready for requests. You can sync a WebDriver client to this promise as follows:

Sample Code:
var started = startTestServer();
browser.wait(started, 5 * 1000, 'Server should start within 5 seconds');
browser.get(getServerUrl());

Modifications based on new details

pageTagBrowserBtn.isDisplayed() returns a promise rather than a boolean value. Therefore, if you're using chai expect, you should follow the example below:

it('should display the Pages menu', function() {
    browser.waitForAngularEnabled(false);
    browser.wait(EC.visibilityOf(pagesMenuBtn), 5000).then(
        browser.actions().mouseMove(pagesMenuBtn).perform().then(function(){
           pageTagBrowserBtn.isDisplayed().then(function(isDisplayed) {
                  // verify isDisplayed is true at this point
           });
        })).then(
        browser.actions().mouseMove(userCircle).perform().then(function(){
            expect(pageTagBrowserBtn.isDisplayed()).toBeFalsy();
        }));
});

Answer 4

The error you're encountering is due to the fact that the wait method requires a condition to be met or a promise to be resolved.

For instance, if you're waiting for an element with the id abc to become visible after loginBtn.click();, you would write something like the following. Refer to ExpectedConditions for more details.

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to become visible in the DOM.
browser.wait(EC.visibilityOf($('#abc')), 5000);

Alternatively, if you need to wait for a specific custom condition (e.g., the visibility of an element), you can use the following approach:

browser.wait(function(){
    element.isDisplayed().then(function(isDisplayed){
       if(!isDisplayed) {
          return false; // continue looking until it's visible;
       }
       return true; // exit unless the timeout has been reached
    });
}, 5000);

Additional information provided in their documentation:

For example, suppose you have a function called startTestServer that returns a promise indicating when the server is ready for requests. You can sync a WebDriver client to this promise as follows:

Sample Code:
var started = startTestServer();
browser.wait(started, 5 * 1000, 'Server should start within 5 seconds');
browser.get(getServerUrl());

Modifications based on new details

pageTagBrowserBtn.isDisplayed() returns a promise rather than a boolean value. Therefore, if you're using chai expect, you should follow the example below:

it('should display the Pages menu', function() {
    browser.waitForAngularEnabled(false);
    browser.wait(EC.visibilityOf(pagesMenuBtn), 5000).then(
        browser.actions().mouseMove(pagesMenuBtn).perform().then(function(){
           pageTagBrowserBtn.isDisplayed().then(function(isDisplayed) {
                  // verify isDisplayed is true at this point
           });
        })).then(
        browser.actions().mouseMove(userCircle).perform().then(function(){
            expect(pageTagBrowserBtn.isDisplayed()).toBeFalsy();
        }));
});

Exploring AngularJS testing using Protractor's browser.wait() method

Answer №1

Answer №2

Modifications based on new details

Similar questions

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

Is it possible to export informative test titles in Selenium / Gherkin / Cucumber?

Retrieving JSON information stored in a JavaScript variable

Changing the user object stored in the database within the next authentication process following registration

What is the process for retrieving randomized data using mongoose?

How to dynamically disable options in a Vuetify v-select based on the type of object value

Why isn't my script responding to mouse events like mouseenter, mouseover, or any other mouse event?

Is it possible to stack one Canvas on top of another?

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

The challenge with Three.js CTM loader: Developing a separate .js file to reference the .ctm file

Easy way to eliminate empty elements following a class using jQuery

Can JavaScript bypass the need for an html page and go directly to the printing process?

AngularJS: Transforming form field inputs into JSON format

Interacting with APIs in Svelte applications

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

Use Ajax to dynamically update the href attribute of an ID

The click() function in jQuery executing only once inside a "for" loop

Encountering issues with parsing JSON data following its transmission through an Ajax request

Navigate down to the bottom of the element located on the webpage

What is the reason why calling setState does not update the local state?