Ember-page-object
A base Page Object class with helper functions and generators to help implement the Page Object pattern for your tests. Option to run assertions in your Page Objects. For some additional reading on Page Objects and how they can help your tests, see this blog post.
Usage
ember install ember-page-objectember generate page-object signup
Generated Page Object:
// tests/page-objects/signup.js ;
Customizing your Page Object
The base Page Object wraps several of Ember's acceptance test helpers, allowing for function chaining. It also provides some of it's own helper functions which are documented here. To flesh out your page object, extend the base Page Object and use the built in helpers.
// tests/page-objects/signup.js ; { return this; } { return this; } { return this; }
// tests/acceptance/signup-test.js; // other test code ;
Data Attributes
If you want to use data attributes to decouple your tests from your
application's presentation as described in this blog post,
you can overwrite the toSelector
function in your page object. The
toSelector
function is a hook that allows you to modify the selector
that is passed in to the various helper functions.
By default, toSelector
does not modify the selector at all. Below is a simple
example of modifying toSelector
so helper functions target the
data-auto-id
data attribute during tests.
{{! signup template}} {{input value=email data-auto-id="signup-email"}} {{input value=password data-auto-id="signup-password"}} <button data-auto-id="signup-button">Submit</button> {{! other code}}
// tests/page-objects/base.js ; { return `[data-auto-id=""]`; }
// tests/page-objects/signup.js ; { return this; } { return this; } { return this; }
// tests/acceptance/signup-test.js; // other test code ;
For this example to work, you'll also have to extend the TextField
component, which drives the {{input}}
helper, and add an attribute binding for the data-auto-id attribute.
You many also want to do this for other components (eg. Ember.LinkComponent
and Ember.TextArea
).
// app/initializers/data-attribute.js ; name: 'data-attribute' { const attributeName = 'data-auto-id'; EmberTextField; EmberLinkComponent; EmberTextArea; };
Helpers
Page Objects extending from the base PageObject have access to a number of helper functions. All functions return the page object instance to allow function chaining.
- assertURL()
- assertHasClass()
- assertNotHasClass()
- assertHasText()
- assertNotHasText()
- assertPresent()
- assertNotPresent()
Wrapped Test Helpers
andThen()
andThen(callback)
Wraps Ember's andThen() test helper.
{ return this; }
click()
click(selector = '')
Wraps Ember's click() test helper.
{ return this; }
fillIn()
fillIn(selector = '', text = '')
Wraps Ember's fillIn() test helper.
{ return this; }
Assertions
assertURL()
assertURL(url = '', message = '')
Asserts that the passed in url is the current url. Accepts an optional assertion message.
;
assertHasClass()
assertHasClass(selector = '', class = '', message = '')
Asserts the element matching the selector has the passed in class. Accepts an optional assertion message.
{ return this; }
assertNotHasClass()
assertNotHasClass(selector = '', class = '', message = '')
Asserts the element matching the selector does not have the passed in class. Accepts an optional assertion message.
{ return this; }
assertHasText()
assertHasText(selector = '', text = '', message = '')
Asserts the element matching the selector contains the passed in text. Accepts an optional assertion message.
{ return this; }
assertNotHasText()
assertNotHasText(selector = '', text = '', message = '')
Asserts the element matching the selector does not contain the passed in text. Accepts an optional assertion message.
{ return this; }
assertPresent()
assertPresent(selector = '', message = '')
Asserts an element matching the selector can be found. Accepts an optional assertion message.
{ return this; }
assertNotPresent()
assertNotPresent(selector = '', message = '')
Asserts an element matching the selector is not found. Accepts an optional assertion message.
{ return this; }
Debugging
embiggen()
embiggen()
Embiggens the testing container for easier inspection.
;
debugger()
debugger()
Throws a breakpoint via debugger within a PageObject chain.
;
pause()
pause()
Pauses a test so you can look around within a PageObject chain.
;
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.