My scenario: On a page, I have multiple buttons. After button is clicked, page is reloaded without the clicked button.
I have a problem with the implementation of a proper solution.
Currently I have something like this:
let selector = 'selector for All button on page';
let buttons = browser.$$(selector);
for (int i = 0; i < buttons.length; i++) {
let button = browser.$(selector);
button.moveToObject();
button.waitForVisible();
button.click();
browser.waitToVisible(elementAfterPageRefresh);
}
The problem occurs after the first iteration. Sometimes it works by only moving to the button, sometimes the script does not even click the second button.
What is the proper way to solve my problem with webdriverio?
Can you also provide a error traceback from the console after running your code? I presume you are facing the notorious "Stale element reference..." error.
First of all, a WebdriverIO driver, as well as a WebdriverJS one (its predecessor) will always lose the reference (element ID) to previously queried element/elements after the browser executes a page reload.
So according to Christian Bromman (@ChristianB), you will have to do something along the lines of:
runner
.init()
.url('https://www.google.dk/search?q=burrito')
.getText(".r").then(function(res){ // given `.r` is the <a /> tag on google search page
res.value.forEach(function(elem){
console.log(elem);
clicks.push(
runner
.click('=' + elem.ELEMENT) // use link text selector to query the element again
.pause(5000)
.back()
.pause(2000)
);
});
return q.all(clicks);
});
I presume this is only for training purposes as I cannot understand why clicking a series of buttons would each trigger a page refresh. :)