### Install ember-cli-page-object Project

Source: https://github.com/san650/ember-cli-page-object/blob/master/CONTRIBUTING.md

Steps to clone the ember-cli-page-object repository and install its dependencies using pnpm. This is the initial setup required for local development.

```bash
git clone https://github.com/san650/ember-cli-page-object.git
cd ember-cli-page-object
pnpm install
```

--------------------------------

### Install Ember CLI Page Object Addon

Source: https://github.com/san650/ember-cli-page-object/blob/master/README.md

Installs the `ember-cli-page-object` addon into an Ember CLI project using the `ember install` command, which handles dependencies and blueprints.

```sh
$ ember install ember-cli-page-object
```

--------------------------------

### Install ember-cli-page-object via Ember CLI

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/installation.md

Installs the ember-cli-page-object addon into an Ember.js project using the Ember CLI command-line interface. This command adds the necessary dependencies and configurations to your project.

```bash
$ ember install ember-cli-page-object
```

--------------------------------

### Publish npm Package

Source: https://github.com/san650/ember-cli-page-object/wiki/How-to-release-a-new-version

Authenticates with the npm registry and publishes the package. Includes an example for publishing pre-release versions (alpha/beta) by specifying a tag during the publish command.

```bash
$ npm login
Username: your_npm_username
Password:
Email: (this IS public) your_email@example.com
```

```bash
$ npm publish
```

```bash
$ npm publish --tag beta
```

--------------------------------

### Install Ember CLI Page Object NPM Package

Source: https://github.com/san650/ember-cli-page-object/blob/master/README.md

Installs the `ember-cli-page-object` package directly as a development dependency using npm, suitable for projects that manage dependencies manually or integrate with other build systems.

```sh
$ npm install --save-dev ember-cli-page-object
```

--------------------------------

### Generate a New Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/README.md

Uses the `ember generate` command with the `page-object` blueprint to create a new page object file, for example, `tests/pages/users.js`, streamlining the setup of new page objects.

```sh
$ ember generate page-object users

installing
  create tests/pages/users.js
```

--------------------------------

### Run Test Application in Development Mode

Source: https://github.com/san650/ember-cli-page-object/blob/master/CONTRIBUTING.md

Command to start the test application in watch mode, allowing it to pick up changes made to the addon during development. The application is typically accessible via a local server.

```bash
pnpm start
```

--------------------------------

### HTML Form Example for Component Definition

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Illustrates a simple HTML form structure that will be targeted by Ember CLI Page Object definitions.

```html
<form class="awesome-form">
  <input id="firstName" placeholder="First name">
  <input id="lastName" placeholder="Last name">
  <button>Create</button>
</form>
```

--------------------------------

### Example HTML for SearchForm Component

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

Illustrates a simple HTML structure for a search form with an input field and a submit button, serving as the target for subsequent page object definitions.

```html
<form class="search-form">
  <input type="search">
  <button>Search</button>
</form>
```

--------------------------------

### API Documentation and Example for findMany Method

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

Documents the `findMany` method, designed for locating multiple elements within a page object. It takes a page object node, a CSS selector, and options for filtering and scoping, similar to `findOne` but for collections. The example shows how to create a custom `count` helper using `findMany` to get the number of matching elements.

```APIDOC
findMany:
  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.visible: boolean - Filter by using :visible pseudo-class
      options.testContainer: String - Context where to search elements in the DOM
      options.pageObjectKey: String - Used in the error message when the element is not found
```

```javascript
import { findMany } from 'ember-cli-page-object/extend';
import { getter } from 'ember-cli-page-object/macros';

export default function count(selector, options = {}) {
  return getter(function() {
    return findMany(this, selector, options).length;
  });
}
```

--------------------------------

### Generate a new Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

This command uses the Ember CLI generator to create a new page object file within the `tests/pages` directory. This file serves as the starting point for defining interactions and elements on a specific application page.

```bash
ember generate page-object search-page
```

--------------------------------

### Example: Creating a `isDisabled` helper using `findElement`

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

This JavaScript example demonstrates how to create a reusable helper function, `isDisabled`, that leverages `findElement` to check if an element matching a given selector is disabled within the page object context.

```javascript
import { findElement } from 'ember-cli-page-object/extend';
import { getter } from 'ember-cli-page-object/macros';

export default function isDisabled(selector, options = {}) {
  return getter(function() {
    return findElement(this, selector, options).is(':disabled');
  });
}
```

--------------------------------

### API Documentation and Example for findOne Method

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

Documents the `findOne` method, a helper for locating a single element within a page object. It accepts a page object node, a CSS selector, and various options for filtering, scoping, and error messaging. The example demonstrates creating a custom `isDisabled` helper using `findOne`.

```APIDOC
findOne:
  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.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
```

```javascript
import { findOne } from 'ember-cli-page-object/extend';
import { getter } from 'ember-cli-page-object/macros';

export default function isDisabled(selector, options = {}) {
  return getter(function() {
    return findOne(this, selector, options).disabled;
  });
}
```

--------------------------------

### Extend Ember Page Object with Collections, Components, and Custom Methods

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

This example demonstrates how to enhance a page object definition. It includes importing `collection` for defining lists of elements, integrating a nested `SearchForm` component, and adding an asynchronous `search` method to encapsulate higher-level user interactions, returning a collection of results.

```js
// my-app/tests/pages/my-page.js
import { create, visitable, collection } from 'ember-cli-page-object';
import SearchForm from 'my-app/tests/pages/components/search-form';

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

  results: collection('ol li article'),

  searchForm: SearchForm,

  /**
   * Note, we can also declare native methods on definitions,
   * in order to provide higher level APIs for tests
   */
  async search(text) {
    await this.searchForm.text.fillIn(text);
    await this.searchForm.submit();

    return this.results;
  }
});
```

--------------------------------

### API Documentation and Example for findElementWithAssert Method (Deprecated)

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

Documents the `findElementWithAssert` method, which is being deprecated in favor of `findOne` in the v2 series. It's used to find an element with assertion capabilities, accepting similar parameters to `findOne` for selection and filtering. The example demonstrates its usage in a custom helper to check if an element is disabled.

```APIDOC
findElementWithAssert:
  Note: Deprecated in v2 series, migrate to findOne.
  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
```

```javascript
import { findElementWithAssert } from 'ember-cli-page-object/extend';
import { getter } from 'ember-cli-page-object/macros';

export default function count(selector, options = {}) {
  return getter(function() {
    return findElementWithAssert(this, selector, options).is(':disabled');
  });
}
```

--------------------------------

### Example: Using `isDisabled` helper in a Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

This JavaScript snippet shows how to integrate the `isDisabled` helper into an Ember Page Object definition, demonstrating its practical application for checking element states.

```javascript
const page = create({
  scope: '.page',

  isAdmin: disabled('#override-name')
});
```

--------------------------------

### Define Scope for Element Selection in Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/options.md

The `scope` option allows nesting of a provided selector within an inherited scope. This example demonstrates how to use `scope` to target a specific element, like a footer, within a larger page structure, ensuring precise element selection.

```html
<div class="page">
  <div class="article">
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="footer">
    <p>Copyright 2016 - Acme Inc.</p>
  </div>
</div>
```

```javascript
const { create, text } = 'ember-cli-page-object';

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

  copyrightNotice: text('p', { scope: '.footer' })
});

andThen(function() {
  assert.equal(page.copyrightNotice, 'Copyright 2015 - Acme Inc.');
});
```

--------------------------------

### Override Inherited Scope with 'resetScope' in Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/options.md

Used in conjunction with the `scope` option, `resetScope` allows overriding the inherited scope of a component or property with a new value defined on the `scope` property. This example shows how to select an element that is outside the initially defined parent scope.

```html
<div class="scope">
  <span>ipsum</span>
  <span>dolor</span>
</div>
<div class="outside-scope">
  <span>Lorem</span>
</div>
```

```javascript
import { create, text } from 'ember-cli-page-object';

const page = create({
  scope: '.scope',
  outsideWord: text('span', { scope: 'outside-scope', resetScope: true })
});

andThen(function() {
  assert.equal(page.outsideWord, 'Lorem'); // => ok
});
```

--------------------------------

### Execute Project Test Suite

Source: https://github.com/san650/ember-cli-page-object/blob/master/CONTRIBUTING.md

Commands to run the project's test suite. This includes options for running tests in watch mode, building the addon, and testing against multiple Ember versions to ensure compatibility.

```bash
cd addon && pnpm start
```

```bash
pnpm test
```

```bash
pnpm test -- --server
```

```bash
cd test-app && ember try:each
```

--------------------------------

### Build Documentation Site

Source: https://github.com/san650/ember-cli-page-object/wiki/How-to-release-a-new-version

Executes the npm build script defined in the project's package.json to compile and generate the static documentation files, preparing them for deployment.

```bash
npm run build
```

--------------------------------

### Creating and Using a Page Object Instance

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Demonstrates how to instantiate a page object definition using the `create` function and interact with its defined elements and actions in an asynchronous test flow.

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

const form = create(FormDefinition);

await form
  .firstName('John')
  .lastName('Doe')
  .submit();
```

--------------------------------

### Navigate to Documentation Directory

Source: https://github.com/san650/ember-cli-page-object/wiki/How-to-release-a-new-version

Changes the current working directory to the 'docs' folder, which is a prerequisite step before generating or building the project's documentation site.

```bash
$ cd docs/
```

--------------------------------

### Basic Robots.txt Configuration for Full Access

Source: https://github.com/san650/ember-cli-page-object/blob/master/test-app/public/robots.txt

This snippet provides a standard robots.txt configuration that permits all web crawlers (User-agent: *) to access all content on the website. The empty 'Disallow:' directive indicates no restrictions.

```Robots.txt
# http://www.robotstxt.org
User-agent: *
Disallow:
```

--------------------------------

### Ember.js Application Root Template Structure

Source: https://github.com/san650/ember-cli-page-object/blob/master/test-app/app/index.html

This snippet illustrates the fundamental structure of an Ember.js application's main template file (e.g., `app/index.html`). It utilizes `{{content-for}}` helpers, which are Ember CLI specific placeholders, to dynamically inject content such as meta tags, stylesheets, and scripts into the `<head>` and `<body>` sections during the build process. This ensures proper integration of assets and addons into the final HTML output.

```Ember Template
TestApp   {{content-for "head"}}   {{content-for "head-footer"}} {{content-for "body"}} {{content-for "body-footer"}}
```

--------------------------------

### Push Code and Tags to GitHub

Source: https://github.com/san650/ember-cli-page-object/wiki/How-to-release-a-new-version

Pushes local master branch changes and associated Git tags to the remote GitHub repository, ensuring that release tags created by 'npm version' are synchronized.

```bash
$ git push origin master --follow-tags
```

--------------------------------

### Generate Ember Page Object Component

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

Command line instruction to generate a new page object component file using the Ember CLI generator for `ember-cli-page-object`, creating the necessary file structure.

```bash
$ ember generate page-object-component search-form

installing
  create tests/pages/components/search-form.js
```

--------------------------------

### Run Linting Checks for Code Quality

Source: https://github.com/san650/ember-cli-page-object/blob/master/CONTRIBUTING.md

Commands to perform linting checks across the project's packages. The 'lint:fix' command can automatically resolve many common code style issues.

```bash
pnpm lint
```

```bash
pnpm lint:fix
```

--------------------------------

### Defining Actions with Fillable and Triggerable

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Demonstrates how to define asynchronous actions like `fillIn` and `submit` using `fillable` and `triggerable` helpers. These actions perform DOM operations and return chainable page object nodes.

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

const form = create({
  scope: 'form.search-form',

  fillIn: fillable('input[type="search"]'),

  submit: triggerable('submit')
})

await form.fillIn('some text');
await form.submit();
```

--------------------------------

### Default Ember Page Object Structure

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

This JavaScript snippet shows the basic structure of a newly generated page object. It imports `create` and `visitable` from `ember-cli-page-object` and exports a default page object instance configured to visit a specific URL.

```js
// my-app/tests/pages/my-page.js
import { create, visitable } from 'ember-cli-page-object';

export default create({
  visit: visitable('/')
});
```

--------------------------------

### Increase Project Version Number

Source: https://github.com/san650/ember-cli-page-object/wiki/How-to-release-a-new-version

Navigates into the addon directory and increments the project's version number using npm, typically for a minor release, which updates package.json and creates a Git tag.

```bash
$ cd addon && npm version minor
```

--------------------------------

### HTML Structure for Scope Demonstration

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Provides a simple HTML structure with nested `div` and `p` elements to illustrate how `scope` attributes in page objects target specific DOM elements.

```html
<div class="article">
  <p>Lorem ipsum dolor</p>
</div>
<div class="footer">
  <p>Copyright Acme Inc.</p>
</div>
```

--------------------------------

### Integrate and Use Page Object in Test

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

Demonstrates how to import and instantiate a defined page object component within an Ember integration test. It shows rendering a component and then using the page object to assert element visibility and input values.

```javascript
// my-app/tests/integration/components/search-form-test.js
import { create } from 'ember-cli-page-object';
import SearchForm from 'my-app/tests/pages/components/search-form';

const searchForm = create(SearchForm);

module('SearchForm', // ...
  test('it renders', async function(assert) {
    await render(hbs`<SearchForm @text="initial text" />`);

    // using the default `isVisible` attribute, checks that `.search-form` is displayed
    assert.ok(searchForm.isVisible);

    // using the default `value` attribute, check the input value of `.search-form input[type=`search"]"
    assert.equal(searchForm.text.value, 'initial text');
  });
```

--------------------------------

### findElement API Parameters

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/extend.md

Defines the parameters accepted by the `findElement` utility function, including its main arguments and various options for filtering and scoping elements within the DOM.

```APIDOC
findElement:
  Parameters:
    - name: pageObjectNode
      type: Ceibo
      description: Node of the tree
    - name: targetSelector
      type: string
      description: Specific CSS selector
    - name: options
      type: Object
      description: Additional options
      properties:
        - name: resetScope
          type: boolean
          description: Do not use inherited scope
        - name: contains
          type: string
          description: Filter by using :contains('foo') pseudo-class
        - name: at
          type: number
          description: Filter by index using :eq(x) pseudo-class
        - name: last
          type: boolean
          description: Filter by using :last pseudo-class
        - name: visible
          type: boolean
          description: Filter by using :visible pseudo-class
        - name: multiple
          type: boolean
          description: Specify if built selector can match multiple elements.
        - name: testContainer
          type: String
          description: Context where to search elements in the DOM
```

--------------------------------

### Default Component Attributes Reference

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

A list of commonly used attributes automatically included in every Ember CLI Page Object component, providing wrappers around low-level DOM operations to reduce boilerplate.

```APIDOC
Default Attributes:
- as
- blur
- click (from clickable)
- clickOn (from click-on-text)
- contains
- fillIn (from fillable)
- focus
- isHidden
- isPresent
- isVisible
- select (from selectable)
- text
- value
```

--------------------------------

### Ember Acceptance Test Using Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

This snippet illustrates how to use a defined page object within an Ember acceptance test. It imports the page object, navigates to the page using `visit()`, performs an action via a custom page object method (`search()`), and then asserts the outcome based on the returned results.

```js
// my-app/tests/acceptance/my-page-test.js
import myPage from 'my-app/tests/pages/my-page';

module('Search Page', // ...
  test('it works', async function(assert) {
    await myPage.visit();

    const results = await myPage.search('some');

    assert.equal(results.length, 1);
    assert.ok(results[0].contains('Awesome search result!'));
  })
```

--------------------------------

### Define and Use a Page Object in Ember.js Tests

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/index.md

This JavaScript code snippet demonstrates how to define a page object using `ember-cli-page-object` and then utilize it within an Ember.js test. It showcases the use of `create`, `visitable`, `fillable`, `clickable`, and `text` helpers to define page elements and actions declaratively. The subsequent test function illustrates how to interact with the page object methods to simulate user actions and assert outcomes, simplifying DOM manipulation and improving test readability.

```javascript
import {
  create,
  visitable,
  fillable,
  clickable,
  text
} from 'ember-cli-page-object';

const page = create({
  visit: visitable('/'),

  username: fillable('#username'),
  password: fillable('#password'),
  submit: clickable('button'),
  error: text('.errors')
});

test('my awesome test', async function(assert) {
  await page
    .visit()
    .username('admin')
    .password('invalid')
    .submit();

  assert.equal(page.error, 'Invalid credentials');
});
```

--------------------------------

### Composing Page Objects for Complex Interfaces

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Shows how to build complex page objects by nesting simpler definitions. This approach allows for hierarchical interaction with different sections of a web page.

```javascript
import { create, visitable } from 'ember-cli-page-object';

const PageDefinition = {
  visit: visitable('/users/new'),

  form: FormDefinition
}

const myPage = create(PageDefinition);

await myPage.visit()
  .form
  .firstName('John')
  .lastName('Doe')
  .submit();
```

--------------------------------

### Perform Actions with Page Object in Test

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

Illustrates how to interact with a page object component by performing actions like `fillIn` on a text input and `submit` on a button within an Ember integration test, and then asserting the outcome of these user interactions.

```javascript
  test('using actions', async function(assert) {
    let lastSearched;
    this.search = (text) => lastSearched = text;

    await render(hbs`<SearchForm onSubmit={{action search}} />`);

    await searchForm.text.fillIn('new text');
    await searchForm.submit();

    assert.deepEqual(lastSearched,  'new text' )
  });
```

--------------------------------

### Define Ember Page Object Component

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

JavaScript definition for the `search-form` page object component. It specifies the component's root scope, defines a nested element for the text input, and includes a `triggerable` action for the submit button, leveraging `ember-cli-page-object`.

```javascript
// your-app/tests/pages/components/search-form.js
import { triggerable } from 'ember-cli-page-object';

export default {
  scope: '.search-form',

  text: { scope: 'input[type="search"]' },

  submit: triggerable('submit')
};
```

--------------------------------

### Chaining Page Object Actions

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/quickstart.md

Compares sequential, non-chained action calls with chained action calls on a page object. It highlights how chaining improves readability and conciseness when performing multiple operations on the same page object element.

```javascript
  await searchForm.text.fillIn('test')
  await searchForm.text.blur()
```

```javascript
  await searchForm.text
    .fillIn('test')
    .blur();
```

--------------------------------

### Applying Scope to Page Object Definitions

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Illustrates how the `scope` attribute is used to define the root CSS selector for a component and how nested scopes are resolved to form a complete selector for child elements.

```javascript
const page = create({
  scope: '.article',

  textBody: {
    scope: 'p'
  }
});

assert.equal(page.textBody.text, 'Lorem ipsum dolor.');
```

--------------------------------

### Define Page Object with Custom Methods and Getters

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

This JavaScript snippet illustrates the definition of a `MyForm` page object using `ember-cli-page-object`. It showcases how to declare elements using `collection` and direct scope, and crucially, how to embed an asynchronous `submit` function for form interaction and a synchronous `errorMessages` getter for data transformation, providing a higher-level interface for tests.

```javascript
import { collection } from 'ember-cli-page-object';

const MyForm = {
  errors: collection('ul.errors > li'),

  title: {
    scope: '#firstName'
  },

  description: {
    scope: '#lastName'
  },

  submitButton: {
    scope: 'button'
  },

  async submit(data) {
    await this.title.fillIn(data.username)
    await this.description.fillIn(data.password)

    return this.submitButton.click();
  },

  get errorMessages() {
    return this.errors.map((e) => e.text);
  }
}
```

--------------------------------

### Ember CLI Page Object Form Definition

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Defines a page object for the HTML form, using `clickable` and `fillable` helpers to interact with form elements. This definition maps DOM elements to page object properties and actions.

```javascript
import {
  clickable,
  fillable
} from 'ember-cli-page-object';

const FormDefinition = {
  scope: '.awesome-form',

  firstName: fillable('#firstName'),
  lastName: fillable('#lastName'),
  submit: clickable('button')
};
```

--------------------------------

### Select Element by Index with 'at' Option in Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/options.md

The `at` option is used to reduce the set of matched elements to the one at the specified zero-based index. This snippet illustrates how to select a specific `<span>` element from a group based on its position, ensuring unique element targeting.

```html
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
```

```javascript
import { create, text } from 'ember-cli-page-object';

const page = create({
  word: text('span', { at: 1 })
});

andThen(function() {
  assert.equal(page.word, 'ipsum'); // => ok
});
```

--------------------------------

### Using the Value Attribute with Default Scope

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Shows how the `value` attribute queries a DOM element based on the component's default `scope` to retrieve its `value` property. This simplifies interaction with input fields.

```javascript
import { create, value } from 'ember-cli-page-object';

const input = create({
  scope: 'input[name="my-input"]',

  value: value()
})

assert.equal(input.value, 'some value');
```

--------------------------------

### Allow Multiple Element Matches with 'multiple' Option in Ember Page Object

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/options.md

By default, `ember-cli-page-object` throws an error if a selector matches more than one element. The `multiple` option overrides this behavior, allowing the lookup to return an array of all matched elements. This is useful when expecting a collection of elements.

```html
<span>Lorem</span>
<span>ipsum</span>
```

```javascript
import { create, text } from 'ember-cli-page-object';

const page = create({
  words: text('span', { multiple: true })
});

andThen(function() {
  assert.deepEqual(page.word, ['Lorem', 'ipsum']); // => ok
});
```

--------------------------------

### Using the Text Attribute with a Specific Selector

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Illustrates how to pass a specific CSS selector as an argument to an attribute (e.g., `text`). This allows querying a child element within the component's defined scope, providing more granular control.

```javascript
import { create, text } from 'ember-cli-page-object';

const customSelect = create({
  scope: '.my-select',

  value: text('.selected')
})

assert.equal(customSelect.value, 'some value');
```

--------------------------------

### Overriding Parent Scope with resetScope

Source: https://github.com/san650/ember-cli-page-object/blob/master/docs/guides/components.md

Demonstrates how to use `resetScope: true` on a nested component definition. This prevents the component from inheriting its parent's scope, allowing it to target elements globally or from the document root.

```javascript
const form = create({
  scope: '.my-form',

  dialog: {
    scope: '.some-dialog',

    resetScope: true
  }
});

await form.clickOn('Cancel');

assert.ok(form.dialog.isVisible);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.