@tractor-plugins/page-objects

Plugin for tractor for creating Page Objects.

How to install

npm install @tractor-plugins/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, really 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.7.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;
}();

You'll probably want to use it with @tractor-plugins/mocha-specs.

Development

To set up development:

npm install # install dependencies
npm run dev # link dependencies
tractor init

To run plugin:

npm run tractor:test # in one tab
npm run tractor # in another tab

To run tests:

npm run tractor:test # in one tab
npm run test:e2e # in another tab

If you care, maybe check out the design decisions document 😎