Stale reference to element detected in Protractor despite implementation of conditional wait

Question

Stale reference to element detected in Protractor despite implementation of conditional wait

I am encountering an issue within the beforeEach function of my test class. Sometimes, clicking on the usersTab works fine, but other times it results in a StaleElementReferenceException. I have experimented with using protractor.ExpectedConditions such as presenceOf, visibilityOf, and elementToBeClickable, but none of them have provided a 100% solution. It seems that the problem may be related to asynchronous behavior where the browser attempts to click before waiting. Is this a possibility? Can anyone suggest how to handle this situation?

var OnePage = require('../pages/one_page.js');
var SecondPage = require('../pages/second_page.js');

describe('Test', function () {

    var onePage;
    var secondPage;
    var EC = protractor.ExpectedConditions;

    beforeEach(function () {
        browser.ignoreSynchronization = true;
        onePage = new OnePage();
        browser.wait(EC.presenceOf(onaPage.userLogin), 5000);

        onePage.setUser('login@login');
        onePage.setPassword('password');
        onePage.login();


        secondPage = new SecondPage();
        browser.wait(EC.visibilityOf(secondPage.usersTab), 10000);
        usersPage.usersTab.click();
    });

I am utilizing jasmine:2 and protractor:2.2.0.

javascript testing selenium-webdriver protractor

Answer 1

Answer №1

When I first began constructing my Test Suite, I encountered a similar issue that proved to be quite challenging to resolve. It took me some time to track down a suitable solution. The problem arose from initializing the Page Object using a standard var within the beforeEach function. This led to the retention of an old instance when executing the 2nd or subsequent tests. The occurrence of this issue seemed random to me, with no clear trigger or timeline. The workaround I discovered was to leverage the this keyword within the beforeEach function, as illustrated below. This ensured that a fresh instance was created for each test.

NOTE: In my conf.js file, within the onPrepare section, I have implemented the following function to inform Protractor whether the upcoming page is Angular-based:

global.isAngularSite = function(flag) {
    browser.ignoreSynchronization = !flag;
};

var OnePage    = require('../pages/one_page.js');
var SecondPage = require('../pages/second_page.js');

describe('Test', function () {

    beforeEach(function () {
        isAngularSite(true);

        this.onePage    = new OnePage();
        this.secondPage = new SecondPage();
        this.ec         = protractor.ExpectedConditions;

        browser.wait(this.ec.presenceOf(this.onePage.userLogin), 5000);
        
        this.onePage.setUser('login@login');
        this.onePage.setPassword('password');
        this.onePage.login();

        browser.wait(this.ec.visibilityOf(this.secondPage.usersTab), 10000);
        usersPage.usersTab.click();
    });

    it('', function() {

    });

});

Answer 2

When I first began constructing my Test Suite, I encountered a similar issue that proved to be quite challenging to resolve. It took me some time to track down a suitable solution. The problem arose from initializing the Page Object using a standard var within the beforeEach function. This led to the retention of an old instance when executing the 2nd or subsequent tests. The occurrence of this issue seemed random to me, with no clear trigger or timeline. The workaround I discovered was to leverage the this keyword within the beforeEach function, as illustrated below. This ensured that a fresh instance was created for each test.

NOTE: In my conf.js file, within the onPrepare section, I have implemented the following function to inform Protractor whether the upcoming page is Angular-based:

global.isAngularSite = function(flag) {
    browser.ignoreSynchronization = !flag;
};

var OnePage    = require('../pages/one_page.js');
var SecondPage = require('../pages/second_page.js');

describe('Test', function () {

    beforeEach(function () {
        isAngularSite(true);

        this.onePage    = new OnePage();
        this.secondPage = new SecondPage();
        this.ec         = protractor.ExpectedConditions;

        browser.wait(this.ec.presenceOf(this.onePage.userLogin), 5000);
        
        this.onePage.setUser('login@login');
        this.onePage.setPassword('password');
        this.onePage.login();

        browser.wait(this.ec.visibilityOf(this.secondPage.usersTab), 10000);
        usersPage.usersTab.click();
    });

    it('', function() {

    });

});

Answer 3

Answer №2

When working with multiple actions in your code, it's important to ensure they execute sequentially once the first one is completed resolving its promise. Here's a simple way to achieve this:

beforeEach(function () {
    browser.ignoreSynchronization = true;

    // Actions for OnePage
    onePage = new OnePage();
    browser.wait(EC.presenceOf(onaPage.userLogin), 5000).then(function(){
        onePage.setUser('login@login');
        onePage.setPassword('password');
        onePage.login();
        
        // Actions for SecondPage chained after the first one
        secondPage = new SecondPage();
        browser.wait(EC.visibilityOf(usersPage.usersTab), 10000).then(function(){
            usersPage.usersTab.click().then(function(){
                // If verification is needed after click, do it here.
                browser.sleep(500);
            });
        });
    });
});

To ensure that the actions on the second page are done only after those on the first page have completed, you can chain them together in the following manner:

browser.wait(EC.presenceOf(onaPage.userLogin), 5000).then(function(){
    // Actions for OnePage
}).then(function(){
    // Actions for SecondPage
    secondPage = new SecondPage();
    browser.wait(EC.visibilityOf(usersPage.usersTab), 10000).then(function(){
        usersPage.usersTab.click().then(function(){
            // If verification is needed after click, do it here.
            browser.sleep(500);
        });
    });
});

I hope this explanation helps clarify the process for executing sequential actions in your code.

Answer 4

When working with multiple actions in your code, it's important to ensure they execute sequentially once the first one is completed resolving its promise. Here's a simple way to achieve this:

beforeEach(function () {
    browser.ignoreSynchronization = true;

    // Actions for OnePage
    onePage = new OnePage();
    browser.wait(EC.presenceOf(onaPage.userLogin), 5000).then(function(){
        onePage.setUser('login@login');
        onePage.setPassword('password');
        onePage.login();
        
        // Actions for SecondPage chained after the first one
        secondPage = new SecondPage();
        browser.wait(EC.visibilityOf(usersPage.usersTab), 10000).then(function(){
            usersPage.usersTab.click().then(function(){
                // If verification is needed after click, do it here.
                browser.sleep(500);
            });
        });
    });
});

To ensure that the actions on the second page are done only after those on the first page have completed, you can chain them together in the following manner:

browser.wait(EC.presenceOf(onaPage.userLogin), 5000).then(function(){
    // Actions for OnePage
}).then(function(){
    // Actions for SecondPage
    secondPage = new SecondPage();
    browser.wait(EC.visibilityOf(usersPage.usersTab), 10000).then(function(){
        usersPage.usersTab.click().then(function(){
            // If verification is needed after click, do it here.
            browser.sleep(500);
        });
    });
});

I hope this explanation helps clarify the process for executing sequential actions in your code.

Stale reference to element detected in Protractor despite implementation of conditional wait

Answer №1

Answer №2

Similar questions

Is there a way to implement a @click event on a Vuetify expansion panel?

Despite being invoked five times and enclosed in a React.Fragment tag, the functional component is still not displaying any content

The response header does not contain a valid JWT token

What factors contribute to a one-hour discrepancy between two time stamps, deviating from the anticipated value?

Entity Framework and the GET request error: Connection Reset

Having trouble accessing the text in a paragraph using JavaScript executor and web driver

Is the Router.refresh() function failing to refresh within the next 13 seconds?

Having trouble retrieving data passed between functions

Encountering an issue with DateTimeField being undefined in a React.js application

Tips for modifying an HTML element's attribute when a button is clicked, both in the client and server side

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

A guide on instantly updating displayed flat/section list elements in React Native

The method for transforming all headers into permalinks with jquery/javascript

What could be the reason for the counter not being incremented when the button is clicked

Leveraging the boolean values of attributes within JSX statements

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

What could be the reason for my function failing to return true?

unable to gather information from suppliers

The on-screen keyboard using JQuery and CSS is not working properly on an HTML redesign

Error in Express application due to uncaught SyntaxError