tractor-plugin-page-objects

Plugin for tractor for creating Page Objects.

How to install:

npm install tractor-plugin-page-objects --dev

or

yan add tractor-plugin-page-objects --dev

Config:

// tractor.conf.js
module.exports = {
    // ...
    pageObjects: {
        directory: './path/to/app/',
        include: {
            someUiComponentLibrary: './node_modules/module/to/include/existing/page-objects/from/'
        }
    },
    // ...
};

For more information see here

What does this plugin do?

A Page Object is a class that describes the behaviour of a part of a application. There has been a lot of stuff written about them already! This plugin encapsulates the best ideas of Page Objects and makes it really ready easy to create and modify them.

A Page Object is composed of Elements and Actions. An Element is a reference to a DOM element, or group of DOM elements, and an Action is a set of Interactions on those elements.

This plugin provides a UI for describing Page Object classes with Elements and Actions and generates the corresponding JavaScript code for that class. As an example, the following is generated JavaScript that describes following piece of UI:

/*{"name":"tractor-page-objects action parameter","elements":[{"name":"name input"},{"name":"remove parameter button"}],"actions":[{"name":"add parameter","parameters":[{"name":"name"}]},{"name":"remove parameter","parameters":[]}],"version":"0.5.0"}*/
module.exports = function () {
    var TractorPageObjectsActionParameter = function TractorPageObjectsActionParameter(parent) {
        var find = parent ? parent.element.bind(parent) : element;
        this.nameInput = find(by.css('tractor-variable-input[label="Name"] input'));
        this.removeParameterButton = find(by.css('tractor-action[action="Remove parameter"] button'));
    };
    TractorPageObjectsActionParameter.prototype.addParameter = function (name) {
        var self = this;
        var result = Promise.resolve();
        result = result.then(function () {
            return self.nameInput.sendKeys(name);
        });
        return result;
    };
    TractorPageObjectsActionParameter.prototype.removeParameter = function () {
        var self = this;
        var result = Promise.resolve();
        result = result.then(function () {
            return self.removeParameterButton.click();
        });
        return result;
    };
    return TractorPageObjectsActionParameter;
}();

Development:

To set up development:

yarn // install dependencies
yarn link "tractor-plugin-page-objects" // link plugin to use itself
tractor init

To run plugin...

mkdir test
yarn tractor:test // in one tab
yarn tractor // in another tab

To run tests...

mkdir test
yarn tractor:test // in one tab
yarn test:e2e // in another tab

If you care, check out the design decisions document