Firefox doesn't wait for a page load Webdriverio - node.js

Question

I am trying to run my test using Selenium and just encountered the problem. I have my test written for the Chrome browser. Now I have been trying to run the same tests in the Firefox browser, but they failed.
I've started to investigate the problem and found out that Firefox doesn't wait until page is fully loaded. Chrome works perfectly.
I am running Selenium in docker containers.
Here is my script
storeSearch(info) {
let that = this;
return new Promise(function (resolve, reject) {
browserClient.init()
.url("http://somewhere.com")
.selectByVisibleText("#store","Tech")
// Redirect to a new page
.setValue("input[name='search']", info.searchCriteria)
.selectByValue(".featured", 'MacBook')
.click("button[name='info']")
.element('.popup')
.then(function (element) {
if (element.state === 'success') {
}
});
});
}
It doesn't try even to select a store type from the select .selectByVisibleText("#store","Tech") and just throws an exception.
"An element could not be located on the page using the given search
parameters (\"input[name='search']\").",
I have tried to add timeouts but it doesn't work as well and gives me an error.
browserClient.init()
.url("http://somewhere.com")
.timeouts('pageLoad', 100000)
.selectByVisibleText("#store","Tech")
The following error is thrown.
"Unknown wait type: pageLoad\nBuild info: version: '3.4.0', revision:
'unknown', time: 'unknown'\nSystem info: host: 'ef7581676ebb', ip:
'172.17.0.3', os.name: 'Linux', os.arch: 'amd64', os.version:
'4.9.27-moby', java.version: '1.8.0_121'\nDriver info: driver.version:
unknown
I have been trying to solve this problem for two days, but no luck so far.
Could someone help, maybe you have some ideas what can cause the problem ?
Thanks.
UPDATE
.url("http://somewhere.com")
.pause(2000)
.selectByVisibleText("#store","Tech")
If I put some pause statements it works, but this is really bad and not what I expect from this framework. Chrome works perfectly. It waits until loading bar is fully loaded and only then performs actions.
The problem is in geckodriver I guess, I have tested it the same flow in Python, Java and the behavior is exactly the same.

Answer 1

I am experiencing the exact behavior you detailed above, all-green/passing test cases in Chrome, but on Firefox, a different story.
First off, never use timeouts, or pause in your test cases unless you are debugging. In which case, chaining a .debug() previously to your failing step/command will actually do more good.
I wrapped all my WDIO commands in waitUntill() and afterwards, I saw green in Firefox as well. See your code bellow:
storeSearch(info) {
let that = this;
return new Promise(function (resolve, reject) {
browserClient.init()
.url("http://somewhere.com")
.waitUntil(function() {
return browser
.isExisting("#store");
}, yourTimeout, "Your custom error msg for this step")
.selectByVisibleText("#store","Tech")
// Redirect to a new page
.waitUntil(function() {
return browser
.setValue("input[name='search']", info.searchCriteria);
}, yourTimeout, "Your custom error msg for this step")
.waitUntil(function() {
return browser
.selectByValue(".featured", 'MacBook');
}, yourTimeout, "Your custom error msg for this step")
.waitUntil(function() {
return browser
.click("button[name='info']");
}, yourTimeout, "Your custom error msg for this step")
.waitUntil(function() {
return browser
.isExisting(".popup");
}, yourTimeout, "Your custom error msg for this step")
.element('.popup')
.then(function (element) {
assert.equal(element.state,'success');
});
});
}
It's not pretty, but it did the job for me. Hopefully for you as well.
Enhancement: If you plan on actually building & maintaining a strong automation harness using WDIO, then you should consider creating custom commands that package the waiting & make your test cases more readable. See bellow an example for .click():
commands.js:
module.exports = (function() {
browser.addCommand('cwClick', function(element) {
return browser
.waitUntil(function() {
return browser.isExisting(element);
}, timeout, "Oups! An error occured.\nReason: element(" + element + ") does not exist")
.waitUntil(function() {
return browser.isVisible(element);
}, timeout, "Oups! An error occured.\nReason: element(" + element + ") is not visible")
.waitUntil(function() {
return browser.click(element);
}, timeout, "Oups! An error occured.\nReason: element(" + element + ") could not be clicked")
});
})();
All that's left to do, is import your module via require() in your test case file: var commands = require('./<pathToCommandsFile>/commands.js');

Answer 2

You can use code in javascript which will be waiting for state of website.
In C# looks like this:
public void WaitForPage(IWebDriver driver, int timeout = 30)
{
IWait<IWebDriver> wait = new WebDriverWait(driver, TimeSpan.FromSeconds(timeout));
wait.Until(driver1 => ((IJavaScriptExecutor)driver).ExecuteScript("return document.readyState").Equals("complete"));
}

Answer 3

I've run into quite a few issues like this with Selenium in Python and C#, unfortunately both in the Chrome and Firefox webdrivers. The problem seems to be that the code gets ahead of itself and tries to reference elements before they even exist/are visible on the page. The solution I found in Python at least was to use the Wait functions like this: http://selenium-python.readthedocs.io/waits.html
If there isn't an equivalent in node, you might have to code a custom method to check the source every so often for the presence of the element in x intervals over time.