javascript - attribute - Herencia de los objetos de la página del transportador

title html

Question

Dado que estoy construyendo mi conjunto de pruebas e2e del transportador angularjs aprovechando el patrón de objetos de la página.

Y separo el código objeto de la página en archivos diferentes tanto como sea razonable.

1. ¿Cuál sería un buen enfoque para habilitar la herencia de objetos de página? javascript herencia clásica? ¿Herencia basada en Object.create ()? ¿Otro?

2. ¿Debo mantener las expectativas dentro del objeto de la página? ¿O favorecer la opinión de Martin Fowler moviéndolos a una biblioteca de afirmaciones ? en cuyo caso, ¿cómo sería exactamente eso en esta pila de tecnología javascript-nodejs?

He preparado un área de juegos jsfiddle en vivo aquí para que pueda probar sus mejoras.

O simplemente pegue el código dentro de la respuesta, pegaré el contenido de jsfiddle a continuación para mayor claridad:

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;
};

use.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''

Answer 1

Aquí está el enlace a un tutorial que configuré para capacitar a algunos de mis compañeros de trabajo en la creación de buenos conjuntos de pruebas de transportadores.

Todo está en vivo, con un sitio de demostración que puede visitar, explorar, etc.

https://github.com/Droogans/ProtractorPageObjects

Esto lo configurará con la instalación, esquemas, técnicas de organización y más.

Siéntase libre de dejar un problema si tiene algún problema.

Answer 2

Mis opiniones y cómo estructuramos nuestra prueba ...

• Un modelo de página general que contiene algunos métodos que esperamos que la mayoría de las páginas usen como go() o tenemos métodos para interactuar con algunos elementos personalizados comunes.

• Muchos modelos específicos de página que heredan de esta página general. La mayoría de los métodos en estos modelos están relacionados con obtener varios elementos en la página o interactuar con la interfaz de usuario de esa página. No hay métodos de afirmación en estos modelos.

• Modelos de interfaz de usuario para interactuar con ciertos widgets más complicados. Similar a los modelos de página, pero estos no están vinculados a una página. Están vinculados a una interfaz de usuario / widget. No hay métodos de afirmación en estos modelos.

• Para afirmaciones comunes y reutilizables, tenemos modelos de afirmación que utilizan varios métodos de interacción de modelos de páginas y de modelos de UI. Están organizados por página o UI. Para las afirmaciones que no son comunes y no son realmente reutilizables, simplemente las colocamos en la especificación.

• Las especificaciones generalmente se organizan por página, aunque sí tenemos especificaciones para ciertos UI / widgets.