Javascript page object pattern based functional tests via the browser with Protractor and Astrolabe

Update: 26/04/14 – added example github project showing an example project with config setup and simple test.

Example project on github: https://github.com/onekilo79/protractor-astrolabe-example

Purpose

Page Object Pattern

When writing browser based tests with selenium the test can become brittle if they are too attached to the xpath of the css selector when the page look and feel changes.  To limit your exposure to changes in the styling of the page you can use the Page Object Pattern.

Library that does Page Object Pattern in Groovy

In Groovy we have the excellent Geb by Luke Daily.

Browser based testing in Angularjs

When researching writing end to end tests for js based testing I came upon protractor which fits in nicely with jasmine testing but spawning a real browser to run the functional tests.

Problem

The problem you encounter is you have to select things and it can become very brittle very quickly.  Jump to google and ask about protractor and page object pattern and you find someone has logged an issue.

Page object pattern in node

This leads us to the astrolabe project.  So you can dissect your pages into manageable chunks and reuse modules like you would in geb.

Install libraries

Prerequisites

I showed the setup for grunt, the config for protractor, and how to run protractor globally to save time here: See how to install protractor globally to tie into it when running your local tests.

Install Astrolabe into your project

npm install astrolabe --save-dev

 

Example Test

Html fragment

Html that is under test.  This will be rendered when we go to the uri /search on our application.

<input name="searchBox" class="searchBox" type="text"></input><br>

 

Page

test/e2e/protractor/pages/search-page.js

var Page = require('astrolabe').Page;

module.exports = Page.create({
// Can use just 'search' for your url if you have set your baseUrl in your protractor configuration to be 'localhost:9000/#/'
    url: { value: 'http://localhost:9000/#/search' },  

// finds an element with the class 'searchBox' attached to it.
    searchBox: { get: function() { return this.findElement(this.by.css('searchBox')); } },
});

 

Test specification

Jasmine test that will hit the page and expect some values to be correct.

test/e2e/protractor/specs/search-spec.js

'use strict';
var searchPage = require('../pages/search-page');

describe('Search Page | When we go to the search page', function() {

  beforeEach(function () {
    searchPage.go();
  });

  it('it should start with empty search box', function(){
    expect(searchPage.searchBox.getAttribute('value')).toEqual('');
  }

  it('when we change the text to be "blue" then the box should have "blue" in it ', function() {
    searchPage.searchBox.sendKeys('blue');
    expect(searchPage.searchBox.getAttribute('value')).toEqual('blue');
  });
});

Example project on github: https://github.com/onekilo79/protractor-astrolabe-example

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s