Cypress Page Object

Represent the screens of your website as a series of objects in your Cypress test suite. This library addon eases the construction of these objects for your acceptance/integration/end to end tests.

Table of content

Quick Start
What is a Page Object?
API
Development
License

Quick Start

Install the library using npm

$ npm install --save-dev cypress-page-object

After installing the library you can create a page object inside your project.

Let's assume the website you want to test has a http://example.com/login.html page, we can test a failed login. Create a new integration and define a page object as follows.

import { page, visitable, fillable, clickable } from "cypress-page-object";

const loginPage = page({
  visit: visitable('/login'),
  fillUsername: fillable('#username'),
  fillPassword: fillable('#password'),
  submit: clickable('[type="submit"]'),

  errorMessage() {
    return cy.get('.error-message');
  }
});

context('My Awesome WebSite', () => {

  it('logs into the website', () => {
    loginPage
      .visit()
      .fillUsername('[email protected]')
      .fillPassword('wrong password')
      .submit()
      .errorMessage()
      .should('contain', 'Wrong username and password');
  });

});

As you can see, by having a page object we extract away the CSS selectors from the test making it more readable.

What is a Page Object?

An excerpt from the Selenium Wiki

Within your web app's UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place.

The pattern was first introduced by the Selenium

You can find more information about this design pattern here:

API

`page`

Creates a new page object. The new page object contains some utilities to make your tests a bit more DRY and easier to read.

Example

import { page, visitable, fillable, clickable } from "cypress-page-object";

const loginPage = page({
  visit: visitable('/login'),
  fillUsername: fillable('#username'),
  fillPassword: fillable('#password'),
  submit: clickable('[type="submit"]'),

  errorMessage() {
    return cy.get('.error-message');
  }
});

context('My Awesome WebSite', () => {

  it('logs into the website', () => {
    loginPage
      .visit()
      .fillUsername('[email protected]')
      .fillPassword('wrong password')
      .submit()
      .errorMessage()
      .should('contain', 'Wrong username and password');
  });

});

You can add any property to your page object and they will be accessible from your tests.

import { page } from "cypress-page-object";

const loginPage = page({});

loginPage.should('contain', 'My text');

`clickable`

Clicks a button or input

Example

import { page, clickable } from "cypress-page-object";

const login = page({
  submit: clickable('button[type="submit"]')
});

login.submit();

Parameter	Type	Description
`selector`	string	CSS selector of the element to click

`fillable`

Fills an input with text

Example

import { page, fillable } from "cypress-page-object";

const login = page({
  username: fillable('input#username')
  password: fillable('input#password')
});

login
  .username("[email protected]")
  .password("secret");

Parameter	Type	Description
`selector`	string	CSS selector of the input element
`options`	object	Additional options
`options.isHidden`	boolean	True to force write hidden inputs

`visitable`

Loads a page

Example

import { page, visitable } from "cypress-page-object";

const login = page({
  visit: visitable('/login')
});

login.visit();
cy.url().should('include', '/form')

Parameter	Type	Description
`path`	string	Full path of the page to load

Development

TBA

License

cypress-page-object is licensed under the MIT license.

See LICENSE for the full license text.

san650 / cypress-page-object Goto Github PK