Registry / testing / ember-cli-page-object

ember-cli-page-object

library2.3.2jsnpmunverified

Ember CLI Page Object is an Ember CLI addon that streamlines the creation and maintenance of page objects for acceptance and integration tests within Ember applications. Following the Page Object design pattern, it abstracts UI interactions and assertions into reusable objects, significantly reducing code duplication and making tests more resilient to UI changes. The current stable version is 2.3.2, released as part of a continuous development cycle with frequent bug fixes and enhancements. Recent efforts have focused on progressively removing jQuery dependencies to modernize the codebase while maintaining backward compatibility. It differentiates itself by providing a dedicated, mature testing pattern specifically tailored for the Ember ecosystem, offering a structured approach to testing complex UIs compared to raw `@ember/test-helpers` usage.

testing web-framework

npm install ember-cli-page-object

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · EMBER-CLI-PAGE-OBJ

ember-cli-page-object

testingjavascriptv2.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

create

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

✗ const { create } = require('ember-cli-page-object');

Used to define the structure of a page object. CommonJS `require` is generally not supported in modern Ember addons.

visitable

✓ import { visitable } from 'ember-cli-page-object';

✗ import visitable from 'ember-cli-page-object/macros/visitable';

A macro used within a page object to define navigation actions. Always imported from the main package, not directly from `/macros`.

text

✓ import { text } from 'ember-cli-page-object/macros';

✗ import { text } from 'ember-cli-page-object';

Example of a common page object macro. Many behavioral macros are imported from the `/macros` path.

PageObject

✓ import type { PageObject } from 'ember-cli-page-object';

✗ import { PageObject } from 'ember-cli-page-object';

TypeScript type for a generated page object instance. Use `import type` for type-only imports.

Demonstrates defining a page object for a user listing page and using it in an acceptance test.

import { module, test } from 'qunit'; import { visit, currentURL } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import { create, visitable, text, collection } from 'ember-cli-page-object'; const UsersPage = create({ visit: visitable('/users'), title: text('h1'), users: collection({ itemScope: '.user-item', item: { name: text('.user-name'), email: text('.user-email'), }, }), }); module('Acceptance | users', function(hooks) { setupApplicationTest(hooks); test('visiting /users', async function(assert) { // Simulate some data or ensure it's available for the route // In a real app, this might involve mocking services or Mirage JS await visit('/users'); assert.equal(currentURL(), '/users'); assert.equal(UsersPage.title, 'Users List'); assert.equal(UsersPage.users.length, 0, 'No users initially'); // Assuming data needs to be loaded // Example of interacting with a populated list // (requires data to be present in the tested application) // await UsersPage.users[0].name.click(); }); });

Debug

Known issues

gotchaThe library is actively refactoring to remove jQuery usages (e.g., `:visible`, `:hidden`, `$.attr`). While v2.x aims for backward compatibility, custom page object extensions or selectors that rely heavily on jQuery-specific behaviors might encounter subtle changes or breakage in future major versions. Developers are encouraged to migrate away from direct jQuery interactions.

fix

Review page object definitions and remove direct jQuery dependencies. Utilize native DOM selectors and Ember's test helpers where possible.

affects: >=2.2.0

breakingEmber CLI Page Object has strict compatibility requirements. It requires Ember.js v3.16 or above, Ember CLI v2.13 or above, and Node.js v12, v14, or >= v16. Using older versions of Ember.js, Ember CLI, or Node.js will result in installation failures or runtime errors due to incompatible APIs and module resolution strategies.

fix

Upgrade your Ember.js, Ember CLI, and Node.js environments to meet the minimum specified versions.

affects: <2.0.0

gotchaAs of v2.3.2, a fix was implemented for `package.json` exports for index modules. Developers on older versions (<2.3.2) might experience module not found errors, particularly for subpath imports like `/macros`, in environments that strictly adhere to `exports` map resolution or non-standard build setups.

fix

Upgrade to `ember-cli-page-object` v2.3.2 or newer to ensure correct module resolution behavior. Verify your `tsconfig.json` or bundler configuration for module resolution if issues persist.

affects: <2.3.2

Errors

Common errors & fixes

Error: Assertion Failed: You must provide a selector to `click` or `contains`.

Attempting to use an action (like `click`, `contains`) on a page object property without an explicitly defined selector or scope.

fix

Ensure that the page object property has a `scope` or `selector` defined, or that the action is called on a specific element within the page object hierarchy. E.g., `button: clickable('.my-button')` then `page.button.click()`.

Module not found: Error: Can't resolve 'ember-cli-page-object/macros'

Incorrect import path for page object macros, possibly a typo, or an environment not correctly resolving subpath exports, potentially related to older versions (<2.3.2) or specific bundler configurations.

fix

Verify the import path for macros (e.g., `import { text } from 'ember-cli-page-object/macros';`). Ensure `ember-cli-page-object` is at least v2.3.2 to benefit from `package.json` exports fixes.

TypeError: Cannot read properties of undefined (reading 'click') / Element not found for selector '...' in tests.

The element targeted by a page object selector does not exist in the DOM when the action is attempted, or an asynchronous action (like `visit()`) hasn't completed before the next action.

fix

Ensure that `await` is used before any page object action that triggers async behavior (e.g., `await UsersPage.visit();`). Double-check selectors and the rendered HTML for accuracy. Use `await settled()` or `debug()` from `@ember/test-helpers` to inspect the DOM state during tests.

Upgrade

Version history

2.3.2latest on npm

Audit

Dependencies

@ember/jqueryoptionalLegacy dependency, being actively phased out but may still be required by some features.

@ember/test-helpersrequiredProvides core testing utilities for Ember applications.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/san650/ember-cli-page-object ↗

packagehttps://www.npmjs.com/package/ember-cli-page-object ↗

homepagehttps://ember-cli-page-object.js.org ↗