我在哪里使用 wdio testrunner 在 WebdriverIO 中添加自定义命令? [英] Where do I add custom commands in WebdriverIO with wdio testrunner?

问题描述

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

I'm using WebdriverIO and its wdio testrunner with mocha and chai.

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

I want to build some custom commands, but in this scenario, where and how is the best way to add custom commands?

推荐答案

在构建由您提到的确切技术堆栈 (WebdriverIO/Mocha&Chai)，我得出的结论是 页面对象 还没有(让它们保持最新也是一种痛苦)以及利用WebdriverIO 是编写你自己的 自定义命令.

While building a full-fledged automation harness powered by the exact tech-stack you mentioned (WebdriverIO/Mocha&Chai), I have come to the conclusion that 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 模块(我根据视图、路由或网站在其中映射了我的 WebElement 的文件)；
• 在其他自定义命令中重用相同的自定义命令；
• Mocha it()(测试用例)语句更清晰、更易于遵循.

• avoid reusing waitUntil() statements (explicitly waiting) for a WebElement to be displayed;
• easily access my WebElement modules (files where I mapped my WebElements based on views, routes, or websites);
• reuse the same custom commands in other custom commands;
• the Mocha it() (test case) statement is much cleaner and easier to follow.

以下是如何编写自定义 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');.

Finally, in your test suite (feature file), import the file that contains your custom command, in this case, action.js: var action = require('.<pathToCommandsFolder>/action.js');.

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

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

Note: In order to keep my custom-cummand files clean, I've broken them down into several categories:

• 操作(action.js):
  • 包含诸如:cwClick、cwGetText、cwGetValue、cwSetValue 等操作
  • Actions (action.js):
    • Contains actions such as: cwClick, cwGetText, cwGetValue, cwSetValue, etc.
    • 包含验证，例如:isDisplayed、isNotDisplayed 等.
    • 包含导航命令:cwBack、cwRefresh、cwForward、tab-manipulation-custom-commands 等.
    • Contains navigation commands: cwBack, cwRefresh, cwForward, tab-manipulation-custom-commands, etc.

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

    Hope this helps. Cheers!

    这篇关于我在哪里使用 wdio testrunner 在 WebdriverIO 中添加自定义命令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！