From e6177174c42636f9c2452016dbd98a54f81c18b6 Mon Sep 17 00:00:00 2001
From: Ruslan Grabovoy <kudgo.test@gmail.com>
Date: Wed, 18 Oct 2017 22:51:29 +0300
Subject: [PATCH 1/5] create v1.13.x

---
 docs/v1.13.x/api/alias.md         |  84 ++++++
 docs/v1.13.x/api/as.md            |  61 +++++
 docs/v1.13.x/api/attribute.md     |  76 ++++++
 docs/v1.13.x/api/click-on-text.md |  93 +++++++
 docs/v1.13.x/api/clickable.md     |  72 +++++
 docs/v1.13.x/api/collection.md    | 123 +++++++++
 docs/v1.13.x/api/contains.md      |  94 +++++++
 docs/v1.13.x/api/count.md         |  83 ++++++
 docs/v1.13.x/api/create.md        | 112 ++++++++
 docs/v1.13.x/api/fillable.md      | 127 +++++++++
 docs/v1.13.x/api/getter.md        |  55 ++++
 docs/v1.13.x/api/has-class.md     |  95 +++++++
 docs/v1.13.x/api/is-hidden.md     | 101 +++++++
 docs/v1.13.x/api/is-present.md    |  87 ++++++
 docs/v1.13.x/api/is-visible.md    | 107 ++++++++
 docs/v1.13.x/api/is.md            |  51 ++++
 docs/v1.13.x/api/not-has-class.md |  95 +++++++
 docs/v1.13.x/api/property.md      |  62 +++++
 docs/v1.13.x/api/text.md          |  94 +++++++
 docs/v1.13.x/api/triggerable.md   |  97 +++++++
 docs/v1.13.x/api/value.md         |  83 ++++++
 docs/v1.13.x/api/visitable.md     |  58 ++++
 docs/v1.13.x/components.md        | 250 ++++++++++++++++++
 docs/v1.13.x/extend.md            |  82 ++++++
 docs/v1.13.x/index.md             |  55 ++++
 docs/v1.13.x/installation.md      |  10 +
 docs/v1.13.x/migrating.md         | 340 ++++++++++++++++++++++++
 docs/v1.13.x/options.md           | 123 +++++++++
 docs/v1.13.x/quickstart.md        | 424 ++++++++++++++++++++++++++++++
 29 files changed, 3194 insertions(+)
 create mode 100644 docs/v1.13.x/api/alias.md
 create mode 100644 docs/v1.13.x/api/as.md
 create mode 100644 docs/v1.13.x/api/attribute.md
 create mode 100644 docs/v1.13.x/api/click-on-text.md
 create mode 100644 docs/v1.13.x/api/clickable.md
 create mode 100644 docs/v1.13.x/api/collection.md
 create mode 100644 docs/v1.13.x/api/contains.md
 create mode 100644 docs/v1.13.x/api/count.md
 create mode 100644 docs/v1.13.x/api/create.md
 create mode 100644 docs/v1.13.x/api/fillable.md
 create mode 100644 docs/v1.13.x/api/getter.md
 create mode 100644 docs/v1.13.x/api/has-class.md
 create mode 100644 docs/v1.13.x/api/is-hidden.md
 create mode 100644 docs/v1.13.x/api/is-present.md
 create mode 100644 docs/v1.13.x/api/is-visible.md
 create mode 100644 docs/v1.13.x/api/is.md
 create mode 100644 docs/v1.13.x/api/not-has-class.md
 create mode 100644 docs/v1.13.x/api/property.md
 create mode 100644 docs/v1.13.x/api/text.md
 create mode 100644 docs/v1.13.x/api/triggerable.md
 create mode 100644 docs/v1.13.x/api/value.md
 create mode 100644 docs/v1.13.x/api/visitable.md
 create mode 100644 docs/v1.13.x/components.md
 create mode 100644 docs/v1.13.x/extend.md
 create mode 100644 docs/v1.13.x/index.md
 create mode 100644 docs/v1.13.x/installation.md
 create mode 100644 docs/v1.13.x/migrating.md
 create mode 100644 docs/v1.13.x/options.md
 create mode 100644 docs/v1.13.x/quickstart.md

diff --git a/docs/v1.13.x/api/alias.md b/docs/v1.13.x/api/alias.md
new file mode 100644
index 00000000..1b4dfcc0
--- /dev/null
+++ b/docs/v1.13.x/api/alias.md
@@ -0,0 +1,84 @@
+---
+layout: page
+title: Alias
+---
+
+{% raw %}
+### Methods
+
+- [alias](#alias)
+
+## alias
+
+[addon/-private/properties/alias.js:80-102](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/alias.js#L80-L102 "Source code on GitHub")
+
+Returns the value of some other property on the PageObject.
+
+**Parameters**
+
+-   `pathToProp` **string** dot-separated path to a property specified on the PageObject
+-   `options` **Object** 
+    -   `options.chainable` **Boolean** when this is true, an aliased
+        method returns the PageObject node on which the alias is defined, rather
+        than the PageObject node on which the aliased property is defined.
+
+**Examples**
+
+```javascript
+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')
+});
+
+// calls `page.submitButton.click`
+page.submit();
+```
+
+```javascript
+import { create } from 'ember-cli-page-object';
+import { alias } from 'ember-cli-page-object/macros';
+
+const page = create({
+  submitButton: {
+    scope: '.submit-button'
+  },
+  isSubmitButtonVisible: alias('submitButton.isVisible')
+});
+
+// checks value of `page.submitButton.isVisible`
+assert.ok(page.isSubmitButtonVisible);
+```
+
+```javascript
+import { create } from 'ember-cli-page-object';
+import { alias } from 'ember-cli-page-object/macros';
+
+const page = create({
+  form: {
+    input: {
+      scope: 'input'
+    },
+    submitButton: {
+      scope: '.submit-button'
+    }
+  },
+  fillFormInput: alias('form.input.fillIn', { chainable: true }),
+  submitForm: alias('form.submitButton.click', { chainable: true })
+});
+
+// executes `page.form.input.fillIn` then `page.form.submitButton.click`
+// and causes both methods to return `page` (instead of `page.form.input`
+// and `page.form.submitButton` respectively) so that the aliased methods
+// can be chained off `page`.
+page
+  .fillFormInput('foo')
+  .submitForm();
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/as.md b/docs/v1.13.x/api/as.md
new file mode 100644
index 00000000..31c92e1e
--- /dev/null
+++ b/docs/v1.13.x/api/as.md
@@ -0,0 +1,61 @@
+---
+layout: page
+title: As
+---
+
+{% raw %}
+### Methods
+
+- [as](#as)
+
+## as
+
+[addon/-private/properties/as.js:49-52](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/as.js#L49-L52 "Source code on GitHub")
+
+**Parameters**
+
+-   `callback` **function** Function to be called with the current object as the parameter
+
+**Examples**
+
+```javascript
+andThen(() => {
+  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');
+  });
+
+  page.users(3).as(user => {
+    assert.equal(user.name, 'John');
+    assert.equal(user.lastName, 'Doe');
+    assert.equal(user.email, 'john@doe');
+  });
+});
+```
+
+```javascript
+// Lorem <span>ipsum <strong>dolor</strong></span>
+
+let page = create({
+  scope: 'span',
+  foo: {
+    bar: {
+      scope: 'strong'
+    }
+  }
+});
+
+page.foo.bar.as(element => {
+  assert.equal(element.text, 'dolor');
+});
+```
+
+Returns **object** this
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/attribute.md b/docs/v1.13.x/api/attribute.md
new file mode 100644
index 00000000..103205e8
--- /dev/null
+++ b/docs/v1.13.x/api/attribute.md
@@ -0,0 +1,76 @@
+---
+layout: page
+title: Attribute
+---
+
+{% raw %}
+### Methods
+
+- [attribute](#attribute)
+
+## attribute
+
+[addon/-private/properties/attribute.js:70-90](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/attribute.js#L70-L90 "Source code on GitHub")
+
+**Parameters**
+
+-   `attributeName` **string** Name of the attribute to get
+-   `selector` **string** CSS selector of the element to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.multiple` **boolean** If set, the function will return an array of values
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input placeholder="a value">
+
+const page = PageObject.create({
+  inputPlaceholder: PageObject.attribute('placeholder', 'input')
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+```javascript
+// <input placeholder="a value">
+// <input placeholder="other value">
+
+const page = PageObject.create({
+  inputPlaceholders: PageObject.attribute('placeholder', ':input', { multiple: true })
+});
+
+assert.deepEqual(page.inputPlaceholders, ['a value', 'other value']);
+```
+
+```javascript
+// <div><input></div>
+// <div class="scope"><input placeholder="a value"></div>
+// <div><input></div>
+
+const page = PageObject.create({
+  inputPlaceholder: PageObject.attribute('placeholder', ':input', { scope: '.scope' })
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+```javascript
+// <div><input></div>
+// <div class="scope"><input placeholder="a value"></div>
+// <div><input></div>
+
+const page = PageObject.create({
+  scope: 'scope',
+  inputPlaceholder: PageObject.attribute('placeholder', ':input')
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/click-on-text.md b/docs/v1.13.x/api/click-on-text.md
new file mode 100644
index 00000000..f16cbc47
--- /dev/null
+++ b/docs/v1.13.x/api/click-on-text.md
@@ -0,0 +1,93 @@
+---
+layout: page
+title: Click on-text
+---
+
+{% raw %}
+### Methods
+
+- [clickOnText](#clickontext)
+
+## clickOnText
+
+[addon/-private/properties/click-on-text.js:81-101](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/click-on-text.js#L81-L101 "Source code on GitHub")
+
+Clicks on an element containing specified text.
+
+The element can either match a specified selector,
+or be inside an element matching the specified selector.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element in which to look for text
+-   `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.visible` **boolean** Make the action to raise an error if the element is not visible
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <fieldset>
+//  <button>Lorem</button>
+//  <button>Ipsum</button>
+// </fieldset>
+
+const page = PageObject.create({
+  clickOnFieldset: PageObject.clickOnText('fieldset'),
+  clickOnButton: PageObject.clickOnText('button')
+});
+
+// queries the DOM with selector 'fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector 'button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+```javascript
+// <div class="scope">
+//   <fieldset>
+//    <button>Lorem</button>
+//    <button>Ipsum</button>
+//   </fieldset>
+// </div>
+
+const page = PageObject.create({
+  clickOnFieldset: PageObject.clickOnText('fieldset', { scope: '.scope' }),
+  clickOnButton: PageObject.clickOnText('button', { scope: '.scope' })
+});
+
+// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector '.scope button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+```javascript
+// <div class="scope">
+//   <fieldset>
+//    <button>Lorem</button>
+//    <button>Ipsum</button>
+//   </fieldset>
+// </div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  clickOnFieldset: PageObject.clickOnText('fieldset'),
+  clickOnButton: PageObject.clickOnText('button')
+});
+
+// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector '.scope button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/clickable.md b/docs/v1.13.x/api/clickable.md
new file mode 100644
index 00000000..7722dbd0
--- /dev/null
+++ b/docs/v1.13.x/api/clickable.md
@@ -0,0 +1,72 @@
+---
+layout: page
+title: Clickable
+---
+
+{% raw %}
+### Methods
+
+- [clickable](#clickable)
+
+## clickable
+
+[addon/-private/properties/clickable.js:59-79](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/clickable.js#L59-L79 "Source code on GitHub")
+
+Clicks elements matched by a selector.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to click
+-   `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.visible` **boolean** Make the action to raise an error if the element is not visible
+    -   `options.resetScope` **boolean** Ignore parent scope
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <button class="continue">Continue<button>
+// <button>Cancel</button>
+
+const page = PageObject.create({
+  continue: clickable('button.continue')
+});
+
+// clicks on element with selector 'button.continue'
+page.continue();
+```
+
+```javascript
+// <div class="scope">
+//   <button>Continue<button>
+// </div>
+// <button>Cancel</button>
+
+const page = PageObject.create({
+  continue: clickable('button.continue', { scope: '.scope' })
+});
+
+// clicks on element with selector '.scope button.continue'
+page.continue();
+```
+
+```javascript
+// <div class="scope">
+//   <button>Continue<button>
+// </div>
+// <button>Cancel</button>
+
+const page = PageObject.create({
+  scope: '.scope',
+  continue: clickable('button.continue')
+});
+
+// clicks on element with selector '.scope button.continue'
+page.continue();
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/collection.md b/docs/v1.13.x/api/collection.md
new file mode 100644
index 00000000..7e581341
--- /dev/null
+++ b/docs/v1.13.x/api/collection.md
@@ -0,0 +1,123 @@
+---
+layout: page
+title: Collection
+---
+
+{% raw %}
+### Methods
+
+- [collection](#collection)
+
+## collection
+
+[addon/-private/properties/collection.js:215-242](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/collection.js#L215-L242 "Source code on GitHub")
+
+**Parameters**
+
+-   `definition` **Object** Collection definition
+    -   `definition.scope` **string** Nests provided scope within parent's scope
+    -   `definition.resetScope` **boolean** Override parent's scope
+    -   `definition.itemScope` **string** CSS selector
+    -   `definition.item` **Object** Item definition
+
+**Examples**
+
+```javascript
+// <table>
+//   <caption>List of users</caption>
+//   <tbody>
+//     <tr>
+//       <td>Mary<td>
+//       <td>Watson</td>
+//     </tr>
+//     <tr>
+//       <td>John<td>
+//       <td>Doe</td>
+//     </tr>
+//   </tbody>
+// </table>
+
+const page = PageObject.create({
+  users: collection({
+    itemScope: 'table tr',
+
+    item: {
+      firstName: text('td', { at: 0 }),
+      lastName: text('td', { at: 1 })
+    },
+
+    caption: text('caption')
+  })
+});
+
+assert.equal(page.users().count, 2);
+assert.equal(page.users().caption, 'List of users');
+assert.equal(page.users(1).firstName, 'John');
+assert.equal(page.users(1).lastName, 'Doe');
+```
+
+```javascript
+// <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>
+
+const page = PageObject.create({
+  users: collection({
+    scope: '.admins',
+
+    itemScope: 'table tr',
+
+    item: {
+      firstName: text('td', { at: 0 }),
+      lastName: text('td', { at: 1 })
+    }
+  })
+});
+
+assert.equal(page.users().count, 2);
+```
+
+```javascript
+// <table>
+//   <caption>User Index</caption>
+//   <tbody>
+//     <tr>
+//       <td>Doe</td>
+//     </tr>
+//   </tbody>
+// </table>
+
+const page = PageObject.create({
+  users: PageObject.collection({
+    scope: 'table',
+    itemScope: 'tr',
+
+    item: {
+      firstName: text('td', { at: 0 })
+    },
+
+    caption: PageObject.text('caption')
+  })
+});
+
+assert.equal(page.users().caption, 'User Index');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/contains.md b/docs/v1.13.x/api/contains.md
new file mode 100644
index 00000000..b2a5b451
--- /dev/null
+++ b/docs/v1.13.x/api/contains.md
@@ -0,0 +1,94 @@
+---
+layout: page
+title: Contains
+---
+
+{% raw %}
+### Methods
+
+- [contains](#contains)
+
+## contains
+
+[addon/-private/properties/contains.js:84-103](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/contains.js#L84-L103 "Source code on GitHub")
+
+Returns a boolean representing whether an element or a set of elements contains the specified text.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `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 contain the subtext
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// Lorem <span>ipsum</span>
+
+const page = PageObject.create({
+  spanContains: PageObject.contains('span')
+});
+
+assert.ok(page.spanContains('ipsum'));
+```
+
+```javascript
+// <span>lorem</span>
+// <span>ipsum</span>
+// <span>dolor</span>
+
+const page = PageObject.create({
+  spansContain: PageObject.contains('span', { multiple: true })
+});
+
+// not all spans contain 'lorem'
+assert.notOk(page.spansContain('lorem'));
+```
+
+```javascript
+// <span>super text</span>
+// <span>regular text</span>
+
+const page = PageObject.create({
+  spansContain: PageObject.contains('span', { multiple: true })
+});
+
+// all spans contain 'text'
+assert.ok(page.spanContains('text'));
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span>ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  spanContains: PageObject.contains('span', { scope: '.scope' })
+});
+
+assert.notOk(page.spanContains('lorem'));
+assert.ok(page.spanContains('ipsum'));
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span>ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+
+  spanContains: PageObject.contains('span')
+});
+
+assert.notOk(page.spanContains('lorem'));
+assert.ok(page.spanContains('ipsum'));
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/count.md b/docs/v1.13.x/api/count.md
new file mode 100644
index 00000000..88b592b8
--- /dev/null
+++ b/docs/v1.13.x/api/count.md
@@ -0,0 +1,83 @@
+---
+layout: page
+title: Count
+---
+
+{% raw %}
+### Methods
+
+- [count](#count)
+
+## count
+
+[addon/-private/properties/count.js:74-89](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/count.js#L74-L89 "Source code on GitHub")
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element or elements to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Add scope
+    -   `options.resetScope` **boolean** Ignore parent scope
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <span>1</span>
+// <span>2</span>
+
+const page = PageObject.create({
+  spanCount: PageObject.count('span')
+});
+
+assert.equal(page.spanCount, 2);
+```
+
+```javascript
+// <div>Text</div>
+
+const page = PageObject.create({
+  spanCount: PageObject.count('span')
+});
+
+assert.equal(page.spanCount, 0);
+```
+
+```javascript
+// <div><span></span></div>
+// <div class="scope"><span></span><span></span></div>
+
+const page = PageObject.create({
+  spanCount: PageObject.count('span', { scope: '.scope' })
+});
+
+assert.equal(page.spanCount, 2)
+```
+
+```javascript
+// <div><span></span></div>
+// <div class="scope"><span></span><span></span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  spanCount: PageObject.count('span')
+});
+
+assert.equal(page.spanCount, 2)
+```
+
+```javascript
+// <div><span></span></div>
+// <div class="scope"><span></span><span></span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  spanCount: PageObject.count('span', { resetScope: true })
+});
+
+assert.equal(page.spanCount, 1);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/create.md b/docs/v1.13.x/api/create.md
new file mode 100644
index 00000000..b7b8d3eb
--- /dev/null
+++ b/docs/v1.13.x/api/create.md
@@ -0,0 +1,112 @@
+---
+layout: page
+title: Create
+---
+
+{% raw %}
+### Methods
+
+- [create](#create)
+
+## create
+
+[addon/-private/create.js:99-138](https://github.com/san650/ember-cli-page-object/blob/c521335ffba9955a6acaf1006ed503cbb61ba72d/addon/-private/create.js#L99-L138 "Source code on GitHub")
+
+Creates a new PageObject.
+
+By default, the resulting PageObject will respond to:
+
+* [click](/docs/v1.12.x/api/clickable)
+* [clickOn](/docs/v1.12.x/api/click-on-text)
+* [contains](/docs/v1.12.x/api/contains)
+* [fillIn](/docs/v1.12.x/api/fillable)
+* [isPresent](/docs/v1.12.x/api/is-present)
+* [isVisible](/docs/v1.12.x/api/is-visible)
+* [isHidden](/docs/v1.12.x/api/is-hidden)
+* [select](/docs/v1.12.x/api/selectable)
+* [text](/docs/v1.12.x/api/text)
+
+`definition` can include a key `context`, which is an
+optional integration test `this` context.
+
+If a context is passed, it is used by actions, queries, etc.,
+as the `this` in `this.$()`.
+
+If no context is passed, the global Ember acceptence test
+helpers are used.
+
+**Parameters**
+
+-   `definition` **Object** PageObject definition
+    -   `definition.context` **[Object]** A test's `this` context
+-   `options` **Object** [private] Ceibo options. Do not use!
+-   `definitionOrUrl`
+-   `definitionOrOptions`
+-   `optionsOrNothing`
+
+**Examples**
+
+```javascript
+// <div class="title">My title</div>
+
+import PageObject, { text } from 'ember-cli-page-object';
+
+const page = PageObject.create({
+  title: text('.title')
+});
+
+assert.equal(page.title, 'My title');
+```
+
+```javascript
+// <div id="my-page">
+//   My super text
+//   <button>Press Me</button>
+// </div>
+
+const page = PageObject.create({
+  scope: '#my-page'
+});
+
+assert.equal(page.text, 'My super text');
+assert.ok(page.contains('super'));
+assert.ok(page.isPresent);
+assert.ok(page.isVisible);
+assert.notOk(page.isHidden);
+assert.equal(page.value, 'my input value');
+
+// clicks div#my-page
+page.click();
+
+// clicks button
+page.clickOn('Press Me');
+
+// fills an input
+page.fillIn('name', 'John Doe');
+
+// selects an option
+page.select('country', 'Uruguay');
+```
+
+```javascript
+Defining path
+
+const usersPage = PageObject.create('/users');
+
+// visits user page
+usersPage.visit();
+
+const userTasksPage = PageObject.create('/users/tasks', {
+ tasks: collection({
+   itemScope: '.tasks li',
+   item: {}
+ });
+});
+
+// get user's tasks
+userTasksPage.visit();
+userTasksPage.tasks().count
+```
+
+Returns **PageObject**
+{% endraw %}
diff --git a/docs/v1.13.x/api/fillable.md b/docs/v1.13.x/api/fillable.md
new file mode 100644
index 00000000..025dcfda
--- /dev/null
+++ b/docs/v1.13.x/api/fillable.md
@@ -0,0 +1,127 @@
+---
+layout: page
+title: Fillable
+---
+
+{% raw %}
+### Methods
+
+- [fillable](#fillable)
+- [selectable](#selectable)
+
+## fillable
+
+[addon/-private/properties/fillable.js:110-151](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/fillable.js#L110-L151 "Source code on GitHub")
+
+Fills in an input matched by a selector.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to look for text
+-   `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.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input value="">
+
+const page = PageObject.create({
+  fillIn: PageObject.fillable('input')
+});
+
+// result: <input value="John Doe">
+page.fillIn('John Doe');
+```
+
+```javascript
+// <div class="name">
+//   <input value="">
+// </div>
+// <div class="last-name">
+//   <input value= "">
+// </div>
+
+const page = PageObject.create({
+  fillInName: PageObject.fillable('input', { scope: '.name' })
+});
+
+page.fillInName('John Doe');
+
+// result
+// <div class="name">
+//   <input value="John Doe">
+// </div>
+```
+
+```javascript
+// <div class="name">
+//   <input value="">
+// </div>
+// <div class="last-name">
+//   <input value= "">
+// </div>
+
+const page = PageObject.create({
+  scope: 'name',
+  fillInName: PageObject.fillable('input')
+});
+
+page.fillInName('John Doe');
+
+// result
+// <div class="name">
+//   <input value="John Doe">
+// </div>
+```
+
+```javascript
+<caption>Filling different inputs with the same property</caption>
+
+// <input id="name">
+// <input name="lastname">
+// <input data-test="email">
+// <textarea aria-label="address"></textarea>
+// <input placeholder="phone">
+// <div contenteditable="true" id="bio"></div>
+
+const page = create({
+  fillIn: fillable('input, textarea, [contenteditable]')
+});
+
+page
+  .fillIn('name', 'Doe')
+  .fillIn('lastname', 'Doe')
+  .fillIn('email', 'john@doe')
+  .fillIn('address', 'A street')
+  .fillIn('phone', '555-000')
+  .fillIn('bio', 'The story of <b>John Doe</b>');
+```
+
+Returns **Descriptor** 
+
+## selectable
+
+[addon/-private/properties/fillable.js:110-151](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/fillable.js#L110-L151 "Source code on GitHub")
+
+Alias for `fillable`, which works for inputs, HTML select menus, and
+contenteditable elements.
+
+[See `fillable` for usage examples.](#fillable)
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to look for text
+-   `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.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/getter.md b/docs/v1.13.x/api/getter.md
new file mode 100644
index 00000000..e9128093
--- /dev/null
+++ b/docs/v1.13.x/api/getter.md
@@ -0,0 +1,55 @@
+---
+layout: page
+title: Getter
+---
+
+{% raw %}
+### Methods
+
+- [getter](#getter)
+
+## getter
+
+[addon/-private/properties/getter.js:46-58](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/getter.js#L46-L58 "Source code on GitHub")
+
+Creates a Descriptor whose value is determined by the passed-in function.
+The passed-in function must not be bound and must not be an arrow function,
+as this would prevent it from running with the correct context.
+
+**Parameters**
+
+-   `fn` **Function** determines what value is returned when the Descriptor is accessed
+
+**Examples**
+
+```javascript
+// <input type="text">
+// <button disabled>Submit</button>
+
+import { create } from 'ember-cli-page-object';
+import { getter } from 'ember-cli-page-object/macros';
+
+const page = create({
+  inputValue: value('input'),
+  isSubmitButtonDisabled: property('disabled', 'button'),
+
+  // with the `getter` macro
+  isFormEmpty: getter(function() {
+    return !this.inputValue && this.isSubmitButtonDisabled;
+  }),
+
+  // without the `getter` macro
+  _isFormEmpty: {
+    isDescriptor: true,
+    get() {
+      return !this.inputValue && this.isSubmitButtonDisabled;
+    }
+  }
+});
+
+// checks the value returned by the function passed into `getter`
+assert.ok(page.isFormEmpty);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/has-class.md b/docs/v1.13.x/api/has-class.md
new file mode 100644
index 00000000..55cbbb73
--- /dev/null
+++ b/docs/v1.13.x/api/has-class.md
@@ -0,0 +1,95 @@
+---
+layout: page
+title: Has class
+---
+
+{% raw %}
+### Methods
+
+- [hasClass](#hasclass)
+
+## hasClass
+
+[addon/-private/properties/has-class.js:85-102](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/has-class.js#L85-L102 "Source code on GitHub")
+
+Validates if an element or a set of elements have a given CSS class.
+
+**Parameters**
+
+-   `cssClass` **string** CSS class to be validated
+-   `selector` **string** CSS selector of the element to check
+-   `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 have the CSS class
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <em class="lorem"></em><span class="success">Message!</span>
+
+const page = PageObject.create({
+  messageIsSuccess: PageObject.hasClass('success', 'span')
+});
+
+assert.ok(page.messageIsSuccess);
+```
+
+```javascript
+// <span class="success"></span>
+// <span class="error"></span>
+
+const page = PageObject.create({
+  messagesAreSuccessful: PageObject.hasClass('success', 'span', { multiple: true })
+});
+
+assert.notOk(page.messagesAreSuccessful);
+```
+
+```javascript
+// <span class="success"></span>
+// <span class="success"></span>
+
+const page = PageObject.create({
+  messagesAreSuccessful: PageObject.hasClass('success', 'span', { multiple: true })
+});
+
+assert.ok(page.messagesAreSuccessful);
+```
+
+```javascript
+// <div>
+//   <span class="lorem"></span>
+// </div>
+// <div class="scope">
+//   <span class="ipsum"></span>
+// </div>
+
+const page = PageObject.create({
+  spanHasClass: PageObject.hasClass('ipsum', 'span', { scope: '.scope' })
+});
+
+assert.ok(page.spanHasClass);
+```
+
+```javascript
+// <div>
+//   <span class="lorem"></span>
+// </div>
+// <div class="scope">
+//   <span class="ipsum"></span>
+// </div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  spanHasClass: PageObject.hasClass('ipsum', 'span')
+});
+
+assert.ok(page.spanHasClass);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/is-hidden.md b/docs/v1.13.x/api/is-hidden.md
new file mode 100644
index 00000000..df0a011b
--- /dev/null
+++ b/docs/v1.13.x/api/is-hidden.md
@@ -0,0 +1,101 @@
+---
+layout: page
+title: Is hidden
+---
+
+{% raw %}
+### Methods
+
+- [isHidden](#ishidden)
+
+## isHidden
+
+[addon/-private/properties/is-hidden.js:90-107](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/is-hidden.js#L90-L107 "Source code on GitHub")
+
+Validates if an element or set of elements is hidden or does not exist in the DOM.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `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 hidden
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// Lorem <span style="display:none">ipsum</span>
+
+const page = PageObject.create({
+  spanIsHidden: PageObject.isHidden('span')
+});
+
+assert.ok(page.spanIsHidden);
+```
+
+```javascript
+// <span>ipsum</span>
+// <span style="display:none">dolor</span>
+
+const page = create({
+  spansAreHidden: PageObject.isHidden('span', { multiple: true })
+});
+
+// not all spans are hidden
+assert.notOk(page.spansAreHidden);
+```
+
+```javascript
+// <span style="display:none">dolor</span>
+// <span style="display:none">dolor</span>
+
+const page = create({
+  spansAreHidden: PageObject.isHidden('span', { multiple: true })
+});
+
+// all spans are hidden
+assert.ok(page.spansAreHidden);
+```
+
+```javascript
+// Lorem <strong>ipsum</strong>
+
+const page = PageObject.create({
+  spanIsHidden: PageObject.isHidden('span')
+});
+
+// returns true when element doesn't exist in DOM
+assert.ok(page.spanIsHidden);
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span style="display:none">ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  scopedSpanIsHidden: PageObject.isHidden('span', { scope: '.scope' })
+});
+
+assert.ok(page.scopedSpanIsHidden);
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span style="display:none">ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  scopedSpanIsHidden: PageObject.isHidden('span')
+});
+
+assert.ok(page.scopedSpanIsHidden);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/is-present.md b/docs/v1.13.x/api/is-present.md
new file mode 100644
index 00000000..d7b4c29c
--- /dev/null
+++ b/docs/v1.13.x/api/is-present.md
@@ -0,0 +1,87 @@
+---
+layout: page
+title: Is present
+---
+
+{% raw %}
+### Methods
+
+- [isPresent](#ispresent)
+
+## isPresent
+
+[addon/-private/properties/is-present.js:74-81](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/is-present.js#L74-L81 "Source code on GitHub")
+
+Validates if any element matching the target selector is rendered in the DOM.
+
+`isPresent` vs. `isVisible`:
+
+-   Both validate that an element matching the target selector can be found in the DOM
+-   `isVisible` additionally validates that all matching elements are visible
+
+Some uses cases for `isPresent` over `isVisible`:
+
+-   To check for the presence of a tag that is never visible in the DOM (e.g., <meta>).
+-   To validate that, even though an element may not currently be visible, it is still in the DOM.
+-   To validate that an element has not merely been hidden but has in fact been removed from the DOM.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `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**
+
+```javascript
+// Lorem <span>ipsum</span>
+
+const page = PageObject.create({
+  spanIsPresent: PageObject.isPresent('span')
+});
+
+assert.ok(page.spanIsPresent);
+```
+
+```javascript
+// <span>ipsum</span>
+// <span style="display:none">dolor</span>
+
+const page = PageObject.create({
+  spanIsPresent: PageObject.isPresent('span', { multiple: true })
+});
+
+assert.ok(page.spanIsPresent);
+```
+
+```javascript
+// <head>
+//   <meta name='robots' content='noindex'>
+// </head>
+
+const page = PageObject.create({
+  notIndexed: PageObject.isPresent(`meta[name='robots'][content='noindex']`, {
+    testContainer: 'head'
+  })
+});
+
+assert.ok(page.notIndexed);
+```
+
+```javascript
+// Lorem <strong>ipsum</strong>
+
+const page = PageObject.create({
+  spanIsPresent: PageObject.isPresent('span')
+});
+
+// returns false when element doesn't exist in DOM
+assert.notOk(page.spanIsPresent);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/is-visible.md b/docs/v1.13.x/api/is-visible.md
new file mode 100644
index 00000000..6d29525c
--- /dev/null
+++ b/docs/v1.13.x/api/is-visible.md
@@ -0,0 +1,107 @@
+---
+layout: page
+title: Is visible
+---
+
+{% raw %}
+### Methods
+
+- [isVisible](#isvisible)
+
+## isVisible
+
+[addon/-private/properties/is-visible.js:96-117](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/is-visible.js#L96-L117 "Source code on GitHub")
+
+Validates if an element or set of elements are visible.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `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
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// Lorem <span>ipsum</span>
+
+const page = PageObject.create({
+  spanIsVisible: PageObject.isVisible('span')
+});
+
+assert.ok(page.spanIsVisible);
+```
+
+```javascript
+// <span>ipsum</span>
+// <span style="display:none">dolor</span>
+
+const page = PageObject.create({
+  spansAreVisible: PageObject.isVisible('span', { multiple: true })
+});
+
+// not all spans are visible
+assert.notOk(page.spansAreVisible);
+```
+
+```javascript
+// <span>ipsum</span>
+// <span>dolor</span>
+
+const page = PageObject.create({
+  spansAreVisible: PageObject.isVisible('span', { multiple: true })
+});
+
+// all spans are visible
+assert.ok(page.spansAreVisible);
+```
+
+```javascript
+// Lorem <strong>ipsum</strong>
+
+const page = PageObject.create({
+  spanIsVisible: PageObject.isVisible('span')
+});
+
+// returns false when element doesn't exist in DOM
+assert.notOk(page.spanIsVisible);
+```
+
+```javascript
+// <div>
+//   <span style="display:none">lorem</span>
+// </div>
+// <div class="scope">
+//   <span>ipsum</span>
+// </div>
+
+const page = PageObject.create({
+  spanIsVisible: PageObject.isVisible('span', { scope: '.scope' })
+});
+
+assert.ok(page.spanIsVisible);
+```
+
+```javascript
+// <div>
+//   <span style="display:none">lorem</span>
+// </div>
+// <div class="scope">
+//   <span>ipsum</span>
+// </div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  spanIsVisible: PageObject.isVisible('span')
+});
+
+assert.ok(page.spanIsVisible);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/is.md b/docs/v1.13.x/api/is.md
new file mode 100644
index 00000000..5c660c75
--- /dev/null
+++ b/docs/v1.13.x/api/is.md
@@ -0,0 +1,51 @@
+---
+layout: page
+title: Is
+---
+
+{% raw %}
+### Methods
+
+- [is](#is)
+
+## is
+
+[addon/-private/properties/is.js:45-62](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/is.js#L45-L62 "Source code on GitHub")
+
+**Parameters**
+
+-   `testSelector` **string** CSS selector to test
+-   `targetSelector` **string** CSS selector of the element to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.multiple` **boolean** If set, the function will return an array of values
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input type="checkbox" checked="checked">
+// <input type="checkbox" checked>
+
+const page = PageObject.create({
+  areInputsChecked: is(':checked', 'input', { multiple: true })
+});
+
+assert.equal(page.areInputsChecked, true, 'Inputs are checked');
+```
+
+```javascript
+// <button class="toggle-button active" disabled>Toggle something</button>
+
+const page = PageObject.create({
+  isToggleButtonActive: is('.active:disabled', '.toggle-button')
+});
+
+assert.equal(page.isToggleButtonActive, true, 'Button is active');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/not-has-class.md b/docs/v1.13.x/api/not-has-class.md
new file mode 100644
index 00000000..a83f5639
--- /dev/null
+++ b/docs/v1.13.x/api/not-has-class.md
@@ -0,0 +1,95 @@
+---
+layout: page
+title: Not has-class
+---
+
+{% raw %}
+### Methods
+
+- [notHasClass](#nothasclass)
+
+## notHasClass
+
+[addon/-private/properties/not-has-class.js:89-106](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/not-has-class.js#L89-L106 "Source code on GitHub")
+
+**Parameters**
+
+-   `cssClass` **string** CSS class to be validated
+-   `selector` **string** CSS selector of the element to check
+-   `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 don't have the CSS class
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <em class="lorem"></em><span class="success">Message!</span>
+
+const page = PageObject.create({
+  messageIsSuccess: PageObject.notHasClass('error', 'span')
+});
+
+assert.ok(page.messageIsSuccess);
+```
+
+```javascript
+// <span class="success"></span>
+// <span class="error"></span>
+
+const page = PageObject.create({
+  messagesAreSuccessful: PageObject.notHasClass('error', 'span', { multiple: true })
+});
+
+// one span has error class
+assert.notOk(page.messagesAreSuccessful);
+```
+
+```javascript
+// <span class="success"></span>
+// <span class="success"></span>
+
+const page = PageObject.create({
+  messagesAreSuccessful: PageObject.notHasClass('error', 'span', { multiple: true })
+});
+
+// no spans have error class
+assert.ok(page.messagesAreSuccessful);
+```
+
+```javascript
+// <div>
+//   <span class="lorem"></span>
+// </div>
+// <div class="scope">
+//   <span class="ipsum"></span>
+// </div>
+
+const page = PageObject.create({
+  spanNotHasClass: PageObject.notHasClass('lorem', 'span', { scope: '.scope' })
+});
+
+assert.ok(page.spanNotHasClass);
+```
+
+```javascript
+// <div>
+//   <span class="lorem"></span>
+// </div>
+// <div class="scope">
+//   <span class="ipsum"></span>
+// </div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  spanNotHasClass: PageObject.notHasClass('lorem', 'span')
+});
+
+assert.ok(page.spanNotHasClass);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/property.md b/docs/v1.13.x/api/property.md
new file mode 100644
index 00000000..82923619
--- /dev/null
+++ b/docs/v1.13.x/api/property.md
@@ -0,0 +1,62 @@
+---
+layout: page
+title: Property
+---
+
+{% raw %}
+### Methods
+
+- [property](#property)
+
+## property
+
+[addon/-private/properties/property.js:56-76](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/property.js#L56-L76 "Source code on GitHub")
+
+**Parameters**
+
+-   `propertyName` **string** Name of the property to get
+-   `selector` **string** CSS selector of the element to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.multiple` **boolean** If set, the function will return an array of values
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input type="checkbox" checked="checked">
+
+const page = PageObject.create({
+  isChecked: PageObject.property('checked', 'input')
+});
+
+assert.ok(page.isChecked);
+```
+
+```javascript
+// <input type="checkbox" checked="checked">
+// <input type="checkbox" checked="">
+
+const page = PageObject.create({
+  inputsChecked: PageObject.property('checked', 'input', { multiple: true })
+});
+
+assert.deepEqual(page.inputsChecked, [true, false]);
+```
+
+```javascript
+// <div><input></div>
+// <div class="scope"><input type="checkbox" checked="checked"></div>
+// <div><input></div>
+
+const page = PageObject.create({
+  isChecked: PageObject.property('checked', 'input', { scope: '.scope' })
+});
+
+assert.ok(page.isChecked);
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/text.md b/docs/v1.13.x/api/text.md
new file mode 100644
index 00000000..037c6273
--- /dev/null
+++ b/docs/v1.13.x/api/text.md
@@ -0,0 +1,94 @@
+---
+layout: page
+title: Text
+---
+
+{% raw %}
+### Methods
+
+- [text](#text)
+
+## text
+
+[addon/-private/properties/text.js:92-112](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/text.js#L92-L112 "Source code on GitHub")
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `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** Return an array of values
+    -   `options.normalize` **boolean** Set to `false` to avoid text normalization
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// Hello <span>world!</span>
+
+const page = PageObject.create({
+  text: PageObject.text('span')
+});
+
+assert.equal(page.text, 'world!');
+```
+
+```javascript
+// <span>lorem</span>
+// <span> ipsum </span>
+// <span>dolor</span>
+
+const page = PageObject.create({
+  texts: PageObject.text('span', { multiple: true })
+});
+
+assert.deepEqual(page.texts, ['lorem', 'ipsum', 'dolor']);
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span>ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  text: PageObject.text('span', { scope: '.scope' })
+});
+
+assert.equal(page.text, 'ipsum');
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope"><span>ipsum</span></div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  text: PageObject.text('span')
+});
+
+// returns 'ipsum'
+assert.equal(page.text, 'ipsum');
+```
+
+```javascript
+// <div><span>lorem</span></div>
+// <div class="scope">
+//  ipsum
+// </div>
+// <div><span>dolor</span></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  text: PageObject.text('span', { normalize: false })
+});
+
+// returns 'ipsum'
+assert.equal(page.text, '\n ipsum\n');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/triggerable.md b/docs/v1.13.x/api/triggerable.md
new file mode 100644
index 00000000..b60dadae
--- /dev/null
+++ b/docs/v1.13.x/api/triggerable.md
@@ -0,0 +1,97 @@
+---
+layout: page
+title: Triggerable
+---
+
+{% raw %}
+### Methods
+
+- [triggerable](#triggerable)
+
+## triggerable
+
+[addon/-private/properties/triggerable.js:85-107](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/triggerable.js#L85-L107 "Source code on GitHub")
+
+Triggers event on element matched by selector.
+
+**Parameters**
+
+-   `event` **string** Event to be triggered
+-   `selector` **string** CSS selector of the element on which the event will be triggered
+-   `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** Ignore parent scope
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+    -   `options.eventProperties` **string** Event properties that will be passed to trigger function
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input class="name">
+// <input class="email">
+
+const page = PageObject.create({
+  focus: triggerable('focus', '.name')
+});
+
+// focuses on element with selector '.name'
+page.focus();
+```
+
+```javascript
+// <input class="name">
+// <input class="email">
+
+const page = PageObject.create({
+  enter: triggerable('keypress', '.name', { eventProperties: { keyCode: 13 } })
+});
+
+// triggers keypress using enter key on element with selector '.name'
+page.enter();
+```
+
+```javascript
+// <input class="name">
+// <input class="email">
+
+const page = PageObject.create({
+  keydown: triggerable('keypress', '.name')
+});
+
+// triggers keypress using enter key on element with selector '.name'
+page.keydown({ which: 13 });
+```
+
+```javascript
+// <div class="scope">
+//   <input class="name">
+// </div>
+// <input class="email">
+
+const page = PageObject.create({
+  focus: triggerable('focus', '.name', { scope: '.scope' })
+});
+
+// focuses on element with selector '.scope .name'
+page.focus();
+```
+
+```javascript
+// <div class="scope">
+//   <input class="name">
+// </div>
+// <input class="email">
+
+const page = PageObject.create({
+  scope: '.scope',
+  focus: triggerable('focus', '.name')
+});
+
+// focuses on element with selector '.scope .name'
+page.focus();
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/value.md b/docs/v1.13.x/api/value.md
new file mode 100644
index 00000000..2c456daa
--- /dev/null
+++ b/docs/v1.13.x/api/value.md
@@ -0,0 +1,83 @@
+---
+layout: page
+title: Value
+---
+
+{% raw %}
+### Methods
+
+- [value](#value)
+
+## value
+
+[addon/-private/properties/value.js:79-103](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/value.js#L79-L103 "Source code on GitHub")
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.multiple` **boolean** If set, the function will return an array of values
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input value="Lorem ipsum">
+
+const page = PageObject.create({
+  value: PageObject.value('input')
+});
+
+assert.equal(page.value, 'Lorem ipsum');
+```
+
+```javascript
+// <div contenteditable="true"><b>Lorem ipsum</b></div>
+
+const page = PageObject.create({
+  value: PageObject.value('[contenteditable]')
+});
+
+assert.equal(page.value, '<b>Lorem ipsum</b>');
+```
+
+```javascript
+// <input value="lorem">
+// <input value="ipsum">
+
+const page = PageObject.create({
+  value: PageObject.value('input', { multiple: true })
+});
+
+assert.deepEqual(page.value, ['lorem', 'ipsum']);
+```
+
+```javascript
+// <div><input value="lorem"></div>
+// <div class="scope"><input value="ipsum"></div>
+
+const page = PageObject.create({
+  value: PageObject.value('input', { scope: '.scope' })
+});
+
+assert.equal(page.value, 'ipsum');
+```
+
+```javascript
+// <div><input value="lorem"></div>
+// <div class="scope"><input value="ipsum"></div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  value: PageObject.value('input')
+});
+
+assert.equal(page.value, 'ipsum');
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/api/visitable.md b/docs/v1.13.x/api/visitable.md
new file mode 100644
index 00000000..f36f0e16
--- /dev/null
+++ b/docs/v1.13.x/api/visitable.md
@@ -0,0 +1,58 @@
+---
+layout: page
+title: Visitable
+---
+
+{% raw %}
+### Methods
+
+- [visitable](#visitable)
+
+## visitable
+
+[addon/-private/properties/visitable.js:85-104](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/visitable.js#L85-L104 "Source code on GitHub")
+
+**Parameters**
+
+-   `path` **string** Full path of the route to visit
+
+**Examples**
+
+```javascript
+const page = PageObject.create({
+  visit: PageObject.visitable('/users')
+});
+
+// visits '/users'
+page.visit();
+```
+
+```javascript
+const page = PageObject.create({
+  visit: PageObject.visitable('/users/:user_id')
+});
+
+// visits '/users/10'
+page.visit({ user_id: 10 });
+```
+
+```javascript
+const page = PageObject.create({
+  visit: PageObject.visitable('/users')
+});
+
+// visits '/users?name=john'
+page.visit({ name: 'john' });
+```
+
+```javascript
+const page = PageObject.create({
+  visit: PageObject.visitable('/users/:user_id')
+});
+
+// visits '/users/1?name=john'
+page.visit({ user_id: 1, name: 'john' });
+```
+
+Returns **Descriptor** 
+{% endraw %}
\ No newline at end of file
diff --git a/docs/v1.13.x/components.md b/docs/v1.13.x/components.md
new file mode 100644
index 00000000..e8588d18
--- /dev/null
+++ b/docs/v1.13.x/components.md
@@ -0,0 +1,250 @@
+---
+layout: page
+title: Components
+---
+
+Group attributes and create new ones
+
+* [Components](#components)
+* [Default attributes](#default-attributes)
+* [Custom helper](#custom-helper)
+* [Scopes](#scopes)
+
+## Components
+
+Components let you group attributes together, they are just plain objects with attributes on it. You can even define these objects in different files and reuse them in multiple places. Components can define a scope.
+
+__Example__
+
+```html
+<h1>New user</h1>
+<form class="awesome-form">
+  <input id="firstName" placeholder="First name">
+  <input id="lastName" placeholder="Last name">
+  <button>Create</button>
+</form>
+```
+
+```js
+const { visitable, text, fillable, clickable } = PageObject;
+
+var page = PageObject.create({
+  visit: visitable('/user/create'),
+  title: text('h1'),
+
+  form: {
+    scope: '.awesome-form',
+
+    firstName: fillable('#firstName'),
+    lastName: fillable('#lastName'),
+    submit: clickable('button')
+  }
+});
+
+page
+  .visit()
+  .form
+  .firstName('John')
+  .lastName('Doe')
+  .submit();
+
+andThen(function() {
+  // assert something
+});
+```
+
+## Default attributes
+
+By default, all components define some handy attributes and methods without being explicitly declared.
+
+* [click](/docs/v1.8.x/api/clickable)
+* [clickOn](/docs/v1.8.x/api/click-on-text)
+* [contains](/docs/v1.8.x/api/contains)
+* [fillIn](/docs/v1.8.x/api/fillable)
+* [isVisible](/docs/v1.8.x/api/is-visible)
+* [isHidden](/docs/v1.8.x/api/is-hidden)
+* [select](/docs/v1.8.x/api/selectable)
+* [text](/docs/v1.8.x/api/text)
+* [value](/docs/v1.8.x/api/value)
+
+<div class="alert alert-warning" role="alert">
+  <strong>Note</strong> that these attributes will use the component scope as their selector.
+</div>
+
+__Example__
+
+Suppose you have a modal dialog
+
+```html
+<div class="modal">
+  Are you sure you want to exit the page?
+  <button>I'm sure</button>
+  <button>No</button>
+</form>
+```
+
+```js
+const { visitable } = PageObject;
+
+var page = PageObject.create({
+  visit: visitable('/'),
+
+  modal: {
+    scope: '.modal'
+  }
+});
+
+page.visit();
+
+andThen(function() {
+  assert.ok(page.modal.contains('Are you sure you want to exit the page?'));
+});
+
+page.modal.clickOn("I'm sure");
+```
+
+## Custom helper
+
+You can create custom helpers by creating `Ceibo` descriptors. (`Ceibo` is a small library for parsing trees. You can check it out [here](http://github.com/san650/ceibo).)
+
+```js
+import { findElement } from './page-object';
+
+export default function disabled(selector, options = {}) {
+  return {
+    isDescriptor: true,
+
+    get() {
+      return findElement(this, selector, options).is(':disabled');
+    }
+  }
+}
+```
+
+Example usage:
+
+```js
+let page = PageObject.create({
+  scope: '.page',
+
+  isAdmin: disabled('#override-name')
+});
+```
+
+`page.isAdmin` will look for elements in the DOM that match ".page
+\#override-name" and check if they are disabled.
+
+## Scopes
+
+The `scope` attribute can be used to reduce the set of matched elements to the ones enclosed by the given selector.
+
+Given the following HTML
+
+```html
+<div class="article">
+  <p>Lorem ipsum dolor</p>
+</div>
+<div class="footer">
+  <p>Copyright Acme Inc.</p>
+</div>
+```
+
+the following configuration will match the article paragraph element
+
+```js
+var page = PageObject.create({
+  scope: '.article',
+
+  textBody: PageObject.text('p'),
+});
+
+andThen(function() {
+  assert.equal(page.textBody, 'Lorem ipsum dolor.');
+});
+```
+
+The attribute's selector can be omited when the scope matches the element we want to use.
+
+Given the following HTML
+
+```html
+<form>
+  <input id="userName" value="a value" />
+  <button>Submit</button>
+</form>
+```
+
+We can define several attributes on the same `input` element as follows
+
+```js
+var page = PageObject.create({
+  input: {
+    scope: '#userName',
+
+    hasError: hasClass('has-error'),
+    value: value(),
+    fillIn: fillable()
+  },
+
+  submit: clickable('button')
+});
+
+page
+  .input
+  .fillIn('an invalid value');
+
+page.submit();
+
+andThen(function() {
+  assert.ok(page.input.hasError, 'Input has an error');
+});
+```
+
+### A `component` inherits parent scope by default
+
+```html
+<div class="search">
+  <input placeholder="Search...">
+  <button>Search</button>
+</div>
+```
+
+```js
+var page = PageObject.create({
+  search: {
+    scope: '.search',
+
+    input: {
+      fillIn: fillable('input'),
+      value: value('input')
+    }
+  }
+});
+```
+
+| call                      | translates to                 |
+|:--------------------------|:------------------------------|
+| `page.search.input.value` | `find('.search input').val()` |
+{: .table}
+
+You can reset parent scope by setting the `scope` and `resetScope` attribute on the component declaration.
+
+```js
+var page = PageObject.create({
+  search: {
+    scope: '.search',
+
+    input: {
+      scope: 'input',
+      resetScope: true,
+
+      fillIn: fillable()
+    }
+  }
+});
+```
+
+| call                      | translates to         |
+|:--------------------------|:----------------------|
+| `page.search.input.value` | `find('input').val()` |
+{: .table}
diff --git a/docs/v1.13.x/extend.md b/docs/v1.13.x/extend.md
new file mode 100644
index 00000000..6399d8c6
--- /dev/null
+++ b/docs/v1.13.x/extend.md
@@ -0,0 +1,82 @@
+---
+layout: page
+title: Extend
+---
+
+{% raw %}
+### Methods
+
+- [findElementWithAssert](#findelementwithassert)
+- [findElement](#findelement)
+
+## findElementWithAssert
+
+[addon/-private/extend/find-element-with-assert.js:38-44](https://github.com/san650/ember-cli-page-object/blob/c521335ffba9955a6acaf1006ed503cbb61ba72d/addon/-private/extend/find-element-with-assert.js#L38-L44 "Source code on GitHub")
+
+**Parameters**
+
+-   `pageObjectNode` **Ceibo** Node of the tree
+-   `targetSelector` **string** Specific CSS selector
+-   `options` **Object** Additional options
+    -   `options.resetScope` **boolean** Do not use inherited scope
+    -   `options.contains` **string** Filter by using :contains('foo') pseudo-class
+    -   `options.last` **boolean** Filter by using :last pseudo-class
+    -   `options.visible` **boolean** Filter by using :visible pseudo-class
+    -   `options.multiple` **boolean** Specify if built selector can match multiple elements.
+    -   `options.testContainer` **String** Context where to search elements in the DOM
+    -   `options.at` **number** Filter by index using :eq(x) pseudo-class
+    -   `options.pageObjectKey` **String** Used in the error message when the element is not found
+
+**Examples**
+
+```javascript
+import { findElementWithAssert } from 'ember-cli-page-object/extend';
+
+export default function isDisabled(selector, options = {}) {
+  return {
+    isDescriptor: true,
+
+    get() {
+      return findElementWithAssert(this, selector, options).is(':disabled');
+    }
+  };
+}
+```
+
+Returns **Object** jQuery object
+
+## findElement
+
+[addon/-private/extend/find-element.js:36-42](https://github.com/san650/ember-cli-page-object/blob/c521335ffba9955a6acaf1006ed503cbb61ba72d/addon/-private/extend/find-element.js#L36-L42 "Source code on GitHub")
+
+**Parameters**
+
+-   `pageObjectNode` **Ceibo** Node of the tree
+-   `targetSelector` **string** Specific CSS selector
+-   `options` **Object** Additional options
+    -   `options.resetScope` **boolean** Do not use inherited scope
+    -   `options.contains` **string** Filter by using :contains('foo') pseudo-class
+    -   `options.at` **number** Filter by index using :eq(x) pseudo-class
+    -   `options.last` **boolean** Filter by using :last pseudo-class
+    -   `options.visible` **boolean** Filter by using :visible pseudo-class
+    -   `options.multiple` **boolean** Specify if built selector can match multiple elements.
+    -   `options.testContainer` **String** Context where to search elements in the DOM
+
+**Examples**
+
+```javascript
+import { findElement } from 'ember-cli-page-object/extend';
+
+export default function isDisabled(selector, options = {}) {
+  return {
+    isDescriptor: true,
+
+    get() {
+      return findElement(this, selector, options).is(':disabled');
+    }
+  };
+}
+```
+
+Returns **Object** jQuery object
+{% endraw %}
diff --git a/docs/v1.13.x/index.md b/docs/v1.13.x/index.md
new file mode 100644
index 00000000..ae68d0b5
--- /dev/null
+++ b/docs/v1.13.x/index.md
@@ -0,0 +1,55 @@
+---
+layout: page
+title: Overview
+---
+
+The ember-cli-page-object addon makes it easy to create page objects for your acceptance and integration tests.
+
+The addon is:
+
+- Mostly declarative
+- Quick to set up and uses convention over configuration
+- Extremely easy to extend
+- Unobtrusive
+- Agnostic to the testing framework (but really hooked on Ember!)
+
+```javascript
+const page = PageObject.create({
+  visit: visitable('/'),
+
+  username: fillable('#username'),
+  password: fillable('#password'),
+  submit: clickable('button'),
+  error: text('.errors')
+});
+
+test('my awesome test', function(assert) {
+  page
+    .visit()
+    .username('admin')
+    .password('invalid')
+    .submit();
+
+  andThen(() => {
+    assert.equal(page.error, 'Invalid credentials');
+  });
+});
+```
+
+## So, What Is a Page Object?
+
+Ember, and more specifically `ember-testing`, provides a DSL that simplifies the creation and validation of conditions on our tests.
+
+One of the problems with acceptance and integration testing is that many of the CSS selectors used to look up elements are repeated across tests. In some cases, this repetition seems like a smell.
+
+In some cases the complexity of selectors makes it hard to remember what we were actually trying to test. This confusion can lead to difficulties updating tests and collaborating with others.
+
+A widely used design pattern comes to the rescue: page objects. The main idea behind this pattern is to encapsulate in an object the page or component structure being tested, hiding the details of its HTML structure and exposing only the semantic structure of the page.
+
+This addon allows you to define page objects in a declarative fashion, making it simple to model complex pages and components.
+
+### Resources
+
+- [Using the page object pattern with ember-cli](https://wyeworks.com/blog/2015/5/13/using-the-page-object-pattern-with-ember-cli/)
+- [Martin Fowler's original description](http://martinfowler.com/bliki/PageObject.html)
+- [Selenium's wiki page](https://seleniumhq.github.io/docs/best.html#page_object_models)
diff --git a/docs/v1.13.x/installation.md b/docs/v1.13.x/installation.md
new file mode 100644
index 00000000..069f75fc
--- /dev/null
+++ b/docs/v1.13.x/installation.md
@@ -0,0 +1,10 @@
+---
+layout: page
+title: Installation
+---
+
+```bash
+$ ember install ember-cli-page-object
+```
+
+That's it!
diff --git a/docs/v1.13.x/migrating.md b/docs/v1.13.x/migrating.md
new file mode 100644
index 00000000..06989295
--- /dev/null
+++ b/docs/v1.13.x/migrating.md
@@ -0,0 +1,340 @@
+---
+layout: page
+title: Migration Guide
+---
+{% raw %}
+In the update to ember-cli-page-object v1.x, we've defined more intuitive behavior and moved to a more polished and mature API.
+
+This sounds great, but it also comes with a cost: you need to migrate your test suite. This page includes a list of breaking changes and API enhancements to help you upgrade as quickly and painlessly as possible.
+
+- [Change `build()` calls to `create()` calls](#change-build-calls-to-create-calls)
+- [Components are now just plain objects](#components-are-now-just-plain-objects)
+- [`.customHelper` is deprecated](#customhelper)
+- [Collections are now 0-based](#collections-are-now-0-based)
+- [`index` option renamed to `at` and is 0-based](#index-option-renamed-to-at-and-is-0-based)
+- [Remove parentheses when getting a value for a query or predicate](#remove-parentheses-when-getting-a-value-for-a-query-or-predicate)
+- [Scope and `resetScope`](#scope-and-resetscope)
+- [The `multiple` option](#the-multiple-optionm)
+- [`.visitable()`](#visitable)
+- [`.clickOnText()`](#clickontext)
+
+## Change `build()` calls to `create()` calls
+
+This is very simple:
+
+```js
+const page = PageObject.build({
+  // ...
+});
+```
+
+Should be changed to:
+
+```js
+const page = PageObject.create({
+  // ...
+});
+```
+
+## Components are now just plain objects
+
+In `v0.x` we deprecated the `component` function. In `v1.0` we
+removed it completely in favor of using plain JS objects.
+
+```js
+const page = PageObject.create({
+  // ...
+  modal: component({
+    // modal component definition
+  }),
+  // ...
+});
+```
+
+Should be changed to:
+
+```js
+const page = PageObject.create({
+  // ...
+  modal: {
+    // modal component definition
+  },
+  // ...
+});
+```
+
+## .customHelper
+
+`.customHelper` is now deprecated. Use `Ceibo` descriptors instead. (`Ceibo` is a small library for parsing trees. You can check it out [here](http://github.com/san650/ceibo).)
+
+With the old `v0.x` syntax, you would define a custom helper like:
+
+```js
+var disabled = customHelper(function(selector, options) {
+  return $(selector).prop('disabled');
+});
+```
+
+On version `1.x` this can be represented as:
+
+```js
+import { findElement } from './page-object';
+
+export default function disabled(selector, options = {}) {
+  return {
+    isDescriptor: true,
+
+    get() {
+      return findElement(this, selector, options).is(':disabled');
+    }
+  }
+}
+```
+
+Example usage:
+
+```js
+let page = PageObject.create({
+  scope: '.page',
+
+  isAdmin: disabled('#override-name')
+});
+```
+
+`page.isAdmin` will look for elements in the DOM that match ".page #override-name" and check if they are disabled.
+
+## Collections are now 0-based
+
+When we first implemented the `collection` function, we were using the
+`nth-of-type` CSS pseudo-class which is 1-based, so we though it would
+be clearer to also make collections 1-based. Later we decided to
+change to an implementation to use `:eq`, which is `0-based`. We decided `v1.0`
+was the moment to break compatibility and switch to 0-based collections.
+
+```hbs
+<table>
+  <tbody>
+    <tr>
+      <td>Jane</td>
+    </tr>
+    <tr>
+      <td>John</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Example from the old `v0.x` syntax:
+
+```js
+const page = create({
+  users: collection({
+    itemScope: 'table tr',
+    item: {
+      name: text('td')
+    }
+  })
+});
+
+page.users(1).name(); //  returns 'Jane'
+page.users(2).name(); //  returns 'John'
+```
+
+Example in `v1.x` syntax:
+
+```js
+const page = create({
+  users: collection({
+    itemScope: 'table tr',
+    item: {
+      name: text('td')
+    }
+  })
+});
+
+page.users(0).name; //  returns 'Jane'
+page.users(1).name; //  returns 'John'
+```
+
+## `index` option renamed to `at` and is 0-based
+
+In `v0.x`, the `index` option was used to reduce the set of matched elements to the
+one at the specified index which was 1-based. A small example from `v0.x`:
+
+```js
+const page = create({
+  secondTitle: text('h1', { index: 2 })
+});
+
+page.secondTitle(); // translates into $('h1:eq(1)').text()
+```
+
+In `v1.x` this should be changed to:
+
+```js
+const page = create({
+  secondTitle: text('h1', { at: 1 })
+});
+
+page.secondTitle; // translates into $('h1:eq(1)').text()
+```
+
+## Remove parentheses when getting a value for a query or predicate 
+
+In `v1` we decided to go a step further on improving the code and
+polished the tree structure we already used when defining page objects.
+The `Ceibo` project was born (you can see it over
+[here](http://github.com/san650/ceibo)) which defines a simple way to
+create complex properties within an object. So for most cases
+properties used only to get a value will no longer need parentheses
+when accessed.
+
+```js
+const page = create({
+  scope: '#my-page',
+
+  title: text('h1'),
+  fillInName: fillable('#name')
+});
+```
+
+In `v0.x` the following code was used within tests:
+
+```js
+assert.equal(page.title(), 'My page title');
+page.fillInName('Juan'); // fill #name with 'Juan'
+```
+
+In `v1.x` this should be changed to:
+
+```js
+assert.equal(page.title, 'My page title');
+page.fillInName('Juan'); // Doesn't change
+```
+
+## Scope and `resetScope`
+
+In `v0.x` defining the `scope` attribute on a page object used to override how the element was looked up in the DOM. Example:
+
+```js
+const page = create({
+  scope: '#my-page',
+
+  title: text('h1'),
+  fillInName: fillable('#name')
+
+  modal: {
+    scope: '#my-modal',
+    title: PageObject.text('h3')
+  }
+});
+```
+
+When running tests in `v0.x`:
+
+```js
+page.title(); // translates to `find('#my-page h1').text()`
+page.modal().title() //  transaltes to `find('#my-modal h3').text()`
+```
+
+In `v1.0` we decided to implement scope inheritance, this means that if a
+component defines a scope and has a child component, the latter will
+inherit its parent scope.
+
+```js
+page.title; // translates into find('#my-page h1').text()
+page.modal.title //  transaltes into find('#my-page #my-modalh3').text()
+```
+
+In some scenarios, this change of behavior will not affect test
+assertions but in some cases, it will. If you want to make sure lookups
+work as in `v0.x` you can use the `resetScope` option (you can see more
+options on the documentation [site](/docs/v1.1.x/options)).
+
+Changed definition to keep lookups the same:
+
+```js
+const page = create({
+  scope: '#my-page',
+
+  title: text('h1'),
+  fillInName: fillable('#name')
+
+  modal: {
+    scope: '#my-modal',
+    resetScope: true,
+
+    title: text('h3')
+  }
+});
+```
+
+## The `multiple` option
+
+Another cause of failure when upgrading to `v1.x` is that, by default, an error will be thrown if multiple elements match a query or predicate.
+
+For example, if the previous page object definition is used with the following template:
+
+```hbs
+<div class="#my-page">
+  <h1>My title</h1>
+  <h1>My other title</h1>
+</div>
+```
+
+This call will throw an error:
+
+```js
+page.title; // Kaboom!
+```
+
+This behavior applies to every DOM lookup except `count`.
+
+If you need to match multiple elements you can use the `multiple` option on
+your properties. The resulting behavior will vary depending on the
+property. As an example, you can check how the `multiple` option behaves on the `text`
+property [here](/docs/v1.1.x/api/queries#text).
+
+## .visitable()
+
+The signature for `.visitable()` has changed. 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.
+
+```js
+var page = create({
+  visit: visitable('/users/:user_id')
+
+});
+
+page.visit({ user_id: 1, expanded: true  });
+
+// is equivalent to
+
+visit("/users/1?expanded=true");
+```
+
+## .clickOnText()
+
+The behaviour of `.clickOnText()` has improved. 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
+
+```html
+<div class="modal">
+...
+<button>Save</button><button>Cancel</button>
+```
+
+```js
+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.
+{% endraw %}
diff --git a/docs/v1.13.x/options.md b/docs/v1.13.x/options.md
new file mode 100644
index 00000000..d3b42f8e
--- /dev/null
+++ b/docs/v1.13.x/options.md
@@ -0,0 +1,123 @@
+---
+layout: page
+title: Options
+---
+
+A set of options can be passed as parameters when defining attributes.
+
+* [scope](#scope)
+* [at](#at)
+* [resetScope](#resetScope)
+* [multiple](#multiple)
+
+## scope
+
+The `scope` option can be used to do nesting of the provided selector
+within the inherited scope.
+
+Given the following HTML
+
+```html
+<div class="page">
+  <div class="article">
+    <p>Lorem ipsum dolor</p>
+  </div>
+  <div class="footer">
+    <p>Copyright 2016 - Acme Inc.</p>
+  </div>
+</div>
+```
+
+the following configuration will match the footer element
+
+```js
+const { text } = PageObject;
+
+var page = PageObject.create({
+  scope: '.page',
+
+  copyrightNotice: text('p', { scope: '.footer' })
+});
+
+andThen(function() {
+  assert.equal(page.copyrightNotice, 'Copyright 2015 - Acme Inc.');
+});
+```
+
+## at
+
+The `at` option can be used to reduce the set of matched elements to the one at the specified index (starting from zero).
+
+```html
+<span>Lorem</span>
+<span>ipsum</span>
+<span>dolor</span>
+```
+
+the following configuration will match the second `span` element
+
+```js
+const { text } = PageObject;
+
+var page = PageObject.create({
+  word: text('span', { at: 1 })
+});
+
+andThen(function() {
+  assert.equal(page.word, 'ipsum'); // => ok
+});
+```
+
+## resetScope
+
+Used with the `scope` options, the 'resetScope' option is meant to
+override the inherited scope of a component or property with the
+value defined on the `scope` property.
+
+```html
+<div class="scope">
+  <span>ipsum</span>
+  <span>dolor</span>
+</div>
+<div class="outside-scope">
+  <span>Lorem</span>
+</div>
+```
+
+```js
+const { text } = PageObject;
+
+var page = PageObject.create({
+  scope: '.scope',
+  outsideWord: text('span', { scope: 'outside-scope', resetScope: true })
+});
+
+andThen(function() {
+  assert.equal(page.outsideWord, 'Lorem'); // => ok
+});
+```
+
+## multiple
+
+By default, element lookup will throw an error if more than on element
+is matched. Setting the `multiple` option will override this behavior:
+
+```html
+<span>Lorem</span>
+<span>ipsum</span>
+```
+
+```js
+const { text } = PageObject;
+
+var page = PageObject.create({
+  words: text('span', { multiple: true })
+});
+
+andThen(function() {
+  assert.deepEqual(page.word, ['Lorem', 'ipsum']); // => ok
+});
+```
+
+The return value of each property using the `multiple` option can be
+found in the API documentation.
diff --git a/docs/v1.13.x/quickstart.md b/docs/v1.13.x/quickstart.md
new file mode 100644
index 00000000..2819eef4
--- /dev/null
+++ b/docs/v1.13.x/quickstart.md
@@ -0,0 +1,424 @@
+---
+layout: page
+title: Quickstart
+---
+
+{% raw %}
+This is a short guide to get you started writing page objects and using them in your acceptance and integration tests.
+
+- [Acceptance tests](#acceptance-tests)
+- [Integration tests](#integration-tests)
+
+## Acceptance Tests
+
+Suppose we have a couple of acceptance tests to test the login page of our site.
+
+```js
+test('logs in sucessfully', function(assert) {
+  visit('/login');
+  fillIn('#username', 'admin');
+  fillIn('#password', 'secret');
+  click('button');
+
+  andThen(function() {
+    assert.equal(currentURL(), '/private-page');
+  });
+});
+
+test('shows an error when password is wrong', function(assert) {
+  visit('/login');
+  fillIn('#username', 'admin');
+  fillIn('#password', 'invalid');
+  click('button');
+
+  andThen(function() {
+    assert.equal(currentURL(), '/login');
+    assert.equal($.trim(find('.errors').text()), 'Invalid credentials');
+  });
+});
+```
+
+We want to convert these tests to use a page object.
+
+First, we need to create a new page object. For this we'll use one of the generators that comes with the addon.
+
+```bash
+$ ember generate page-object login
+
+installing
+  create tests/pages/login.js
+```
+
+The generator created a file inside the directory `/tests/pages`. Let's describe the login page structure on our new page object.
+
+```js
+import PageObject, {
+  clickable,
+  fillable,
+  text,
+  visitable
+} from 'frontend/tests/page-object';
+
+export default PageObject.create({
+  visit: visitable('/'),
+
+  username: fillable('#username'),
+  password: fillable('#password'),
+  submit: clickable('button'),
+  error: text('.errors')
+});
+```
+
+Now we include the page object in the test and replace the existing test helpers with the page object's methods and properties.
+
+```js
+import page from 'frontend/tests/pages/login';
+
+// ...
+
+test('logs in sucessfully', function(assert) {
+  page
+    .visit()
+    .username('admin')
+    .password('secret')
+    .submit();
+
+  andThen(function() {
+    assert.equal(currentURL(), '/private-page');
+  });
+});
+
+test('shows an error when password is wrong', function(assert) {
+  page
+    .visit()
+    .username('admin')
+    .password('invalid')
+    .submit();
+
+  andThen(function() {
+    assert.equal(page.error, 'Invalid credentials');
+  });
+});
+```
+
+We can go a step further and describe the steps of the test using a higher level of abstraction.
+
+```js
+import PageObject, {
+  clickable,
+  fillable,
+  text,
+  visitable
+} from 'frontend/tests/page-object';
+
+export default PageObject.create({
+  visit: visitable('/'),
+
+  username: fillable('#username'),
+  password: fillable('#password'),
+  submit: clickable('button'),
+  error: text('.errors'),
+
+  loginSuccessfully() {
+    return this.username('admin')
+      .password('secret')
+      .submit();
+  },
+
+  loginFailed() {
+    return this.username('admin')
+      .password('invalid')
+      .submit();
+  }
+});
+```
+
+Let's update the test accordingly.
+
+```js
+test('logs in sucessfully', function(assert) {
+  page.visit()
+    .loginSuccessfully();
+
+  andThen(function() {
+    assert.equal(currentURL(), '/private-page');
+  });
+});
+
+test('shows an error when password is wrong', function(assert) {
+  page.visit()
+    .loginFailed();
+
+  andThen(function() {
+    assert.equal(page.error, 'Invalid credentials');
+  });
+});
+```
+
+## Integration Tests
+
+We've made a page object for our login page. Now let's use the same page object to write integration tests for our login form component.
+
+Here are our integration tests before using a page object.
+
+```js
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('login-form', 'Integration | login form', {
+  integration: true
+});
+
+test('calls submit action with correct username and password', function(assert) {
+  assert.expect(2);
+
+  function submit(username, password) {
+    assert.equal(username, 'admin');
+    assert.equal(password, 'secret');
+  }
+
+  this.set('submit', submit);
+
+  this.render(hbs`
+    {{login-form
+      submit=(action submit)
+    }}
+  `);
+
+  $username = this.$('#username');
+  $password = this.$('#password');
+
+  $username.val('admin');
+  $username.trigger('input');
+  $username.change();
+
+  $password.val('secret');
+  $password.trigger('input');
+  $password.change();
+
+  this.$('button').click();
+});
+
+test('shows errors', function(assert) {
+  assert.expect(2);
+
+  this.set('errors', []);
+
+  this.render(hbs`
+    {{login-form
+      errors=errors
+    }}
+  `);
+
+  assert.equal(this.$('.errors').trim().text()), '');
+
+  Ember.run(() => {
+    this.set('errors', ['Invalid credentials']);
+  });
+
+  assert.equal(this.$('.errors').trim().text()), 'Invalid credentials');
+});
+```
+
+Let's use our existing page object to refactor these integration tests. As a reminder, here is our page object. (We don't need to change anything to use it in our integration tests!)
+
+```js
+import PageObject, {
+  clickable,
+  fillable,
+  text,
+  visitable
+} from 'frontend/tests/page-object';
+
+export default PageObject.create({
+  visit: visitable('/'),
+
+  username: fillable('#username'),
+  password: fillable('#password'),
+  submit: clickable('button'),
+  error: text('.errors'),
+
+  loginSuccessfully() {
+    return this.username('admin')
+      .password('secret')
+      .submit();
+  },
+
+  loginFailed() {
+    return this.username('admin')
+      .password('invalid')
+      .submit();
+  }
+});
+```
+
+Let's set up our test to use the page object we created.
+
+```js
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+import page from 'frontend/tests/pages/login';
+
+moduleForComponent('login-form', 'Integration | login form', {
+  integration: true,
+
+  beforeEach() {
+    page.setContext(this);
+  },
+
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('calls submit action with correct username and password', function(assert) {
+  assert.expect(2);
+
+  function submit(username, password) {
+    assert.equal(username, 'admin');
+    assert.equal(password, 'secret');
+  }
+
+  this.set('submit', submit);
+
+  page.render(hbs`
+      {{login-form
+        submit=(action submit)
+      }}
+    `)
+    .username('admin')
+    .password('secret')
+    .submit();
+});
+
+test('shows errors', function(assert) {
+  assert.expect(2);
+
+  this.set('error', '');
+
+  page.render(hbs`
+    {{login-form
+      error=error
+    }}
+  `);
+
+  assert.equal(page.error, '');
+
+  Ember.run(() => {
+    this.set('error', 'Invalid credentials');
+  });
+
+  assert.equal(page.error, 'Invalid credentials');
+});
+```
+
+Let's take a look at the changes:
+
+- In the test's `beforeEach()` hook we set the page's test context with `page.setContext(this)`. That tells the page object to use the test's `this.$()` to find elements, instead of Ember's global acceptance test helpers.
+- In the `afterEach()` hook, we call `page.removeContext()` to clear the test context from the page object.
+- We change `this.render()` to `page.render()`. `page.render()` delegates to the test's `this.render()`, but it returns the page object so you can chain other page object methods onto it.
+- The rest of the changes are the same as in our acceptance tests: After you set the test's `this` context on the page object, you can use the page object as before. (The one exception is `page.visit()`, which doesn't work in component tests since we don't have access to a router.)
+
+As in our acceptance tests, we can DRY things up a bit more by grouping actions together into methods that describe specific user flows. For example, in the first test we can use our `page.loginSuccessfully()` method to eliminate a few lines of code:
+
+```js
+test('calls submit action with correct username and password', function(assert) {
+  assert.expect(2);
+
+  function submit(username, password) {
+    assert.equal(username, 'admin');
+    assert.equal(password, 'secret');
+  }
+
+  this.set('submit', submit);
+
+  page.render(hbs`
+      {{login-form
+        submit=(action submit)
+      }}
+    `)
+    .loginSuccessfully();
+});
+```
+
+And that's it! Our integration and acceptance tests are cleaner, more maintainable and easier to read.
+
+## Appendix
+
+A helpful tip is to separate the exports in component page objects. This will allow you to compose larger page objects using the same definitions. For example say we have an integration test of a `my-fanfare` component:
+
+```js
+import PageObject from 'ember-cli-page-object';
+
+const { clickable, isVisible } = PageObject;
+
+export const MyFanfare = {
+  scope: '.ui-my-fanfare',
+  playFanfare: clickable('button'),
+  isCelebrating: isVisible('.fireworks')
+};
+
+export default PageObject.create(MyFanfare);
+```
+
+This separation gives us two `import`-able signatures. In the case of the component's integration test importing the `default` will work as expected:
+
+```js
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import page from 'my-app/tests/pages/components/my-fanfare';
+
+moduleForComponent('my-fanfare', 'Integration | Components | my fanfare', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('it show fireworks when user clicks fanfare button', function (assert) {
+  page.render(hbs`{{my-fanfaire}}`);
+  page.playFanfare();
+  assert.ok(page.isCelebrating, 'expected fireworks to have happened');
+});
+```
+
+Then in the case of an acceptance test where the page object happens to include a `my-fanfare` component we can add that definition to the page object we are using in the acceptance test(s):
+
+```js
+import PageObject from 'ember-cli-page-object';
+import { MyFanfare } from 'frontend/tests/pages/components/my-fanfare';
+
+const { visitable, fillable, clickable } = PageObject;
+
+export default PageObject.create({
+  visit('/');
+  enterName: fillable('input.username'),
+  register: clickable('button.register'),
+  myFanfare: MyFanfare
+});
+```
+
+Which will allow us to reference the `MyFanfare` component from the acceptance test.
+
+```js
+assert.ok(page.myFanfare.isCelebrating, 'expected fireworks to have happened');
+```
+
+Some manipulation could be added (for example picking the first instance only):
+
+```js
+import Ember from 'ember';
+import PageObject from 'ember-cli-page-object';
+import { MyFanfare } from 'frontend/tests/pages/components/my-fanfare';
+
+const { assign } = Ember;
+
+export default PageObject.create({
+  myFanfare: assign({eq: 0}, MyFanfare)
+});
+```
+{% endraw %}

From 14d8b4d3952244512ce9cf9461c2e3896288f0ad Mon Sep 17 00:00:00 2001
From: Ruslan Grabovoy <kudgo.test@gmail.com>
Date: Wed, 18 Oct 2017 22:52:21 +0300
Subject: [PATCH 2/5] add native-dom page

---
 _data/navs.yml             |  2 ++
 docs/v1.13.x/native-dom.md | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 docs/v1.13.x/native-dom.md

diff --git a/_data/navs.yml b/_data/navs.yml
index 71bc2e78..c77324d8 100644
--- a/_data/navs.yml
+++ b/_data/navs.yml
@@ -14,6 +14,8 @@ v1.12.x:
           name: Components
         - path: /extend
           name: Extend page objects
+        - path: /native-dom
+          name: Native DOM Helpers
 
     - title: API reference
       links:
diff --git a/docs/v1.13.x/native-dom.md b/docs/v1.13.x/native-dom.md
new file mode 100644
index 00000000..f2e7d4f2
--- /dev/null
+++ b/docs/v1.13.x/native-dom.md
@@ -0,0 +1,28 @@
+---
+layout: page
+title: Native DOM Helpers
+---
+
+{% raw %}
+By default `ember-cli-page-object` uses global ember test helpers such as `click`, `fillIn`, `find`, etc.
+While it works great this approach has one downside: global ember test helpers require `jQuery` to be bundled within your `Ember` global.
+
+As a result if you want to drop a dependency on `jQuery` in your app or addon you won't be able to use standard `Ember` test helpers.
+
+In order to solve this problem `ember-cli-page-object` provides an integration with [`ember-native-dom-helpers`](https://github.com/cibernox/ember-native-dom-helpers).
+
+In general `native-dom` mode doesn't require you to re-write your existing page object declarations if you don't use `jQuery` directly there. However you should take into account that with `native-dom` mode enabled your test suite starts to trigger a real DOM events instead of `jQuery` alternatives.
+
+## Usage
+
+You can enable `native-dom` mode by simply adding this snippet into your `test-helper.js`:
+
+```js
+// tests/test-helper.js
+import { useNativeDOMHelpers } from 'ember-cli-page-object/extend';
+...
+
+useNativeDOMHelpers();
+```
+
+{% endraw %}

From ff7dc25a43cf66167b4bb36af9c076ddf7baed9e Mon Sep 17 00:00:00 2001
From: Ruslan Grabovoy <kudgo.test@gmail.com>
Date: Tue, 14 Nov 2017 22:24:51 +0200
Subject: [PATCH 3/5] explain ember-native-dom-event-dispatcher

---
 docs/v1.13.x/native-dom.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/v1.13.x/native-dom.md b/docs/v1.13.x/native-dom.md
index f2e7d4f2..855ddd2f 100644
--- a/docs/v1.13.x/native-dom.md
+++ b/docs/v1.13.x/native-dom.md
@@ -25,4 +25,28 @@ import { useNativeDOMHelpers } from 'ember-cli-page-object/extend';
 useNativeDOMHelpers();
 ```
 
+## Migration from jQuery events to native DOM events
+
+### Ember built-in event handlers
+
+If you have defined event handler hooks in your components, like that:
+
+```js
+export default Component.extend({
+    doubleClick() {
+        set(this, "doubleClicked", true);
+        return true;
+    }
+})
+```
+
+It won't work out of the box with native events mode. 
+It happens because by default Ember's event dispatcher handles events via jquery.
+
+In order to fix this you should replace default event dispatcher with `ember-native-dom-event-dispatcher`:
+
+```sh
+npm i --save-dev ember-native-dom-event-dispatcher
+```
+
 {% endraw %}

From 7c70904484b7b2564ac2c0073fcbd5b884d79c07 Mon Sep 17 00:00:00 2001
From: Ruslan Grabovoy <kudgo.test@gmail.com>
Date: Tue, 14 Nov 2017 22:29:10 +0200
Subject: [PATCH 4/5] change native-dom to native-events

---
 _data/navs.yml                                   |  4 ++--
 docs/v1.13.x/{native-dom.md => native-events.md} | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename docs/v1.13.x/{native-dom.md => native-events.md} (71%)

diff --git a/_data/navs.yml b/_data/navs.yml
index c77324d8..858c3c25 100644
--- a/_data/navs.yml
+++ b/_data/navs.yml
@@ -14,8 +14,8 @@ v1.12.x:
           name: Components
         - path: /extend
           name: Extend page objects
-        - path: /native-dom
-          name: Native DOM Helpers
+        - path: /native-events
+          name: Native Events Mode
 
     - title: API reference
       links:
diff --git a/docs/v1.13.x/native-dom.md b/docs/v1.13.x/native-events.md
similarity index 71%
rename from docs/v1.13.x/native-dom.md
rename to docs/v1.13.x/native-events.md
index 855ddd2f..daad794a 100644
--- a/docs/v1.13.x/native-dom.md
+++ b/docs/v1.13.x/native-events.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: Native DOM Helpers
+title: Native Events Mode
 ---
 
 {% raw %}
@@ -11,18 +11,18 @@ As a result if you want to drop a dependency on `jQuery` in your app or addon yo
 
 In order to solve this problem `ember-cli-page-object` provides an integration with [`ember-native-dom-helpers`](https://github.com/cibernox/ember-native-dom-helpers).
 
-In general `native-dom` mode doesn't require you to re-write your existing page object declarations if you don't use `jQuery` directly there. However you should take into account that with `native-dom` mode enabled your test suite starts to trigger a real DOM events instead of `jQuery` alternatives.
+In general `native-events` mode doesn't require you to re-write your existing page object declarations if you don't use `jQuery` directly there. However you should take into account that with `native-dom` mode enabled your test suite starts to trigger a real DOM events instead of `jQuery` alternatives.
 
 ## Usage
 
-You can enable `native-dom` mode by simply adding this snippet into your `test-helper.js`:
+You can enable `native-events` mode by simply adding this snippet into your `test-helper.js`:
 
 ```js
 // tests/test-helper.js
-import { useNativeDOMHelpers } from 'ember-cli-page-object/extend';
+import { useNativeEvents } from 'ember-cli-page-object/extend';
 ...
 
-useNativeDOMHelpers();
+useNativeEvents();
 ```
 
 ## Migration from jQuery events to native DOM events

From 5a0b1c09b028ca77a9c0c5b96ac63c22626f3123 Mon Sep 17 00:00:00 2001
From: Ruslan Grabovoy <kudgo.test@gmail.com>
Date: Sun, 19 Nov 2017 23:24:05 +0200
Subject: [PATCH 5/5] Do not recommend to use mixture of native-events + jquery

---
 docs/v1.13.x/native-events.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/v1.13.x/native-events.md b/docs/v1.13.x/native-events.md
index daad794a..4de27663 100644
--- a/docs/v1.13.x/native-events.md
+++ b/docs/v1.13.x/native-events.md
@@ -27,6 +27,9 @@ useNativeEvents();
 
 ## Migration from jQuery events to native DOM events
 
+It's impossible to listen for an jquery-triggered event in a native DOM mode and vise versa.
+That means if you want to use a native-events mode in your test suite you have to get rid of jquery first.
+
 ### Ember built-in event handlers
 
 If you have defined event handler hooks in your components, like that: