Build Your First Cypress Test

Hello everyone!
My name is Roman Mostafin. I am an automated tester at Clover and usually write autotests in pytest + selenium. Recently, our front-end development team started using Cypress to write tests on the UI on the Smart Locomotive project to automate regression testing. I volunteered to help them and was inspired by this technology. In this article I will talk about Cypress, and how to create my first test on it.

Cypress is a relatively new framework for writing Javascript tests. He deploys his browser and injects tests into the code of the pages.

Cypress has the following advantages:

supports writing modular, integration and end-to-end tests,
has good documentation,
has a friendly and intuitive interface for launching, viewing and debugging,
has useful utilities to make writing tests easier.

As a result, we have a universal and convenient framework for writing various types of tests.

Theory

Writing a test will require six basic functions. Let’s consider them and some arguments for them which are necessary for an example.

1. cy.visit ()

This method is used to go to the application page. As an argument, it takes a string with the address of the application page:

cy.visit(‘http://test.app.com’);

2. cy.get ()

This method is used to get an element from the DOM model of a web page. It takes the following arguments:

element locator – the address at which the element can be found;
timeout – time during which cypress will look for an element on the page (by default it is 4 seconds).

cy.get(‘div[class=”topbar”]’, {timeout: 3000})

3. .type ()

The .type method is used to fill out text forms and various fields. It has the following arguments:

The text to be entered is the text in a string representation. Also, the text may indicate keyboard commands in curly braces;
timeout – delay before the type command is executed.

cy.get(‘input’).type(‘Hello world’, {timeout: 3000})

4. cy.wait ()

This method is used to temporarily stop the execution of commands. It can also be used to wait for HTTP requests to complete. It has the argument timeout – directly the timeout.

cy.wait(3000)

5. cy.fixture ()

This method is used to obtain data for the test. Accepts the name of the json file as input.

6. cy.should ()

Method for checking expression. It accepts the following arguments:

a command for comparison is a condition on which an element will be checked;
Expected Result – The expected result of the check.

Practice

Let’s take the Yandex authorization form and, as an example, we will verify authorization with a non-existent login and authorization with a non-existent password. To do this, make preliminary preparations:

1. Create a new project folder.
2. Go to the project folder and execute the command to install Cypress:

npm install cypress --save-dev

3. Run the cypress command:

npx cypress open

4. After starting, make sure that the following hierarchy appears in the project directory:

Now you need to create a fixture. We need it in order to separate the test data from the test itself.
1. Create a ‘cypressTest.json’ file in the ‘fixtures’ folder with the following contents:

2. Next, in the ‘integration’ folder, create a file called ‘habr_cypress_test.spec.js’:

3. We make a description of the entire test case using the ‘describe’ function:

4. Inside the ‘describe’ function, we will create our tests. Write the title of the first
test:

5. The next step is to write a data call from fixture:

And finally, we create the test itself, using knowledge of the features of Cypress.

By analogy, we create the second test.

Go to the Cypress application, find our test and click on its name

Next, the page of the browser running Cypress will open, and the test will start: the detailed steps of the process can be seen on the left in a separate column. You need to wait for the test to complete.