Actions
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');
});