如何在 webdriverio 中编写自定义命令

Question

我正在尝试编写这样的自定义命令

 module.exports = (function() {
    browser.addCommand('selectABC', (element) => {
    let elem = element
    ...

   });
 })

并且在 conf.ts 中，我添加了这个

import * as custom from '../services/customCommands.service';

exports.config = {

/**
 * Gets executed before test execution begins. At this point you can access to all global
 * variables like `browser`. It is the perfect place to define custom commands.
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {Array.<String>} specs List of spec file paths that are to be run
 */
before: function (capabilities, specs) {
  // Add commands to WebdriverIO
  Object.keys(commands).forEach(key => {
    browser.addCommand(key, commands[key]);
  })
},

但是当我尝试这样的代码时

  class NewPage {
     public createnew(data) {
         browser.selectABC($('abc'))
     }
  }

或

 class NewPage {
     public createnew(data) {
         $('abc').selectABC()
     }
  }

这不起作用并引发此错误

错误 TS2339：属性 'selectABC' 在类型 'Client' 上不存在。

我错过了什么？谢谢！

Answer 1

wdio.conf.js

const commands = require('./commands.js')

exports.config = {
  before: function (capabilities, specs) {
    // Add commands to WebdriverIO
    Object.keys(commands).forEach(key => {
      browser.addCommand(key, commands[key]);
    })
  }
}

commands.js

module.exports = {
    getUrlAndTitle: function () {
        return {
            url: this.getUrl(),
            title: this.getTitle()
        };
    },
    otherCommand: function () {}
}

test.js

const chai = require('chai');
const assert = require("assert");
const expect = require('chai').expect;
const chaiWebdriver = require('chai-webdriverio').default;
chai.use(chaiWebdriver(browser));

describe("custom commands", () => {
  it("should have custom commands", () => {
    const getUrlAndTitle = browser.getUrlAndTitle();
    const title = getUrlAndTitle.title;
    assert.equal(title, "Custom Commands");

    // You could do the same equality check with:
    expect(title === "Custom Commands").to.be.true;

    // Or also check equality with: 
    expect(title).to.equal("Custom Commands");
  });
});

如果您还想在测试中使用 ES6 风格 javascript，您可以执行以下操作：

npm i @babel/cli @babel/core @babel/preset-env @babel/register --save

在你的package.json中：

{
  "name": "babelify-webdriverIO-mocha-chai",
  "version": "2.0.0",
  "description": "babelify-webdriverIO-mocha-chai",
  "scripts": {
    "test": "node node_modules/.bin/wdio ./config/wdio.dev.conf.js"
  },
  "author": "Zero Cool",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0",
    "@wdio/sauce-service": "^5.3.2",
    "@wdio/selenium-standalone-service": "^5.2.2",
    "@wdio/spec-reporter": "^5.2.3",
    "@wdio/sync": "^5.3.2",
    "chai": "^4.2.0",
    "webdriverio": "^5.3.5"
  },
  "devDependencies": {
    "@wdio/cli": "^5.3.5",
    "@wdio/local-runner": "^5.3.5",
    "@wdio/mocha-framework": "^5.3.2",
    "chai-webdriverio": "^1.0.0",
    "selenium-standalone": "^6.15.4"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ]
  }
}

您的测试文件现在看起来像这样：

import chai from "chai";
import { assert, expect } from "chai";
import chaiWebdriver from "chai-webdriverio";
chai.use(chaiWebdriver(browser));

describe("custom commands", () => {
  it("should have custom commands", () => {
    const getUrlAndTitle = browser.getUrlAndTitle();
    const title = getUrlAndTitle.title;
    assert.equal(title, "Custom Commands");

    // You could do the same equality check with:
    expect(title === "Custom Commands").to.be.true;

    // Or also check equality with: 
    expect(title).to.equal("Custom Commands");
  });
});

如果您使用的是 mocha，请务必将其包含在您的 wdio.conf.js:

    mochaOpts: {
      ui: "bdd",
      timeout: 10000,
      compilers: ["js:@babel/register"]
    }

如何在 webdriverio 中编写自定义命令

how to write custom commands in webdriverio

javascript

webdriver-io