Question

我正在使用Webdriver IO 及其wdio testrunner与mocha和chai。

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

Answer 1

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

ng-app="myapp"

完成在配置文件中添加自定义命令后。只需调用浏览器对象，就可以在整个框架中的任何位置调用它们。就像上面要调用的自定义命令一样：ng-repeat会做出魔法。

Answer 2

在构建由您提到的（WebdriverIO / Mocha＆amp; Chai）精确技术堆栈提供支持的完整自动化线束的同时，我得出的结论是 Page Objects are't there yet（让他们保持最新状态也很痛苦）以及利用 WebdriverIO 是写你自己的 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，制表符操作 - 自定义命令等。

等。（天空硬件是极限！）

希望这会有所帮助。干杯！

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();

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

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

3 个答案: