Why Cypress?
Cypress executes test cases directly inside the browser. On the contrary, Selenium runs outside the browser and sends commands to the WebDriver component to execute them. That’s why Cypress tests have really high-speed response time (less than 20ms). There are no additional dependencies or libraries needed, Cypress is a self-contained tool. It comes with a whole testing and debugging experience. It is equipped with real-time reload, option to debug directly in DevTools, which makes the testing process similar to the process of web development. To complete testing experience, Cypress furnishes a test recording feature, so the tester is able to examine the code during and after the test execution and investigate automatic screenshots at runtime on failure. During the test development itself, Cypress provides predefined intuitive and concise commands, which is a perfect fit for small projects.
Installation
In this article we will write our first test in Cypress. But first, we need to install several packages.
First of all, you need to have npm installed. If the installation is necessary for you, follow the steps at
https://phoenixnap.com/kb/install-node-js-npm-on-windows. To check whether the process was successful, use command “npm -v”, to find out what version of npm has been introduced.
However, let’s move on to Cypress installation.
Open your IDE and type in command “npm install -g cypress”
Note that specific project structure is required to have cypress installed correctly. To obtain that, there are 3 options:
– use “npm init” command
– have a node_modules folder
– A package.json file existent.To launch Cypress Test Runner type in command “cypress open”
There is also an option to install cypress locally as a dev dependency for a specific project. You would take these steps then:
navigate to your project folder
use command npm install cypress –save-dev
launch cypress: ./node_modules/.bin/cypress open OR npx cypress open
The result is launched Cypress Test Runner containing all written cypress tests. For now, there are only example tests available. To launch one, click on the test name.
Test execution window consists of different sections. On the left there is a command log [1], giving us information about the steps taken in the test and the assertion. Above the command log, there is a test status menu [2]. It informs us about the number of passing and failing tests, as well as the time it took to execute the test. On the right there is an application preview [3] showing what the web page currently looks like.
Nevertheless, besides the way of running tests in browser mode, there is also a possibility to run your tests in the background and acquire the summary of tests execution. To obtain that, use the command: “npx cypress run –browser firefox” or “npx cypress run –browser firefox:dev” for Cypress installed locally. Note that you are able to test on various web browsers e.g. for Chrome replace last word in your command with “chrome”.
Having the execution completed, there should be a test summary visible.
This method of test execution is a great fit for regression tests, as we would like to examine, if created tests are still passing, while developing new features in our project.
Writing first test
Now, we will write our first test.
Create a sample_spec.js file in /integration folder. Introduce following code:
In this test we wanted to check the behavior of the “type” button in the web page. The expected result here is the redirection to a new URL.
describe() helps us group related tests together
cy is a global object accessing the cypress commands;
cy.visit(‘url’) allows us to go to url page
cy.contains(‘type’).click() – searches for an element containing string “type” and clicks it
The last command is an assertion. By clicking the element we’ve entered a new page. The assertion is checking whether the new url contains the string “/commands/actions”. Assertion is made with a keyword should().
Now we will try to write a new test. We will navigate to https://example.cypress.io/commands/actions page and test if there is a possibility to fill in the email field.
Inside the describe(){} brackets, let’s introduce a new test.
cy.get() searches for an element on a page by class “.action-email”
.type() types in data – “fake@email.com” in the found element
.should(‘have.value’, ‘x’) – assertion for a field having value x
When we run our tests we can see that they ended with success. We have successfully typed in an email address.
If the test fails, it will show us more info about the failure and will color failing steps red. Let’s see how it will behave if we try to fail the test.
Change expected result to nonexistent value, e.g.:
What we are expecting to happen is the test to fail.
We can observe how the behavior of Test Runner changed. It showed us that one of our tests had failed. Moreover, it threw an error with a clear information:
“expected ‘<input#email1.form-control.action-email>’ to have value ‘fake1@email.com’, but the value was ‘fake@email.com’”
Very clear and easy to understand error, right?
What Cypress gives us in advance, is the snapshots of the steps taken, so that we can instantly debug the test. If we hover over the command in the command log it will show us the snapshot of steps taken. We may also pin a certain step to do further research. There is an option to see the snapshot before and after the step was executed. We could also search for further information launching DevTools (F12) while having the particular step pinned. It would provide some more detailed contextual information.
Moreover, in our test, there were some additional comments added by Cypress, including most important events happening between the steps. In our example we can see that the click of the element caused the redirection to a new url.
There are some more ways to debug our test. One of them is by using command cy.pause():
When we run such a test it will pause and allow us to take the next step or resume the test.
Additionally, as you may have noticed already, having some changes in code made and saved the file, Cypress is automatically reloading the Test Runner, so this is convenient in the process of development.
As a bonus, let’s run tests in the background. As you may remember, it is supposed to use the command “npx cypress run –browser firefox” inside our IDE terminal. While having a failing test, the results of test execution would show errors.
We can observe that Cypress automatically has made a screenshot of a failing behavior.
However, if we fix the assertion:
the test execution will show success.
Summary
To sum up, in this article, we have written our first test and executed it. Hooray! Wasn’t complicated, right? Cypress is a very fast and lightweight tool for testing, so writing a basic test is easy as 1, 2, 3.
What surprised me the most about Cypress as a tester is the way that it is dealing with the testing process. Thanks to its real-time reload and compilation on localhost, it is more similar to the frontend programming process. What’s more, there are few code lines to write, to have the test working. The global cy. object containing access to all commands and elements on the page is making the test performance clear.
However, there are lots of things more to discover, so keep moving and get to know Cypress more.
Useful links:
https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install
https://docs.cypress.io/guides/getting-started/writing-your-first-test
