如何在页面部分中嵌套 nightwatch.js 命令? [英] How to nest nightwatch.js commands in page sections?

问题描述

我有一个页面 pages/login.js 看起来像:

I have a page pages/login.js looks like:

function fillAndSubmitLogin(email, password) {
  return this
  .waitForElementVisible('@emailInput')
  .setValue('@emailInput', email)
  .setValue('@passwordInput', password)
  .waitForElementVisible('@loginSubmitButton')
  .click('@loginSubmitButton');
}


export default {
  commands: [
    fillAndSubmitLogin
  ],
  elements: {
    emailInput: 'input#email',
    passwordInput: 'input[type=password]',
    TFAInput: 'input#token',
    loginSubmitButton: '.form-actions button.btn.btn-danger'
  }
};

我有另一个页面 pages/hompage.js homepage.js 试图包含 pages/login.js 作为一个部分

I have another page pages/hompage.js homepage.js attempts to include pages/login.js as a section

import login from "./login.js";

module.exports = {
  url: 'http://localhost:2001',
  sections: {
    login: {
      selector: 'div.login-wrapper',
      ...login
    }
  }
};

然后我有一个测试用例尝试登录主页部分

I then have a test case that attempts to login on the hompage section

  'Homepage Users can login': (client) => {
    const homepage = client.page.homepage();
    homepage
    .navigate()
    .expect.section('@login').to.be.visible;


    const login = homepage.section.login;
    login
    .fillAndSubmitLogin('[e-mail]', 'password');

    client.end();
  }

此测试随后失败并出现以下错误

This test then fails with the following error

TypeError: login.fillAndSubmitLogin is not a function
       at Object.Homepage Users can login (/Users/kevzettler//frontend/test/nightwatch/specs/homepage.spec.js:32:6)
       at <anonymous>
       at process._tickCallback (internal/process/next_tick.js:182:7)

  login.fillAndSubmitLogin is not a function
       at Object.Homepage Users can login (/Users/kevzettler//frontend/test/nightwatch/specs/homepage.spec.js:32:6)
       at <anonymous>
       at process._tickCallback (internal/process/next_tick.js:182:7)

推荐答案

根据 Nightwatch 文档，在页面对象中导出的任何命令都应该是纯 JavaScript 对象，键是命令名称，值是函数.例如:

According to the Nightwatch docs, any commands that are exported in page objects should be plain JavaScript objects with a key being a command name and the value being a function. For example:

var googleCommands = {
  submit: function() {
    this.api.pause(1000);
    return this.waitForElementVisible('@submitButton', 1000)
      .click('@submitButton')
      .waitForElementNotPresent('@submitButton');
  }
};

module.exports = {
  commands: [googleCommands],
  elements: //...etc ...
  // etc...
}

在本例中，模块导出 googleCommands，它是一个命令对象，它有一个键 (submit) 和一个相应的函数.我相信你应该重构你的代码如下:

In this example, the module exports googleCommands, which is a command object which has a key (submit) and a corresponding function. I believe you should refactor your code as follows:

function fillAndSubmitLogin = {
  fillAndSubmitLogin: function(email, password) {
    return this
    .waitForElementVisible('@emailInput')
    .setValue('@emailInput', email)
    .setValue('@passwordInput', password)
    .waitForElementVisible('@loginSubmitButton')
    .click('@loginSubmitButton');
  }
};

当然，您不必使两个地方的命令名称相同(如示例所示 (googleCommands/submit).这允许您在一个command中公开多种功能.希望能回答这个问题！

Of course, you don't have to make the command name the same in both places (as the example shows (googleCommands/submit). This allows you to expose a variety of functions in one command. Hope that answers the question!

这篇关于如何在页面部分中嵌套 nightwatch.js 命令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！