ember-cli-page-object

Ember Page Objects

Represent the screens of your web app as a series of objects. This ember-cli addon eases the construction of these objects on your acceptance tests.

http://ember-cli-page-object.js.org/

What is a Page Object?

An excerpt from the Selenium Wiki

Within your web app's UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place.

The pattern was first introduced by the Selenium

You can find more information about this design pattern here:

• Page Objects - Selenium wiki
• PageObject - Martin Fowler

Documentation

Check the site for full documentation.

Usage

Install the npm package on your ember-cli project

npm install --save-dev ember-cli-page-object

then you can use it from your acceptance tests

import PageObject from '../page-object';

const { fillable, text, visitable } = PageObject;

const login = PageObject.create({
  visit: visitable('/login'),
  userName: fillable('#username'),
  password: fillable('#password'),
  errorMessage: text('.message')
});

test('Invalid log in', function(assert) {
  login
    .visit()
    .userName('[e-mail]')
    .password('secret')
    .clickOn('Log in');

  andThen(function() {
    assert.equal(login.errorMessage(), 'Invalid credentials!');
  });
});

Blueprints

The addon includes the following blueprints

• page-object Creates a new page object
• page-object-component Creates a new component to be used in a page object
• page-object-helper Creates a new helper to be used in a page object

You can create a new page object called users using the generate command

$ ember generate page-object users

installing
  create tests/pages/users.js

import { test } from 'qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';
import page from '../pages/users';

moduleForAcceptance();

test('visiting /users', function(assert) {
  page.visit();

  andThen(function() {
    assert.equal(currentPath(), 'users');
  });
});

Development

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

Project's health

License

ember-cli-page-object is licensed under the MIT license.

See LICENSE for the full license text.