Encapsulates and extend ember-testing async helpers, supporting chaining and
other features.

Chaining support

Actions can be chained.

Example

<input id="name">
<button id="submit">Send</button>
const { clickable, fillable, visitable } = PageObject;

var page = PageObject.create({
  visit: visitable('/user/new'),
  submit: clickable('#submit'),
  name: fillable('#name')
});

page
  .visit()
  .name('John Doe')
  .submit();

andThen(function() {
  // form was submitted
});

.clickable

Creates an action to click an element.

Attribute signature

PageObject.clickable(selector [, scope: ''])

Example

<button id="submit">Send</button>
var page = PageObject.create({
  submitForm: PageObject.clickable('#submit')
});

page.submitForm();

andThen(function() {
  // form was submitted
});

.clickOnText

Creates an action to click on an element by text. The text is case sensitive.

Attribute signature

PageObject.clickOnText(selector, [, scope: ''])

Example

<button class="btn">Create</button>
<button class="btn">Cancel</button>
var page = PageObject.create({
  click: clickOnText('.btn')
});

page.click("Create");

andThen(function() {
  // ...
});

page.click("Cancel");

andThen(function() {
  // ...
});

A string of text to look for. It’s case sensitive.
The text must have matching case to be selected.
gwill match elements with the desired text block:

.fillable

Fills an input.

Attribute signature

PageObject.fillable(selector [, scope: ''])

Example

<input id="name">
var page = PageObject.create({
  name: PageObject.fillable('#name')
});

page.name('John Doe');

andThen(function() {
  // the input value is set
});

.selectable

Selects an option.

Attribute signature

PageObject.selectable(selector [, scope: ''])

Example

<select id="gender">
  <option>Male</options>
  <option>Female</options>
</select>
var page = PageObject.create({
  selectGender: PageObject.selectable('#gender')
});

page.selectGender('Female');

andThen(function() {
  // the option is selected
});

.visitable

Visits a page.

Attribute signature

PageObject.visitable(routePath)

Example

var page = PageObject.create({
  visit: PageObject.visitable('/users')
});

page.visit();

andThen(function() {
  // the page is loaded
});

You can define dynamic segments in the path as follows

var page = PageObject.create({
  visit: PageObject.visitable('/users/:user_id/comments/:comment_id')
});

page.visit({ user_id: 5, comment_id: 1 });

andThen(function() {
  assert.equal(currentURL(), '/users/5/comments/1');
});

You can also use query params when invoking the action as follows

var page = PageObject.create({
  visit: PageObject.visitable('/users')
});

page.visit({}, { display: "collapsed" });

andThen(function() {
  assert.equal(currentURL(), '/users?display=collapsed');
});