如何在Mocha.js + Selenium + wd.js中解析StaleElementReference

Question

I'm writing automation tests for a website using Mocha + SeleniumServer + wd.js + chai-as-promised. The website uses JavaScript for the front-end which seems to refresh the elements on the page when certain action is performed. ie Upon selecting an element in a grid, the "next" button is enabled to allow user to move on to the next page. It seems that this changes the reference to the button element resulting in the StaleElementReference error.

        describe('1st step', function () {
        it('should select an element is grid', function () {
            return browser
                .waitForElementByCss('#grid', wd.asserters.isDisplayed, 20000)
                .elementByCss('#grid .elementToBeSelected')
                .click()
                .sleep(1000)
                .hasElementByCss('#grid elementToBeSelected.active')
                .should.eventually.be.true;
        });

        it('should proceed next step', function () {
            return browser
                .waitForElementByCss('.btnGrid .btn.nextBtn:not(.disabled)', wd.asserters.isDisplayed, 20000)
                .elementByCss('.btnGrid .btn.nextBtn:not(.disabled)')
                .click()//Error thrown here
                .sleep(2000)
                .url()
                .should.eventually.become('http://www.somewebsite.com/nextpage');
        });
    });

With my limited experience with JavaScript, I have tried all that i could think off, but to no avail. So is there anyway I can avoid this StaleElementReference error? Also, the error is only sometimes thrown during execution.

Answer 1

You might want to read some more on the Stale Element Reference exception. From what you are describing, it sounds like you get a reference to an element, do something on the page which then changes/removes the referenced element. When you do something with the variable reference you get this error. The solution really depends on the code you are using to do your tests and your framework for accessing elements. In general, you need to be aware of when you perform an action that changes the page and refetch the element before you access it. You could always refetch an element before you access it, you could refetch all elements that are affected by a page change, and so on...

You code probably looks something like this

WebElement e = driver.findElement(...); // get the element
// do something that changes the page which, in turn, changes e above
e.click(); // throws the StaleElementReference exception

What you probably want is something more like one of these...

Don't fetch the element until you need it

// do something that changes the page which, in turn, changes e above
WebElement e = driver.findElement(...); // get the element
e.click(); // throws the StaleElementReference exception

...or fetch it again right before you need it...

WebElement e = driver.findElement(...); // get the element
// do something that changes the page which, in turn, changes e above
e = driver.findElement(...); // get the element
e.click(); // throws the StaleElementReference exception

I would prefer the first fix... just fetch what you need when you need it. That should be the most efficient way to solve this problem. The second fix might have performance issues because you might be refetching a bunch of elements over and over and either never using them or refetching them 10 times only to reference the element once at the end.