Methods

Table of Contents

isVisible

Validates if an element or set of elements are visible.

Parameters

  • selector string CSS selector of the element to check
  • 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.multiple boolean Check if all elements matched by selector are visible
    • options.testContainer string Context where to search elements in the DOM

Examples

// Lorem <span>ipsum</span>

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

const page = create({
  spanIsVisible: isVisible('span')
});

assert.ok(page.spanIsVisible);

// <span>ipsum</span>
// <span style="display:none">dolor</span>

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

const page = create({
  spansAreVisible: isVisible('span', { multiple: true })
});

// not all spans are visible
assert.notOk(page.spansAreVisible);

// <span>ipsum</span>
// <span>dolor</span>

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

const page = create({
  spansAreVisible: isVisible('span', { multiple: true })
});

// all spans are visible
assert.ok(page.spansAreVisible);

// Lorem <strong>ipsum</strong>

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

const page = create({
  spanIsVisible: isVisible('span')
});

// returns false when element doesn't exist in DOM
assert.notOk(page.spanIsVisible);

// <div>
//   <span style="display:none">lorem</span>
// </div>
// <div class="scope">
//   <span>ipsum</span>
// </div>

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

const page = create({
  spanIsVisible: isVisible('span', { scope: '.scope' })
});

assert.ok(page.spanIsVisible);

// <div>
//   <span style="display:none">lorem</span>
// </div>
// <div class="scope">
//   <span>ipsum</span>
// </div>

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

const page = create({
  scope: '.scope',
  spanIsVisible: isVisible('span')
});

assert.ok(page.spanIsVisible);
  • Throws any Will throw an error if multiple elements are matched by selector and multiple option is not set

Returns Descriptor