制作一个 'common' login.js 包含； nightwatch.js 测试

Question

为我的网络应用程序编写测试时；我必须先模拟登录，然后我的其余测试才能运行并查看内页。现在我正在调整代码，这样我就可以为通用函数制作一个 'include' ；比如我的登录。但是一旦我将下面的代码移动到一个单独的文件中，并通过 require 调用 include - 它不再像预期的那样运行s。

ie. 以下登录并允许我的其他功能（如果包含在同一文件中）。在我的其他内部屏幕功能之上。

// Login screen, create opportunity

this.LoginScreen = function(browser) {
        browser
                .url(Data.urls.home)
                .waitForElementVisible('#login', 2000, false)
                .click('#login')
                .waitForElementVisible('div.side-panel.open', 4000, false)
                .waitForElementVisible('input#email', 2000, false)
                .waitForElementVisible('input#password', 2000, false)
                .click('input#email')
                .pause(500)
                .setValue('input#email', Data.ProjMan.username)
                .click('input#password')
                .pause(500)
                .setValue('input#password', Data.ProjMan.password)
                .click('input#email') 
                .pause(500)
                .click('div.form.login-form .btn')
                .pause(5000)

        Errors.checkForErrors(browser);
};     

// Inner functions run after here, sequentially

但是，例如，一旦我将上面的内容移动到一个单独的文件中； Logins.js，然后在原始测试文件的顶部调用它。（是的，正确的路径）。

var Logins      = require("../../lib/Logins.js");

只是不再模拟登录了。有什么想法吗？我应该删除 this.LoginScreen 函数包装器，并以不同的方式调用它以从外部文件执行，还是我需要再次从原始文件中触发它，除了外部要求路径？

我也尝试过将“module.exports = {”包装在单独文件的登录函数周围，但仍然失败。

Answer 1

Nightwatch 允许您运行基于页面对象的测试，即您可以外部化常用测试函数并在常规测试中使用它们。这可以使用 'page_objects_path' property. I have added the common 'login' functionality and used it in sample 'single test' in the project here.

来实现

工作:

将您的常用函数放在 .js 文件中并将其放在一个文件夹下（例如：tests/pages/login.js）并在 nighwatch 配置文件中传递文件夹路径，如下所示：

 nightwatch_config = {
      src_folders : [ 'tests/single' ],
      page_objects_path: ['tests/pages'],

下面是一个常用登录函数的例子(login.js):

var loginCommands = {

  login: function() {
    return this.waitForElementVisible('body', 1000)
      .verify.visible('@userName')
      .verify.visible('@password')
      .verify.visible('@submit')
      .setValue('@userName', 'Enter Github user name')
      .setValue('@password', 'Enter Github password')
      .waitForElementVisible('body', 2000)

  }
};

 module.exports = {
      commands: [loginCommands],
        url: function() {
          return 'https://github.com/login';
        },
      elements: {
        userName: {
          selector: '//input[@name=\'login\']',
          locateStrategy: 'xpath'
        },
        password: {
          selector: '//input[@name=\'password\']',
          locateStrategy: 'xpath'
        },
        submit: {
          selector: '//input[@name=\'commit\']',
          locateStrategy: 'xpath'
        }
      }
    };

现在，在您的常规测试文件中，为下面的通用函数创建一个对象并使用它。

 module.exports = {
      'Github login Functionality' : function (browser) {

    //create an object for login
    var login = browser.page.login();
    //execute the login method from //tests/pages/login.js file
    login.navigate().login();

    //You can continue with your tests below:
    // Also, you can use similar Page objects to increase reusability
        browser
        .pause(3000)
          .end();
      }
    };

Answer 2

以上答案绝对正确，但我确实为如何提供登录用户详细信息而苦恼。

这是我最终使用的：

var loginCommands = {

    login: function() {
      return this.waitForElementVisible('body', 1000)
        .setValue("#email", "<some rnd email address>")
        .setValue('#password', "<some rnd password>")
        .click('button[type=submit]')
        .pause(1000)
    }
  };
  
  module.exports = {
    commands: [loginCommands],
      url: function() {
        return 'https://example.com/login';
      }
  };

这可以像已接受的答案一样使用，只是发布给前来搜索的其他人。

制作一个 'common' login.js 包含； nightwatch.js 测试

Make a 'common' login.js include; with nightwatch.js tests

javascript

selenium

npm

nightwatch.js