我在哪里使用 wdio testrunner 在 WebdriverIO 中添加自定义命令？

Question

我正在使用 WebdriverIO 及其带有 mocha 和 chai 的 wdio testrunner。

我想构建一些自定义命令，但在这种情况下，在哪里以及如何添加自定义命令的最佳方式？

Answer 1

在构建由您提到的确切技术栈 (WebdriverIO/Mocha&Chai) 提供支持的成熟自动化线束时，我得出的结论是 Page Objects are't there yet (it's also a pain to keep them up-to-date) and the best way to harness the complete power of WebdriverIO is to write your own Custom Commands.

我推荐自定义命令的主要原因：

避免重复使用 waitUntil() 语句（显式等待）以显示 WebElement；
轻松访问我的 WebElement 模块（我根据视图、路线或网站在其中映射 WebElements 的文件）；
在其他自定义命令中重复使用相同的自定义命令；
Mocha it()（测试用例）语句更加清晰易懂。

这是一个如何编写自定义 click()（action.js 文件）的示例：

 module.exports = (function() {

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Def: Performs a 'click' action on the given element (WebElement)
     *      after waiting for the given element to exist and be visible. 
     * @param:  {String} element 
     * @returns {WebdriverIO.Promise}
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    browser.addCommand('cwClick', function(element) {
        var locator = cwElements.<jsonPathTo>[element] ||
                      thirdPartyElements.<jsonPathTo>[element];

        assert.isOk(locator, "\nNo CSS-path for targeted element ('" + element + "')\n");

        return browser
            .waitUntil(function() {
                return browser.isExisting(locator);
            }, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') does not exist")
            .waitUntil(function() {
                return browser.isVisible(locator);
            }, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') is not visible")
            .waitUntil(function() {
                return browser.click(locator);
            }, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') could not be clicked")
    });

 })();

最后，在您的测试套件（功能文件）中，导入包含您的自定义命令的文件，在本例中为 action.js：var action = require('.<pathToCommandsFolder>/action.js');.

就是这样。你完成了！ :)

注意：为了保持我的自定义命令文件干净，我将它们分为几类：

操作 (action.js)：
- 包含以下操作：cwClick、cwGetText、cwGetValue、cwSetValue 等
验证 (validate.js):
- 包含验证，例如：isDisplayed、isNotDisplayed 等
导航 (navigate.js):
- 包含导航命令：cwBack、cwRefresh、cwForward、tab-manipulation-custom-commands 等。
等（天空硬件是极限！）

希望这对您有所帮助。干杯！

Answer 2

保留自定义命令的最佳位置是在您的 wdio 配置文件中。

 before: function(capabilities, specs) {
       // Comment why this command is getting added and what it is supposed to do
        browser.addCommand('nameOfCommand', function() {
            // your code for the command            
        });
    },

当您完成在配置文件中添加自定义命令时。您可以通过调用浏览器对象在整个框架的任何地方调用它们。就像上面要调用的自定义命令一样：browser.nameOfCommand() 会产生魔力。

Answer 3

郑重声明，这是我如何在页面对象中创建自定义命令的示例。

var HomePage = function() {
    var me = this;

    this.clickFlag = function() {
        var flag = me.navbar.$('.//li[@class="xtt-popover-click xtt-flags"]'),
            flagActive = me.navbar.$('.//li[@class="xtt-popover-click xtt-flags active"]');
        flag.click();
        flagActive.waitForExist(1000);
    }

    this.elementThatContainsText = function(tag, text) {
        var el;
        if (tag) {
            el = $('//' + tag + '[contains(content(), "' + text + '")]');
        } else {
            el = $('//*[contains(content(), "' + text + '")]');
        }
        return el;
    }

    this.highlight = function(webElement) {
        var id = webElement.getAttribute('id');
        if (id) {
            browser.execute(function(id) {
                $(id).css("background-color", "yellow");
            }, id);
        }
    }

};

Object.defineProperties(HomePage.prototype, {
    navbar: {
        get: function() {
            return $('//div[@class="navbar-right"]');
        }
    },
    comboLanguage: {
        get: function() {
            return this.navbar.$('.//a[@id="xtt-lang-selector"]');
        }
    },
    ptLink: {
        get: function() {
            return this.navbar.$('.//a[@href="/institutional/BR/pt/"]');
        }
    }
});

module.exports = new HomePage();

因此，我的主页现在有一个自定义 clickFlag 命令和一个 highlight 命令。 navbar 和 comboLanguage 等属性是选择器。

我在哪里使用 wdio testrunner 在 WebdriverIO 中添加自定义命令？

Where do I add custom commands in WebdriverIO with wdio testrunner?

webdriver-io