Actions
Methods
clickOnText
test-support/page-object/actions/click-on-text.js:105-129
Clicks on an element containing specified text.
The element can either match a specified selector, or be inside an element matching the specified selector.
Parameters
selector
string CSS selector of the element in which to look for textoptions
Object Additional optionsoptions.scope
string Nests provided scope within parent’s scopeoptions.at
number Reduce the set of matched elements to the one at the specified indexoptions.resetScope
boolean Override parent’s scope
Examples
// <fieldset>
// <button>Lorem</button>
// <button>Ipsum</button>
// </fieldset>
const page = PageObject.create({
clickOnFieldset: PageObject.clickOnText('fieldset'),
clickOnButton: PageObject.clickOnText('button')
});
// queries the DOM with selector 'fieldset :contains("Lorem"):last'
page.clickOnFieldset('Lorem');
// queries the DOM with selector 'button:contains("Ipsum")'
page.clickOnButton('Ipsum');
// <div class="scope">
// <fieldset>
// <button>Lorem</button>
// <button>Ipsum</button>
// </fieldset>
// </div>
const page = PageObject.create({
clickOnFieldset: PageObject.clickOnText('fieldset', { scope: '.scope' }),
clickOnButton: PageObject.clickOnText('button', { scope: '.scope' })
});
// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
page.clickOnFieldset('Lorem');
// queries the DOM with selector '.scope button:contains("Ipsum")'
page.clickOnButton('Ipsum');
// <div class="scope">
// <fieldset>
// <button>Lorem</button>
// <button>Ipsum</button>
// </fieldset>
// </div>
const page = PageObject.create({
scope: '.scope',
clickOnFieldset: PageObject.clickOnText('fieldset'),
clickOnButton: PageObject.clickOnText('button')
});
// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
page.clickOnFieldset('Lorem');
// queries the DOM with selector '.scope button:contains("Ipsum")'
page.clickOnButton('Ipsum');
Returns Descriptor
clickable
test-support/page-object/actions/clickable.js:56-76
Clicks elements matched by a selector.
Parameters
selector
string CSS selector of the element to clickoptions
Object Additional optionsoptions.scope
string Nests provided scope within parent’s scopeoptions.at
number Reduce the set of matched elements to the one at the specified indexoptions.resetScope
boolean Ignore parent scope
Examples
// <button class="continue">Continue<button>
// <button>Cancel</button>
const page = PageObject.create({
continue: clickable('button.continue')
});
// clicks on element with selector 'button.continue'
page.continue();
// <div class="scope">
// <button>Continue<button>
// </div>
// <button>Cancel</button>
const page = PageObject.create({
continue: clickable('button.continue', { scope: '.scope' })
});
// clicks on element with selector '.scope button.continue'
page.continue();
// <div class="scope">
// <button>Continue<button>
// </div>
// <button>Cancel</button>
const page = PageObject.create({
scope: '.scope',
continue: clickable('button.continue')
});
// clicks on element with selector '.scope button.continue'
page.continue();
Returns Descriptor
fillable
test-support/page-object/actions/fillable.js:86-110
Fills in an input matched by a selector.
Parameters
selector
string CSS selector of the element to look for textoptions
Object Additional optionsoptions.scope
string Nests provided scope within parent’s scopeoptions.at
number Reduce the set of matched elements to the one at the specified indexoptions.resetScope
boolean Override parent’s scope
Examples
// <input value="">
const page = PageObject.create({
fillIn: PageObject.fillable('input')
});
// result: <input value="John Doe">
page.fillIn('John Doe');
// <div class="name">
// <input value="">
// </div>
// <div class="last-name">
// <input value= "">
// </div>
const page = PageObject.create({
fillInName: PageObject.fillable('input', { scope: '.name' })
});
page.fillInName('John Doe');
// result
// <div class="name">
// <input value="John Doe">
// </div>
// <div class="name">
// <input value="">
// </div>
// <div class="last-name">
// <input value= "">
// </div>
const page = PageObject.create({
scope: 'name',
fillInName: PageObject.fillable('input')
});
page.fillInName('John Doe');
// result
// <div class="name">
// <input value="John Doe">
// </div>
Returns Descriptor
selectable
test-support/page-object/actions/fillable.js:86-110
Alias for fillable
, which works for inputs and HTML select menus.
See fillable
for usage examples.
Parameters
selector
string CSS selector of the element to look for textoptions
Object Additional optionsoptions.scope
string Nests provided scope within parent’s scopeoptions.at
number Reduce the set of matched elements to the one at the specified indexoptions.resetScope
boolean Override parent’s scope
Returns Descriptor
visitable
test-support/page-object/actions/visitable.js:81-97
Loads a given route.
The resulting descriptor can be called with dynamic segments and parameters.
Parameters
path
string Full path of the route to visit
Examples
const page = PageObject.create({
visit: PageObject.visitable('/users')
});
// visits '/users'
page.visit();
const page = PageObject.create({
visit: PageObject.visitable('/users/:user_id')
});
// visits '/users/10'
page.visit({ user_id: 10 });
const page = PageObject.create({
visit: PageObject.visitable('/users')
});
// visits '/users?name=john'
page.visit({ name: 'john' });
const page = PageObject.create({
visit: PageObject.visitable('/users/:user_id')
});
// visits '/users/1?name=john'
page.visit({ user_id: 1, name: 'john' });
Returns Descriptor