代码之家 › 专栏 › 技术社区 › kevzettler

如何守夜。页面部分中的js命令?

nightwatch.js testing javascript

kevzettler · 技术社区 · 8 年前

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

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 主页js试图包括 页面/登录。js 作为一个部分

import login from "./login.js";

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

然后,我有一个测试用例,试图登录hompage部分

  '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('user@test.com', 'password');

    client.end();
  }

然后,该测试失败,出现以下错误

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)

1 回复 | 直到 8 年前

Steve H. 8 年前

根据 Nightwatch docs ,在页面对象中导出的任何命令都应该是普通JavaScript对象,键是命令名,值是函数。例如:

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 ,这是一个具有键的命令对象( 提交 )以及相应的函数。我认为您应该按照以下方式重构代码:

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

当然,您不必在两个位置都使用相同的命令名(如示例所示)( 谷歌命令 / submit )。这允许您在一个应用程序中公开多种功能 command .希望这能回答问题!