如何在 JavaScript 中实现打开页面模型

Question

我正在尝试为我的登录页面实现一个页面对象模型。

conf.js

exports.config={
    seleniumAddress:'http://localhost:4444/wd/hub/',
    specs: ['spec.js']
}

spec.js

    describe('Test suite to check the login', function(){
    it('Check the browswer', function(){
        browser.waitForAngularEnabled(false)
        browser.get('http://some-login-page.com');
        element(by.id('ctrlLogin_UserName')).sendKeys("valid-login");
        element(by.id('ctrlLogin_Password')).sendKeys("valid-password");
        element(by.id('ctrlLogin_LoginButton')).click();
    }); 
})

package.json

  "name": "automation",
  "version": "1.0.0",
  "description": "My first automation project",
  "main": "conf.js",
  "dependencies": {
    "jasmine": "^3.5.0",
    "protractor": "^5.4.3"
  },

那么，我可以知道如何在这个登录页面上实现页面对象模型吗？谢谢！

Answer 1

首先，您必须创建一个对象，该对象具有您想要在页面上执行/测试的每个操作的方法。在开发代码时从简单开始并进行迭代。对你来说，这样的东西可能作为页面对象工作：

var LoginPage = function() {
    var nameInput = element(by.id('ctrlLogin_UserName'));
    var PasswordInput = element(by.id('ctrlLogin_Password'));
    var LoginButton = element(by.id('ctrlLogin_LoginButton'));

    this.get = function() {
        browser.get('http://some-login-page.com');
    };

    this.setName = function(name) {
        nameInput.sendKeys(name);
    };

    this.setPassword = function(password) {
        PasswordInput.sendKeys(password);
    };

    this.submitLogin = function() {
        LoginButton.click();
    };
};
module.exports = new LoginPage();

例如您可以添加一个名为 login 的额外方法，并同时获取用户名和密码，调用自身 setName setPassword 和 submitLogin

创建页面对象后，您只需在测试中使用它：

var LoginPage = require('./LoginPage');
describe('Test suite to check the login', function(){
    it('Check the browswer', function(){
        browser.waitForAngularEnabled(false)
        LoginPage.get();
        LoginPage.setName('valid-login');
        LoginPage.setPassword('valid-password');
        LoginPage.submitLogin();
    });
})

如果您的页面对象中有额外的 login() 方法，您当然可以在测试中使用它并减少代码行数。

现在，在您想要登录的测试中，您可以使用漂亮的新的页面对象抽象层。如果您的元素 id 发生更改，则只有一个地方可以更改它们。生活变得更轻松;-)

附：在量角器文档中查看更多详细信息：https://github.com/angular/protractor/blob/master/docs/page-objects.md（我从那里无耻地偷了我的例子）