Nightwatch:使用页面对象内部的自定义命令

Question

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

我们有一个自定义命令，它只需等待元素并单击(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')，同样的结果。

以及错误消息：

运行单击命令时出错:提供的定位策略不受支持:title=“输入”。它必须是下列之一： 类名、css选择器、id、名称、链接文本、部分链接文本、标记名、xpath (/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) (/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)在emitNone (events.js:86:13) at F.emit (events.js:185:7) at _combinedTickCallback (tick.js/process/next_tick.js:67:7) at process._tickCallback (tick.js/process/next_tick.js:98:9) 在页面对象中甚至可以使用自定义命令吗？

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;

希望它能帮到别人。

Answer 2

我仍然是Nightwatch的新手，但是我在Page对象中使用这样的命令：

commands: [
    {
        login: function() {
            this.api
                .waitForElementVisible('body', 2000)
                .setValue(this.elements.username.selector, user.loginUser) //here I'm inputting username from json file into element that I've defined in this page object
                .setValue(this.elements.password.selector, pass.loginPass) //here I did same thing with password
                .pause(500)
                .click(this.elements.submitButton.selector) //here I'm clicking on predefined button element               
        }
    }
]

它工作得很好，而且很容易读。这是一个简单的登录命令。希望这能有所帮助。

干杯

Answer 3

在这里找出答案为时已晚，但可能会帮助其他面临类似问题的人。返回this可以修复页面对象中的链接问题。

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