Winter Is Coming

Wow, this is just an awesome release full of cool new features and improvements, see the main changes section for more information.

Project Update

$ ember install ember-cli-page-object

$ npm install --save-dev [email protected]

Main changes

New .property property

Query any property of a DOM element

var page = PageObject.create({
  carousel: {
    scope: '.carousel-images',

    left: property('scrollLeft', '.content')
  }
});

assert.equal(page.carousel.left, 200, 'Scrolled by 200px');

New .is property

Test if a DOM element matches a jQuery flavored selector

var page = PageObject.create({
  isChecked: is(':checked', 'input')
});

assert.ok(page.isChecked);

It uses jQuery's .is() function under the hood.

Thanks to @jeradg for implementing this!

New testContainer option

All properties gain a new testContainer option which allows you to specify the context in which elements will be searched.

Let's say you use ember-wormhole to render a component outside the ember application container, now you can use this option to find component's elements in the DOM.

var page = PageObject.create({
  tooltip: {
    title: text('h1', { testContainer: 'body' })
  }
});

assert.equal(page.tooltip.title, 'Hello world!');

In this example the h1 element is searched anywhere inside the body element not only on the application's container.

Improve "Element .foo .bar .baz not found" error message

One of the main features of testing helpers is their ability to help us debug our code fast and easy. In ember-cli-page-object we could (and should) be doing a whole lot better job at reporting errors and this change is a step forward on that direction.

Let's say you have a crazy page object like this one

let page = create({
  foo: {
    bar: {
      baz: {
        qux: text('h1')
      }
    }
  }
});

And you try to access the qux node to retrieve the text of the h1 element, if the element doesn't exist on the DOM, the addon raises an element not found error.

We improved the error message so it's easier to spot where the problem is.

Before

Element h1 not found

<Stacktrace>

Now

Element not found

PageObject: 'page.foo.bar.baz.qux'
  Selector: 'h1'

<Stacktrace>

Community contributions

• #167 Add .property property (@san650)
• #168 Add test container option (@san650)
• #170 Better errors (@san650)
• #169 Add .is property (@jeradg)
• #145 Add blueprint tests (@jeradg)

No huye el que se retira.

This release adds a new way to import from ember-cli-page-object, a new option for the text() property, and a toArray() method on collections, as well as some other small changes.

Import path

The addon structure has changed in order to support its usage in other addons. This resulted in moving the code from test-support to addon.

The PageObject class and other public API exports should now be imported with:

import PageObject from 'ember-cli-page-object'; 

This is now the recommended way to import from ember-cli-page-object.

The previous public API import path (importing from {project-root}/tests/page-object) still works for the time being. However, if you were importing from files other than the public API exposed through tests/page-object, such as tests/page-object/helpers, you will have to change your import path. For example, the following import breaks with this release:

// tests/pages/foo.js
import { findElementWithAssert } from '../page-object/helpers';

That import should be changed, since findElementWithAssert is available via the public API:

// tests/pages/foo.js
import { findElementWithAssert } from 'ember-cli-page-object';

New option for text()

From this release onwards, you can avoid text normalization when using the text property by using the normalize: false option.

toArray() with collections

Collections are now easier to enumerate, you can use the toArray method and use the result as an enumerable.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script, then choose ceibo 1.2.0

$ npm install --save-dev [email protected]

Main changes

• #161 Add option to avoid text normalization (@vvscode)
• #164 Make collections easier to enumerate (@dfreeman)
• #155 Migrating from test-support/ into addon/ (@lolmaus)

Community contributions

• #144 Re-add JSDoc documentation that vanished during merge (@jeradg)
• #146 Add 'selectable' as JSDoc alternate name for 'fillable' (@jeradg)
• #143 Let people know about the slack channel (@san650)
• #148 Migration guide 0.x to 1.x (@jeradg)
• #149 Improve collection example (@san650)
• #150 Update link to selenium page objects information (@samueljseay)
• #151 Update ember-cli to v2.4.2 (@san650)
• #156 Fix broken codacy badge URL (@san650)
• #157 Update installation instructions to mention Ceibo dependency (@san650)
• #160 Use Ember.assign if possible. Otherwise use Ember.merge (@vvscode)
• #161 Add option to avoid text normalization (@vvscode)
• #162 Update slack channel name (@san650)
• #163 Pull Ceibo from npm instead of Bower (@dfreeman)
• #164 Make collections easier to enumerate (@dfreeman)
• #165 Uncomment default properties acceptance test (@juanazam)

Don't forget your potholders

This release adds support for using page objects in component integration tests. This is one of our most requested features. We're very excited to make it public!

Integration test support

tl;dr: You can now use the same page objects in component integration tests and acceptance tests, with a few minor notes.

The API for using page objects in component integration tests is largely the same as in acceptance tests. You can use all of the same actions, queries and predicates, with the exception of visitable(). Pages in component integration tests also have access to a render() action.

The Quickstart page on the docs site now has a section on adding page objects to your integration tests.

Here are the highlights:

Setup and teardown

To use a page object in an integration test, you need to make it aware of the test's this context. This is done by calling page.setContext(this).

After the test, remove the test context from the page using page.removeContext().

For QUnit users, we recommend calling setContext() and removeContext() in the test suite's beforeEach() and afterEach() hooks.

Example

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

import page from 'frontend/tests/pages/my-page';

moduleForComponent('my-component', 'Integration | my component', {
  integration: true,

  beforeEach() {
    page.setContext(this);
  },

  afterEach() {
    page.removeContext();
  }
});

You can also set and remove a test context inside of a test block.

test('something happens', function(assert) {
  page.setContext(this);

  page.render(hbs`{{my-component}}`);

  assert.equal(page.button.text, 'This is a button');

  page.removeContext();
});

page.render()

The render() action is available on a page object after page.setContext(this) has been called.

page.render() delegates to the test's this.render(), but it returns the page object so you can chain other methods onto it.

test('the text is correct after the button is pushed', function(assert) {
  page.render(hbs`{{my-component}}`)
    .click('.some-button');

  assert.equal(page.text, 'The button was pushed!');
});

For more details on the new integration test functionality, check out the docs site.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script, then choose ceibo 1.1.0

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

When you execute the generator it can ask you for a suitable version of ceibo library

$ ember g ember-cli-page-object
version: 2.4.1
installing ember-cli-page-object
  install bower package ceibo
Installing browser packages via Bower...
  cached git://github.com/san650/ceibo.git#1.1.0
  conflict Unable to find suitable version for ceibo
    1) ceibo 1.0.0
    2) ceibo 1.1.0
[?] Answer: 2
Installed browser packages via Bower.

Community contributions

#99 Component integration test support (@jeradg)

Lo que poco cuesta aún se estima menos

This release fixes a couple of regressions, see main changes section below.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

Main changes

• http://localhost:4200/tests works again
• Bring back support for async/await

Community contributions

#130 ceibo should also be imported in development environment (@jelhan)
#138 Page object component acts like a promise (@san650)
#139 Add ember-2.3 scenario to ember-try (@san650)

Al bien hacer jamás le falta premio.

After updating the documentation to v1 and converting it into the jsdoc format, we are finally releasing v1 🎉

Special thanks to @jeradg for making this happen.

EDIT: Check our migration guide

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

Main changes

• Move documentation to the jsdoc format and generating the site based on that content.
• Update site to v1 and support multiple versions documentation.

Community contributions

#125 Generate jsdoc automatically (@juanazam, @jeradg)
#135 Update site to v1 (@jeradg, @juanazam)

No seas, ni siempre riguroso, ni siempre blando

This is the first beta release towards v1.0.0, we'll try hard not to break the API from now on.

Note that the website documentation is still outdated and documentation for 1.0 is being written at this moment.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

Main changes

Change .visitable signature

Instead of receiving two distinct object parameters (dynamic segments and query params) now it receives only one.

The idea is to fill the dynamic segments first, using the values from the param object and then use the rest of the keys and values as query params.

var page = create({
  visit: visitable('/users/:user_id')
});

page.visit({ user_id: 1, expanded: true });

// is equivalent to

visit("/users/1?expanded=true");

Change .clickOnText to match current element

When looking for elements to click (based on text) the property now considers the parent element as a valid element to click. This allows to do things like

<div class="modal">
...
<button>Save</button><button>Cancel</button>

var page = PageObject.create({
  clickButton: clickOnText('button'),
  clickOn: clickOnText('.modal')
});

...

page.clickButton('Save');
page.clickOn('Save');

Before, the first action (clickButton) would not have worked, only the second action would have found the element. Now, both actions work and both actions do click the same button.

Community contributions

#120 Change .visitable signature (@san650)
#121 Change .clickOnText to match current element (@san650)
#123 Test with ember-2.2.0 (@san650)

Make `.contains` attribute accessible

Second bugfix release of the stable 0.11.x branch

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package directly

$ npm install --save-dev [email protected]

Main changes

• Make .contains attribute accessible

Community contributions

#122 add missing contains predicate (@martinciu)

Cada uno es artífice de su propia ventura

This is the first release towards v1.0.0, our first major version 🎉

After working on the project for ~1 year we have settled for a new and more well thought API that includes several breaking changes.

import { create, fillable, visitable } from 'app/tests/page-object';

export default create({
  visit: visitable('/login'),

  userName: fillable('#username'),
  password: fillable('#password'),

  message: { scope: '.msg-box' }
});

import page from 'app/tests/pages/login';

test('fails to log in', function(assert) {
  page
    .visit()
    .userName('Santiago')
    .password('wrong pass')
    .clickOn('Login');

  andThen(function() {
    assert.ok(page.message.isVisible);
    assert.equal(page.message.text, 'Log in is invalid');
  });
});

Note that the website documentation is still outdated and documentation for 1.0 is being written at this moment.

Project Update

$ ember install ember-cli-page-object

Or you can install the npm package and run the installation script

$ npm install --save-dev [email protected]
$ ember generate ember-cli-page-object

Main changes

• Can import properties directly import { create } from 'path/to/page-object';
• Support for custom descriptors and expose findElementWithAssert and findElement helpers
• .text, .attribute and .value return an array of values when { multiple: true } is used
• .contains, .hasClass, .isHidden, .isVisible and .notHasClass return an aggregated result when { multiple: true } is used
• .isVisble does not throw an exception when element doesn't exist in DOM
• Renamed index option to at and it is 0-based index
• Removed customHelper
• Removed component property
• Removed build property
• Removed the need of () (parens) for accessing query attributes, components or predicates.
• Collections are 0-based index now
• Scopes are inherited by default, you can reset the scope using resetScope: true
• Properties that match more than one element throw an exception by default

Community contributions

#92 Migrate to Ceibo (@san650)
#111 Use locally installed ember-cli for Travis CI tests (@jeradg)
#108 .isVisible returns false if element doesn't exist (@san650)
#110 Assert predicates and queries only match one element (@juanazam)
#91 One point zero (@san650 & @juanazam)
#116 Update README.md (@san650)
#117 Fix Ember.A(jqArray) returns jQuery array instead of Ember.Array (@san650)
#119 Remove unused code (@san650)

Nested pages

This release fixes an issue with page object generators. Previous implementations didn't generate proper import statements for nested pages.

Project Update

npm install --save-dev [email protected]

Main changes

• Allow nested pages (thanks to @rtablada)

Community contributions

#94 Add codeclimate configuration files (@san650)
#93 Allow nested pages with full path to "page-object" module (@rtablada)
#101 Bump ember cli to 1.13.15 (@san650)
#102 Add more scenarios to ember-try (@san650)
#103 Fix spelling errors in README.md (@hidnasio)
#104 Missing ember-cli-string-utils dependency (@san650)

"Terminus! What are you doing?" hollered Pirx

This will be the last feature release of the 0.x serie. We're now working on the new 1.0 (#91) release which won't be backward compatible.

Thanks to @Axxiss we have a new site! check it out: http://ember-cli-page-object.js.org/

The new site contains an overview, quick start and API sections. The idea is to improve them over time adding more and more examples of how to use the addon.

Project Update

npm install --save-dev [email protected]

Main changes

This release mostly updates npm package metadata to point to the new site.

Community contributions

#86 Remove unused var (@san650)
#87 Add badge with NPM package version (@san650)
#84 New site (@Axxiss)
#88 Point to the site for documentation (@san650)