Methods

Table of Contents

collection

Creates a enumerable that represents a collection of items. The collection is zero-indexed and has the following public methods and properties:

  • length - The number of items in the collection.
  • objectAt() - Returns the page for the item at the specified index.
  • filter() - Filters the items in the array and returns the ones which match the predicate function.
  • filterBy() - Filters the items of the array by the specified property, returning all that are truthy or that match an optional value.
  • forEach() - Runs a function for each item in the collection
  • map() - maps over the elements of the collection
  • mapBy() - maps over the elements of the collecton by the specified property
  • toArray() - returns an array containing all the items in the collection
  • [Symbol.iterator]() - if supported by the environment, this allows the collection to be iterated with for/of and spread with ... like a normal array

Parameters

  • scopeOrDefinition String Selector to define the items of the collection
  • definitionOrNothing Object? Object with the definition of item properties

Examples

// <table>
//   <tbody>
//     <tr>
//       <td>Mary<td>
//       <td>Watson</td>
//     </tr>
//     <tr>
//       <td>John<td>
//       <td>Doe</td>
//     </tr>
//   </tbody>
// </table>

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

const page = create({
  users: collection('table tr', {
    firstName: text('td', { at: 0 }),
    lastName: text('td', { at: 1 })
  })
});

assert.equal(page.users.length, 2);
assert.equal(page.users.objectAt(1).firstName, 'John');
assert.equal(page.users.objectAt(1).lastName, 'Doe');

// <div class="admins">
//   <table>
//     <tbody>
//       <tr>
//         <td>Mary<td>
//         <td>Watson</td>
//       </tr>
//       <tr>
//         <td>John<td>
//         <td>Doe</td>
//       </tr>
//     </tbody>
//   </table>
// </div>

// <div class="normal">
//   <table>
//   </table>
// </div>

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

const page = create({
  scope: '.admins',

  users: collection('table tr', {
    firstName: text('td', { at: 0 }),
    lastName: text('td', { at: 1 })
  })
});

assert.equal(page.users.length, 2);

User Index

//   <tbody>
//     <tr>
//         <td>Mary<td>
//         <td>Watson</td>
//       </tr>
//       <tr>
//         <td>John<td>
//         <td>Doe</td>
//       </tr>
//   </tbody>
// </table>

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

const page = create({
  scope: 'table',

  users: collection('tr', {
    firstName: text('td', { at: 0 }),
    lastName: text('td', { at: 1 }),
  })
});

let john = page.users.filter((item) => item.firstName === 'John' )[0];
assert.equal(john.lastName, 'Doe');

If the browser you run tests supports Proxy, you can use array accessors to access elements by index

// <table>
//   <tr>
//       <td>Mary<td>
//   </tr>
//   <tr>
//     <td>John<td>
//   </tr>
// </table>

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

const page = create({
  users: collection('tr')
});

// This only works on browsers that support `Proxy`
assert.equal(page.users[0].text, 'Mary');
assert.equal(page.users[1].text, 'John');

Returns Descriptor