Skip to content

Releases: san650/ember-cli-page-object

v1.10.0

01 May 00:27
@san650 san650
v1.10.0
eeba8e2
Compare
Choose a tag to compare
v1.10.0

This release adds a couple of new features and also fixes an issue with collections' scope.

Project Update

$ ember install ember-cli-page-object

Main changes

Add alias macro

Now you can use alias macro in your page objects to reference to other properties.

import { create } from 'ember-cli-page-object';
import { alias } from 'ember-cli-page-object/macros';

const page = create({
  submitButton: {
    scope: '.submit-button'
  }
  submit: alias('submitButton.click')
});

page.submit(); // calls `page.submitButton.click`

Thanks goes to @magistrula for implementing the feature

fillable gains support for content editable elements

Now you can fill content editable elements using the fillable property out of the box.

<div contenteditable="true" id="bio"></div>
import { create, fillable } from 'ember-cli-page-object';


const page = create({
  fillBio: fillable('#bio')
});

page.fillBio('Lorem ipsum dolor');

Thanks goes to @magistrula for implementing the feature

Community contributions

Happy testing!

Assets 2
Loading

v1.9.0

31 Mar 03:35
@san650 san650
v1.9.0
217d647
Compare
Choose a tag to compare
v1.9.0

This release adds a new method to the DSL.

Project Update

$ ember install ember-cli-page-object

Main changes

Add as property to DSL

This new method allows to perform operations on intermediate results within the chain.

It's useful for grouping assertions together.

andThen(() => {
  page.users(0).as(user => {
    assert.equal(user.name, 'John');
    assert.equal(user.lastName, 'Doe');
    assert.equal(user.email, 'john@doe');
  });

  page.users(1).as(user => {
    assert.equal(user.name, 'John');
    assert.equal(user.lastName, 'Doe');
    assert.equal(user.email, 'john@doe');
  });

  page.users(2).as(user => {
    assert.equal(user.name, 'John');
    assert.equal(user.lastName, 'Doe');
    assert.equal(user.email, 'john@doe');
  });
});

Thanks goes to @hidnasio for working on this!

Community contributions

Happy testing!

Assets 2
Loading

v1.8.0

20 Jan 14:42
@san650 san650
v1.8.0
c73e2f9
Compare
Choose a tag to compare
v1.8.0

This release brings a new blueprint override to generate component tests with its corresponding page object component.

Project Update

$ ember install ember-cli-page-object

Or...

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

Main changes

Blueprint override

component-test Creates a new optimized component test with a matching page object component when used with the --page-object flag.

$ ember g component my-component --page-object

installing component
  create app/components/my-component.js
  create app/templates/components/my-component.hbs
installing component-test
  create tests/integration/components/my-component-test.js
installing page-object-component
  create tests/pages/components/my-component.js

It creates the component itself, a page object component with the same name to run your assertions against, and a special component integration test that contains all the necessary setup code to run your tests.

Thanks goes to @simonihmig for working on this!

Community contributions

Happy testing!

Assets 2
Loading

keep on rolling

24 Nov 01:22
@san650 san650
v1.7.0
1651878
Compare
Choose a tag to compare
keep on rolling

This release brings some nice features and bug fixes, you should update.

Project Update

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

Main changes

Add forEach support to collection properties

This version adds a new forEach iterator function to collection properties

let page = create({
  items: collection({
    itemScope: 'li',
    item: {
      text: text()
    }
  })
});

page.items().forEach((item) => {
  console.log(item.text);
});

Thanks to @renpinto

Configure testContainer at component level

Now it's easier to configure several properties to look values in a different test container.

let page = create({
  modal: {
    testContainer: '#modal',

    title: text('h1'),
    body: text('p')
  }
});

assert.equal(page.modal.title, 'Success');
assert.equal(page.modal.text, 'Lorem ipsum dolor...');

Thanks to @juanazam

Community contributions

Happy testing!

Assets 2
Loading

v1.6.0

26 Aug 01:55
@san650 san650
v1.6.0
c521335
Compare
Choose a tag to compare
v1.6.0

This release brings some nice features which help to slim down your page object definitions even more.

Project Update

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

Main changes

New mode for .fillable and .selectable

.fillable and .selectable gained a new first optional argument to help you filter the target element.

<form submit={{action "submit"}}>
  Username: <input name="username">
  Password: <input type="password" name="secret">
  <button>Submit</button>
</form>
var loginPage = create({
  visit: visitable('/login');
  fill: fillable('input')
});

test('a test', function(assert) {
  loginPage
    .visit()
    .fill('username', 'John Doe')
    .fill('secret', 'pa$$word')
    .clickOn('Submit');

  andThen(function() {
    assert.ok(...);
  });
});

As you can see the right input is found by using the first (optional) parameter. This parameter is used as a clue to find the right input, select or textarea element. The criteria is as follows:

  • selector input[data-test="clue"]
  • selector input[aria-label="clue"]
  • selector input[placeholder="clue"]
  • selector input[name="clue"]
  • selector input#clue
  • selector textarea[data-test="clue"]
  • selector textarea[aria-label="clue"]
  • selector textarea[placeholder="clue"]
  • selector textarea[name="clue"]
  • selector textarea#clue
  • selector select[data-test="clue"]
  • selector select[aria-label="clue"]
  • selector select[placeholder="clue"]
  • selector select[name="clue"]
  • selector select#clue

Do you think we should add more conditions to this list? Open an issue or talk to us on slack on #ec-page-object channel.

.fillIn added to the DSL

One of the benefits of making .fillable more flexible as you can see above, allowed us to add it to page object DSL as the .fillIn property. Now every page object component will have this property by default.

var page = create({
  foo: {
    scope: '.a-foo'
  }
});

page.fillIn('username', 'John doe');
page.foo.fillIn('password', 'secret');

In this case page.fillIn and page.foo.fillIn are auto generated and ready to use.

.value added to the DSL

Another incorporation to the DSL is the property .value.

var page = create({
  input: {
    scope: 'form input'
  }
});

page.input.value // value of the input

In this example page.value and page.input.value are auto generated.

path argument added to .create

In this release .create function gained an optional first parameter to set the path for the page object. If this parameter is given, the page object will auto generate a visit property.

var page = create('/users');

page.visit(); // will be auto generated and it navigates to /users
var page = create('/users', {
  title: text('h1')
});

page.visit(); // will be auto generated and it navigates to /users

Note that previous behavior is still supported

var page = create({
  visitUsers: visitable('/users');
  title: text('h1')
});

page.visitUsers(); // navigates to /users

Page Object Helper blueprint

On 1.0.0 release we removed the blueprint for page object helpers. This release includes a new blueprint for helpers which uses the advanced implementation for helpers.

import { findElement } from 'ember-cli-page-object/extend';

export default function customIs(selector, options = {}) {
  return {
    isDescriptor: true,

    get() {
      return findElement(this, selector, options).is(':disabled');
    }
  };
}

Formalizing the page object helpers

ember-cli-page-object expose some helper functions that are useful when creating custom descriptors or helpers. We decided to put these helpers in a different namespace to make them more prominent.

You can import these helpers using import { ... } from 'ember-cli-page-object/extend.

This is the list of helpers

  • findElement
  • findElementWithAssert
  • buildSelector
  • getContext

In the next days we're going to improve the documentation of these helpers.

Community contributions

Happy testing!

Assets 2
Loading

Gaucho Style

31 Jul 21:39
@san650 san650
v1.5.0
5e5b2c2
Compare
Choose a tag to compare
Gaucho Style

This is mainly a maintenance release. This release fixes a bug where we were including A LOT of files into the NPM package that weren't needed so it should install (download) a lot faster now.

Project Update

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

Main changes

Allow empty selector

Now it's possible to use the auto generated properties at the root level without the need to add a scope.

var page = create({});

assert.ok(page.contains('foo bar'));

In this case the text "foo bar" will be searched in the entire application.

Community contributions

Happy testing!

Assets 2
Loading

v0.11.3

20 Jul 22:19
@san650 san650
v0.11.3
63490eb
Compare
Choose a tag to compare
v0.11.3

Third maintenance release of v0.11.x branch

Project Update

$ ember install [email protected]

Or

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

Community contributions

  • #215 Adds $ declaration to all files where $ is used without Ember. prefix (@mkeemon)
Assets 2
Loading

Don't mutate definition objects

01 Jul 19:56
@san650 san650
v1.4.2
c5d51cb
Compare
Choose a tag to compare
Don't mutate definition objects

This release fixes a bug introduced in v1.4.1.

Project Update

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

Community contributions

Assets 2
Loading

City of glass

18 Jun 22:36
@san650 san650
v1.4.1
dbf823c
Compare
Choose a tag to compare
City of glass

This release includes a handful of small fixes and updates for ember-cli.

Project Update

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

Main changes

  • ember-template-compiler is always included in dummy app from now on.
  • Fixed collection iteration using the for x of page.collection() way of iterating.
  • The project is now updated to v2.6.1 of ember-cli.

Community contributions

  • #194 Always import ember-template-compiler in dummy app (@migbar)
  • #199 Added tests for broken collection iteration (@simonihmig)
  • #197 Don't include item and itemScope in collection component (@san650)
  • #200 Update ember-cli to 2.6.1(@san650)

Happy coding!

Assets 2
Loading

Please insert a release title here.

26 May 23:49
@san650 san650
v1.4.0
f6764e1
Compare
Choose a tag to compare
Please insert a release title here.

This new version brings new features, new options and several bug fixes.

Project Update

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

Main changes

New .triggerable property

Trigger custom events

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

const page = PageObject.create({
  scope: '#page',

  focusOnName: triggerable('focus', 'input')
};

page.focusOnName(); // focuses on "#page input"

Check the website for more advanced uses of triggerable.

Thanks @juanazam for the feature!

Validate element visibility on actions

clickable and clickOnText gain a new option which makes the actions throw an error (make the test fail) if the element you're clicking is not visible at the time of the click.

This makes you're tests more trustworthy by ensuring that you don't interact with elements that exist on the DOM but are not accessible to users by being hidden.

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

var page = create({
  submit: clickable('.btn', { visible: true })
});

page.submit(); // throws an exception if `.btn` element is not visible

We're thinking on making this the default behavior for all actions that interact with elements on the page on the next major version. Feedback welcome!

Thanks @jmbejar for the feature!

Community contributions

Happy coding!

Assets 2
Loading