Cypress

What is

  • A testing tool that simulates a user interacting directly with the software`s front-end.
  • The tests are created with Javascript e and can be run with the Cypress visual interface or by command lines.
  • By under the table, Cypress uses the DOM's events, therefore is a tool with a great performance.
  • Uses standard Mocha syntax.

How to use

  • Install Cypress running npm install cypress besides adding Cypress to the project, this command will download the Cypress executable and configure the project.
  • After that, you can run Cypress with the commands below. (add a script in package.json to make it easier):
# Open the Cypress visual interface
node_modules/.bin/cypress open
# or
npx cypress open

# Run the tests directly on the terminal (just to see)
node_modules/.bin/cypress run

The front-end must be running at this point because his access is by URL not by code.

Writing tests

  • In a simple way, we can write awesome tests.

    // cypress/integration/example.spec.js
describe("An awesome test", () => {
  it("the test", () => {
    cy.visit("your-page-url");
    cy.get("selector-of-the-element-on-screen").type("random text");
  });
});

  • In that way, we wrote on an element at the screen (in this case an input, textarea ou something like this).

  • If the open command is running, when you save this file the test starts in the browser tab created by Cypress.

Common practices

  • Create commands for repetitive functions

It is common for tests to repeat some sequence of steps in common. It is possible to create customized cypress commands to improve this process. These commands must be created in the file cypress/support/commands.js. For example, to log in:

Cypress.Commands.add("login", () => {
  cy.visit("http://localhost:3000/login");

  cy.get("#input-login").type("email@email.com");
  cy.get("#input-password").type("password");

  cy.get("#login-button").click();
});
// This command can be used in tests like cy.login();
  • Commands before and beforeEach

In each test specification, it is possible to add commands such as before and beforeEach that will be executed before each test defined in the file. For example:

beforeEach(() => {
    cy.login();
});
  • Upload images

Using a library cypress-file-upload it is possible to perform tests that upload images. After installing the library, just import it into the file cypress/support/commands.js and use the command cy.get("input[type=file]").attachFile("img/person.jpg") to attach files or fixtures during the tests.

  • Iterate through multiple elements on the screen

When it is necessary to access several elements by the same selector, the command .each() allows iterating through these elements. Example:

// select the first option between all the selects in the screen
cy.get("select").each(select => {
     cy.get(select)
          .children("option")
          .eq(1)
          .invoke("val")
          .then(val => {
            cy.get(select).select(val);
     });
});
  • HTML attributes

When selecting elements in tests, we use HTML properties such as id, class, or element name. A good practice is to add the data-cy attribute to important elements to ensure that the test works regardless of changes in the placement or style of the elements. For example:

<div data-cy="important-div" id="div-id" class="div-class">This is a div!<div>

And in the test, we can obtain this element as follows:

cy.get(`[data-cy=important-div]`);
  • Get text from elements

Sometimes we need to validate that the text displayed in a certain element is correct. To do so we can use the function text(). For example, we can obtain the div text from the previous example with the following command:

cy.get(`[data-cy=important-div]`).then(($div) => $div.text()));
// $div.text() returns "This is a div!"
  • Automation plugins

There are some plugins for browsers that allow you to record the actions taken by the developer, generating cypress commands automatically. One is the Cypress Recorder.

How to learn

Useful material

Validating knowledge

  • Cypress comes with a list of examples that accesses the docs itself and make some actions. Take a look at those examples, find the patterns and good practices.
  • Start a project with Cypress, make a login into some dashboard, make some CRUD's simple operations.

Useful commands

  • node_modules/.bin/cypress open - Cypress graphic interface
  • node_modules/.bin/cypress run - CLI, commonly used at CI

Possible problems

...

← NetlifyJest →