Cypress.io notes

End-to-end test tool which allows writing test for web apps from a user point of view. Open source and free.

Install and Start:

npm install --save-dev cypress

npx cypress open

Sample of test:

simple cypress test

Selecting elements:
The best practice for selecting elements on a page is to use data attribute: data-cy=”unique-value” and then cy.get('data-cy="unique_value"')

For readability use aliases:
cy.get('data-cy="unique_value"').as('some_element') then use cy.get('@some_element')

Select as jQuery element:

Getting dom element and use chai assertion

Use hookbeforeEach(() => {}) to remove repeated code.

Deal with flaky tests:

Example of dealing with flaky tests

Environment variables:
Create:
export CYPRESS_MY_ENV_VAR="hello" or npx open --env MY_ENV_VAR="hello"

Create using cypress.json (env block can be moved to separate file cypress.env.json)

Use:
Cypress.env('MY_ENV_VAR')

Stubs and spies:

Cypress uses the sinon.js library to create test doubles.

using stubs

using spy’s

Other useful commands

Links:

https://www.cypress.io

https://docs.cypress.io