astrolabe

Page objects for protractor

Astrolabe

Astrolabe is an extension for protractor that adds page objects to your functional/e2e tests.

via npm (node package manager)

$ npm install astrolabe

Example signInPage.js

var Page = require('astrolabe').Page;
 
module.exports = Page.create({
 
    url: { value: 'http://mysite.com/signin' },
 
    username: { getfunction() { return this.findElement(this.by.input('username')); } }, // finds an input element with the name 'username' 
    submit:   { getfunction() { return this.findElement(this.by.id('submit')); } }       // finds an element with the id 'submit' 
});

adding to tests:

var signInPage = require('./path/to/signInPage');
 
...

navigating:

signInPage.go(); // will send browser to 'http://mysite.com/signin' 
 
signInPage.go('some', 'path'); // will send browser to 'http://mysite.com/signin/some/path' 
signInPage.go('some/path');    // will send browser to 'http://mysite.com/signin/some/path' 
 
signInPage.go({ some: 'query' }); // will send browser to 'http://mysite.com/signin?some=query' 

interacting: (See Protractor API Docs for more info on available api methods)

signInPage.username.sendKeys('a username'); // will fill the username input with the text 'a username' 
 
signInPage.submit.click(); // will click on the submit element 
signInPage.username.getAttribute('value'); // will return a promise that is resolved with the value of the text field, in this case 'a username' 
 
// this can be used within an expectation 
expect(signInPage.username.getAttribute('value')).toBe('a username');

It is possible to create convenience methods to wrap up common logic.

Example signInPage.js

var Page = require('astrolabe').Page;
 
module.exports = Page.create({
 
    url: { value: 'http://mysite.com/signin' },
 
    username: { getfunction() { return this.findElement(this.by.input('username')); } },
    password: { getfunction() { return this.findElement(this.by.input('password')); } },
    submit:   { getfunction() { return this.findElement(this.by.id('submit')); } },
    invalid:  { getfunction() { return this.findElement(this.by.id('incorrectLogin')); } },
 
    InvalidLoginException: { getfunction() { return this.exception('Invalid Login'); } },
 
    // Adds a signIn method to the page object. 
    signIn:   { valuefunction(usernamepassword) {
 
        var page = this;
 
        page.go();
 
        page.username.sendKeys(username);
        page.password.sendKeys(password);
 
        page.submit.click();
 
        return this.invalid.isDisplayed().then(function (wrongLogin) {
            if (wrongLogin) {
                page.InvalidLoginException.thro(username + '' + password + ' is not valid');
            }
        });
    } }
});

can be used in your tests:

var signInPage = require('./path/to/signInPage');
 
...
 
signInPage.signIn('test user', 'testpassword'); // will navigate to sign in page, enter username and password then click submit. 
 
...

Clone the github repository.

git clone https://github.com/stuplum/astrolabe.git
cd astrolabe
npm install

npm test

Install protractor with.

npm install protractor

Start up a selenium server (See the appendix below for help with this). By default, the tests expect the selenium server to be running at http://localhost:4444/wd/hub.

The example folder contains a simple test suite which runs against angularjs.org. It is a port of the simple test suite included with protractor.

Currently only the protractor runner is supported. The runner accepts a configuration file, which runs the tests at example/onProtractorRunner.js.

node_modules/.bin/protractor examples/protractor.conf.js

See Appendix A of protractor's installation instructions