Protractor - StaleElementReferenceException occurs sporadically

Question

I've stuck with problem with Stale Element Reference Exception using protractor/jasmine2.

My spec:

var LoginPage = require('../pages/login_page.js');
var WelcomePage = require('../pages/welcome_page.js');

describe('Test -> testing something', function () {

    var loginPage;
    var EC = protractor.ExpectedConditions;
    var waitTimeout = 10000;

    function logIn() {
        loginPage.setUser('user');
        loginPage.setPassword('password');
        loginPage.login();
    }

    beforeEach(function () {
        browser.ignoreSynchronization = true;
        loginPage = new LoginPage();
        browser.wait(EC.presenceOf(loginPage.userLogin), waitTimeout);
        logIn();
        var welcomePage = new WelcomePage();
        browser.wait(EC.visibilityOf(welcomePage.usersButton), waitTimeout);
        welcomePage.usersButton.click();
    });

The problem is that StaleElementReferenceException occurs randomly on the last line of beforeEach function when I want to click on the usersButton. No idea why ExpectedCondition do not work (have tried as well different EC like presenceOf, elementToBeClickable etc. but none solved problem).

See page with usersButton defined for reference:

'use strict';
var WelcomePage = function () {
};

WelcomePage.prototype = Object.create({}, {
    usersButton: {
        get: function () {
            return element(by.css('#users a'));
        }
    }
});

module.exports = WelcomePage;

I think that some generic retry_mechanism would be needed to handle it, Anyone has similiar issue ?

---

Finally written function like that

var clickOn = function (element) {
    browser.wait(EC.visibilityOf(element), waitTimeout).then(function() {
        element.click();
    });}

which is invoked like this:

    clickOn(welcomePage.usersButton);

Update: Have tested it several times and when I am running tests on selenium grid I am still getting Stale Element exception on this exact element. So provided solution did not work ...

Failed: stale element reference: element is not attached to the page document (Session info: chrome=45.0.2454.93) (Driver info: chromedriver=2.19.346078 (6f1f0cde889532d48ce8242342d0b84f94b114a1),platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 15 milliseconds For documentation on this error, please visit: http://seleniumhq.org/exceptions/stale_element_reference.html Build info: version: '2.47.1', revision: '411b314', time: '2015-07-30 03:03:16' System info: host: 'ITHFPC17', ip: '10.98.0.48', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_40' Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, chrome={userDataDir=C:\Users\SELENI~1\AppData\Local\Temp\scoped_dir2384_11396}, takesHeapSnapshot=true, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=45.0.2454.93, platform=XP, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}] Session ID: 3244710644015ee170986333564ab806
Failed: Wait timed out after 10032ms

---

The next approach is to wait until element is present, afterwards if it's visible and afterwards if it's clickable... but it doesn't work as well. The strange thing is that on selenium grid everything works fine but when I am trying to run test locally then getting previously mentioned exception.

exports.clickOn = function (element) {
    browser.wait(EC.presenceOf(element), waitTimeout).then(function () {
        browser.wait(EC.visibilityOf(element), waitTimeout)
    }).then(function () {
        browser.wait(EC.elementToBeClickable(element), waitTimeout)
    }).then(function () {
        element.click();
    });
};

Anyone has any idea how to deal with it ? ... I am stuck.

Answer 1

Wait until the element is eligible to be clicked on by resolving the promise that the wait until elementToBeClickable() function returns. Also make sure that your actions before click() are completed, so that protractor can find the element as intended. Probably chaining all the actions to one another can be a good solution. That way the StaleElementReferenceException error can be avoided. Here's how -

browser.wait(EC.presenceOf(loginPage.userLogin), waitTimeout).then(function(){
    logIn();
}).then(function(){
    var welcomePage = new WelcomePage();
}).then(function(){
    browser.wait(EC.elementToBeClickable(welcomePage.usersButton), waitTimeout).then(function(){
        welcomePage.usersButton.click();
    });
});

Hope it helps.