Question

我最近开始使用Protractor，但仍然觉得很难在不同的做事方式之间做出选择。

我看过不同的样式指南，它显示了实现页面对象模式（对象与函数）的不同方式。我已经了解到它主要归结为偏好（https://stackoverflow.com/a/33090468/8213778）

目前，我的测试中的页面对象按以下方式设置：

/* example.page.js */

var loginHeader = element(by.css('div.header'));
var usernameInput = element(by.id('username'));
var passwordInput = element(by.id('password'));
var loginButton = element(by.id('login'));
var errorMessage = element(by.css('div.error'));


module.exports = {
  loginUser: function () {
    usernameInput.clear();
    usernameInput.sendKeys('User1');
    passwordInput.clear();
    passwordInput.sendKeys('Password123');
    loginButton.click();
  },

  getLoginHeaderText: function () {
    return loginHeader.getText();
  },

  isErrorMessageDisplayed: function () {
    return errorMessage.isDisplayed();
  }
}

这是由其他人设置的，我想重新构建代码，使其更加一致，清洁和可重用（......并且一路上学习良好的标准！）。我正在努力解决的主要问题是：我是否还应该导出元素并在spec文件中添加操作（仅将函数设置为对多个操作进行分组）？

/* example.page.js */

module.exports = {
  loginHeader: element(by.css('div.header')),
  usernameInput: element(by.id('username')),
  passwordInput: element(by.id('password')),
  loginButton: element(by.id('login')),
  errorMessage: element(by.css('div.error')),

  loginUser: function () {
    usernameInput.clear();
    usernameInput.sendKeys('User1');
    passwordInput.clear();
    passwordInput.sendKeys('Password123');
    loginButton.click();
  }
}

所以我可以在spec文件中执行以下操作：

var examplePage = require('../pageobjects/example.specs.js');

expect(examplePage.loginHeader.isDisplayed()).toBeTruthy();
expect(examplePage.loginHeader.getText()).toEqual('Login');
examplePage.loginUser();
expect(examplePage.errorMessage.isPresent()).toBeFalsy();

这种方法的优点和缺点是什么？

使用clickLoginButton()，getLoginHeaderText()，isErrorMessageDisplayed()等功能进行当前设置的优缺点是什么？

量角器页面对象实现

0 个答案: