javascript - 守夜人 : Using of custom commands inside page objects

Question

对于产品的新版本，我决定尝试使用页面对象方法而不是使用 View ，而且我可能开始错误地使用它。

我们有一个自定义命令，它只是等待一个元素并点击 (waitAndClick.js):

exports.command = function(selector, callback) {
  return this
    .waitForElementPresent(selector, 30000)
    .click(selector, callback);
};

它在测试中完美运行:

const {client} = require('nightwatch-cucumber');
const {defineSupportCode} = require('cucumber');

defineSupportCode(({Given, Then, When}) => {
    Given(/^I enable Dashboard management$/, () => {
        return client.waitAndClick('[id=enableManagement]');
    });
});

但是当我试图在页面对象中使用它时，它会抛出一个错误:

module.exports = {
  url() {
    return this.api.launchUrl;
  },
  elements: {
    username: '[name="_Nitro_Login_username"]',
    password: '[name="_Nitro_Login_password"]',
    enter_button: '[title="Enter"]'
  },
  commands: [
    {
      loginAs(username, password) {
        return this.waitForElementVisible('@username', 50000)
          .setValue('@username', username)
          .setValue('@password', password)
          .waitAndClick('@enter_button')
          .waitForElementNotPresent('@enter_button', 50000);
      }
    }
  ]
};

我也尝试了 .api.waitAndClick('@enter_button')，结果相同。

错误信息:

Error while running click command: Provided locating strategy is not supported: [title="enter"]. It must be one of the following:

class name, css selector, id, name, link text, partial link text, tag name, xpath

at Object.exports.command (/Users/eaflor/dev/jive-next/test/ui/commands/waitAndClick.js:9:63)

at Object.F.command (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/api.js:274:31)

at Object.commandFn (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/api.js:287:24)

at AsyncTree.runCommand (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:154:30)

at AsyncTree.runChildNode (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:114:8)

at AsyncTree.walkDown (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:80:10)

at AsyncTree.walkUp (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:97:8)

at AsyncTree.walkDown (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:90:12)

at AsyncTree.traverse (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:73:8)

at F.onCommandComplete (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:131:12)

at F.g (events.js:291:16)

at emitNone (events.js:86:13)

at F.emit (events.js:185:7)

at /Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/api/client-commands/_locateStrategy.js:18:10

at _combinedTickCallback (internal/process/next_tick.js:67:7)

at process._tickCallback (internal/process/next_tick.js:98:9)

Is it even possible to use custom commands inside the page object?

Answer 1

我找到了修复它的方法。为了在页面对象中使用自定义命令，您必须以类样式编写它们:http://nightwatchjs.org/guide#writing-custom-commands

它应该是这样的:

var util = require('util');
var events = require('events');

function waitAndClick() {
    events.EventEmitter.call(this);
}

util.inherits(waitAndClick, events.EventEmitter);

waitAndClick.prototype.command = function(selector) {
    const api = this.client.api;

    api
            .waitForElementPresent(selector)
            .click(selector, () => {
                this.emit('complete');
            })
    ;

    return this;
};

module.exports = waitAndClick;

希望对大家有帮助。