node.js - Firefox 不等待页面加载 Webdriverio

Question

我正在尝试使用 Selenium 运行我的测试，但刚刚遇到了这个问题。我为 Chrome 浏览器编写了测试。现在我一直在尝试在 Firefox 浏览器中运行相同的测试，但它们失败了。

我已经开始调查这个问题并发现 Firefox 不会等到页面完全加载。 Chrome 运行完美。

我在 docker 容器中运行 Selenium。

这是我的脚本

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') {

                    }
                });
        });
    }

它甚至不尝试从 select .selectByVisibleText("#store","Tech") 中选择商店类型，只是抛出异常。

"An element could not be located on the page using the given search parameters (\"input[name='search']\").",

我尝试添加 timeouts，但效果不佳，并出现错误。

  browserClient.init()
                    .url("http://somewhere.com")
                    .timeouts('pageLoad', 100000)
                    .selectByVisibleText("#store","Tech")

抛出以下错误。

"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

这两天我一直在尝试解决这个问题，但到目前为止没有运气。

有人可以提供帮助吗，也许您知道是什么导致了这个问题？

谢谢。

更新

 .url("http://somewhere.com")
                .pause(2000)
                .selectByVisibleText("#store","Tech")

如果我放置一些 pause 语句它会起作用，但这真的很糟糕，而且不是我对这个框架的期望。 Chrome 完美运行。它会等到加载栏完全加载，然后才执行操作。

我猜问题出在 geckodriver 中，我已经在 Python、Java 中以相同的流程对其进行了测试，并且行为完全相同。

Answer 1

我正在经历您上面详述的确切行为，Chrome 中的全绿色/通过测试用例，但在 Firefox 上，则是另一回事。

首先，永远不要使用timeouts , 或 pause在您的测试用例中，除非您正在调试。在这种情况下，链接 .debug()在你失败的步骤/命令之前实际上会做得更好。

我将所有的 WDIO 命令包装在 waitUntill() 中之后，我在 Firefox 中也看到了绿色。请参阅下面的代码:

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');
        });
});
}

它不漂亮，但它为我完成了工作。希望你也一样。

增强:如果您计划使用 WDIO 实际构建和维护强大的自动化线束，那么您应该考虑创建 custom commands打包等待并使您的测试用例更具可读性。请参阅下面的示例 .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")
});
})();

剩下要做的就是通过 require() 导入您的模块在您的测试用例文件中:var commands = require('./<pathToCommandsFile>/commands.js');