Cypress tips

Fast, easy and reliable testing for anything that runs in a browser.

Let's start with a few tips around cypress. This will be a short and crisp list that can be quickly referenced when working on a project that uses cypress:

1) npx cypres open : This brings up cypress folder structure along with the example tests. Any tests written henceforth will start showing up.

2) /// <reference types="Cypress" />: This when included as the first line in a spec file will enable IntelliSense when typing a cypress command.

3) 

To access what each Cypress command yields you use .then(). As below:

4) Using .each() and putting assertions in the loop. For instance 

Output:

Add caption

5) cy.contains() : One of the good ways of locating an element.

            e.g.  cy.contains('a.nav-link','Register').click() // Locates a link with class 'nav-link' that contains text 'Register'

6) Assertions: 

    Chai BDD assertions : expect/should

    TDD: assert

    Chai-jQuery: These chainers are available when asserting about a DOM object. Commonly use these chainers after using DOM commands like: cy.get(), cy.contains()

    Sinon-Chai: These chainers are used on assertions with cy.stub() and cy.spy().

7) cy.location(): To check that the application has navigated to the correct page:

This is same as :

8) For best possible retry-ability of cypress in querying the DOM, follow a command by an assertion

9) .find() :Get the descendent DOM elements of a specific selector. .find() requires being chained off a command that yields DOM element(s)

let searchResult =c.find('div span').text();  is same as

let searchResult =c.children().children().text();

10) Playground: You can use the playground to experiment with the selectors

   

11)  

                               readers.should('expect','this page to be updated regularly')