量角器页面对象继承

问题描述

由于我建设我angularjs量角器端到端测试功能套件充分利用页面对象的模式。

和我在不同的文件中单独的页面对象code尽可能合理的。

1. 这将是一个很好的方法，以使页面对象继承？ JavaScript的经典传承？的Object.create（）基于继承？其他？




2. 我应该保持页面对象中的期望是什么？或有利于Martin Fowler的？在这种情况下，究竟如何将看起来像在这个JavaScript的技术的NodeJS栈？

我已经prepared href=\"https://c9.io/elgalu/pageobjects\">住在这里的jsfiddle游乐场所以你可以尝试在你的进步。一个

这将设置你安装，大纲，组织技术等。

欢迎，如果您有任何问题离开的问题。

Given i'm building my angularjs protractor e2e tesing suite leveraging the page objects pattern.

And i separate page object code in different files as much as reasonable.

1. What would be a good approach to enable page objects inheritance? javascript classic inheritance? Object.create() based inheritance? Other?

2. Should i keep expectations within the page object? Or favor Martin Fowler optinion by moving them to an assertion library? in which case how exactly would that look like in this javascript-nodejs technology stack?

I've prepared a live jsfiddle playground here so you can try your improvements on.

Or simply paste code within the answer, i'll paste the jsfiddle content below for clarity:

loginPage.js

"use strict";

// A Page Object is a Singleton, so no need to constructors or classic js inheritance,
// please tell me if I'm wrong or what's the utility of creating a (new LoginPage())
// every time a spec need to use this login page.
var loginPage = {
    // Page Object Elements
    userElm: $('.user.loginPage'),

    // Page Object Assertions
    // Martin Fowler [doesn't favor](http://martinfowler.com/bliki/PageObject.html)
    // assertions in page objects, I'm open to suggestions on how to move
    // the assertions away from the Page Object and see how an assertion library
    // could like like in protractor.
    assertInputsDisplayed: function() {
        return ('Assertion: this.userElm: '+this.userElm);
    },

    // Page Object Actions
    get: function () {
        return ('navigating to LoginPage with userElm: '+this.userElm);
    }
};

module.exports.loginPage = loginPage;

loginDialog.js

"use strict";

var loginPage = require('./loginPage.js').loginPage;
var helpers = require('./helpers.js');

// Inherit properties from another Page Object
var loginDialog = helpers.extend({}, Object.create(loginPage), {
    // Page Object Elements
    userElm: $('.user.loginDialog'),

    // Page Object Actions
    get: function () {
        return ('navigating to LoginDialog with userElm: '+this.userElm);
    },

    logout: function () {
        return ('logging out of Dialog. user was: '+this.userElm);
    }
});

module.exports.loginDialog = loginDialog;

helpers.js

"use strict";

// some helper to avoid adding an external dependency for now
var extend = function(target) {
    var sources = [].slice.call(arguments, 1);
    sources.forEach(function (source) {
        for (var prop in source) {
            target[prop] = source[prop];
        }
    });
    return target;
};

usage.js

"use strict";

// Mock $() for easy unit testing this on nodejs REPL
global.$ = function(args) { return ('$BUILT '+args); };

var loginPage   = require('./loginPage.js').loginPage;
var loginDialog = require('./loginDialog.js').loginDialog;

console.log(loginPage.userElm);    //=> '$BUILT .user.loginPage'
console.log(loginDialog.userElm);  //=> '$BUILT .user.loginDialog'
console.log(loginPage.get());      //=> 'navigating to LoginPage with userElm: $BUILT .user.loginPage'
console.log(loginDialog.get());    //=> 'navigating to LoginPage with userElm: $BUILT .user.loginDialog'
console.log(loginPage.assertInputsDisplayed());   //=> 'LoginPage assertion: this.userElm: $BUILT .user.loginPage'
console.log(loginDialog.assertInputsDisplayed()); //=> 'LoginPage assertion: this.userElm: $BUILT .user.loginDialog'

//loginPage.logout();   //=> TypeError: Object #<Object> has no method 'logout'
console.log(loginDialog.logout()); //=> 'logging out of Dialog. user was: $BUILT .user.loginDialog'

解决方案

Here is link to a tutorial I set up for training some of my co-workers on create good Protractor test suites.

It's all live, with a demo site that you can visit, explore, etc.

https://github.com/Droogans/ProtractorPageObjects

This will set you up with installation, outlines, organizational techniques, and more.

Feel free to leave an issue if you have any trouble.

这篇关于量角器页面对象继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！