Methods

Table of Contents

selectable

Alias for fillable, which works for inputs, HTML select menus, and contenteditable elements.

See fillable for usage examples.

Parameters

  • selector string CSS selector of the element to look for text
  • options Object Additional options
    • options.scope string Nests provided scope within parent’s scope
    • options.at number Reduce the set of matched elements to the one at the specified index
    • options.resetScope boolean Override parent’s scope
    • options.testContainer string Context where to search elements in the DOM

Returns Descriptor

fillable

Fills in an input matched by a selector.

Parameters

  • selector string CSS selector of the element to look for text
  • userOptions (optional, default {})
  • options Object Additional options
    • options.scope string Nests provided scope within parent’s scope
    • options.at number Reduce the set of matched elements to the one at the specified index
    • options.resetScope boolean Override parent’s scope
    • options.testContainer string Context where to search elements in the DOM

Examples

// <input value="">

import { create, fillable } from 'ember-cli-page-object';

const page = create({
  fillIn: fillable('input')
});

// result: <input value="John Doe">
await page.fillIn('John Doe');

// <div class="name">
//   <input value="">
// </div>
// <div class="last-name">
//   <input value= "">
// </div>

import { create, fillable } from 'ember-cli-page-object';

const page = create({
  fillInName: fillable('input', { scope: '.name' })
});

await 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>

import { create, fillable } from 'ember-cli-page-object';

const page = create({
  scope: 'name',
  fillInName: fillable('input')
});

await page.fillInName('John Doe');

// result
// <div class="name">
//   <input value="John Doe">
// </div>

Filling different inputs with the same property

// <input id="name">
// <input name="lastname">
// <input data-test="email">
// <textarea aria-label="address"></textarea>
// <input placeholder="phone">
// <div contenteditable="true" id="bio"></div>

const page = create({
  fillIn: fillable('input, textarea, [contenteditable]')
});

await page
  .fillIn('name', 'Doe')
  .fillIn('lastname', 'Doe')
  .fillIn('email', 'john@doe')
  .fillIn('address', 'A street')
  .fillIn('phone', '555-000')
  .fillIn('bio', 'The story of <b>John Doe</b>');

Returns Descriptor