DEV Community

Cover image for 10 reasons why you should use Cypress for web testing automation

Posted on • Updated on

10 reasons why you should use Cypress for web testing automation

Why you should consider Cypress in your technology stack is a modern automated testing framework and is becoming increasingly popular in the IT market.

Out of ignorance, we end up thinking that it is just another testing framework and that it will soon pass and another one will come to replace it.

I thought so, too, until I gave it a try in mid-2019, and since then, I have been using Cypress successfully on different software projects. Also, I have received great feedback from my students at the Talking About Testing School, who are studying the tool and putting the knowledge learned into practice on real projects.

Therefore, to help you make that decision, here are ten reasons why you should use Cypress to automate the testing of your web applications.

1. Zero configuration to get started

After installing and initializing Cypress, everything is ready to go without any configuration.

Installed. Initialized. And you can now start writing automated tests to ensure that the most important features of your application are covered. That easy.

Cypress even brings executable examples of how to use each of its features to help you test the most diverse situations found in modern web applications.

2. Low learning curve

This is my perception and that of all the professionals I have talked to about how easy they found learning to use the tool.

However, we must consider that the team already knows JavaScript and CSS selectors. After all, such knowledge is necessary regardless of the chosen testing framework.

3. Excellent development experience

When Cypress is started to run tests in interactive mode, it uses its own test runner, which provides features such as:

  • Watch mode - once a test file is saved, tests are re-run
  • Time-travel - to help you debug test failures, where application snapshots are saved before and after each action, and you can “go back in time” to see exactly everything that happened while the tests were running
  • Dev tools - Here, you will find logs in the browser's console with elements returned by CSS selectors, requests that have occurred, and much more
  • Screenshots - when a test fails with Cypress, a screenshot is automatically taken as evidence of the test, making it easier to understand the failure and have it solved
  • Videos - when executed in headless mode, videos of the tests are automatically saved, which can be used as bug evidence
  • And much more.

4. Everything is already packed for using

With Cypress, different famous tools, already known by the JavaScript community, are packaged for use, such as the assertion libraries Mocha and Chai, the Sinon library for mocks, Lodash, with its various features (my favorite is _.times), in addition to jQuery, Moment, and others.

5. Automatic waiting

By default, Cypress already waits for elements to be visible before trying to interact with them. It automatically waits for requests to finish before proceeding with the tests. It even waits for animations to finish.

Even so, the tool allows customizing these behaviors to make the tests even more robust and reliable.

6. Control of network traffic

With features like cy.intercept(), you can intercept HTTP requests, give them an alias, and wait for them to finish before moving on with the tests, making them robust.

Besides, you can even mock the response of such requests, to test the frontend independent of the backend.

7. Various types of automated tests

With Cypress, in addition to end-to-end testing, you can also write and run API tests, frontend tests, component tests, visual regression tests, accessibility tests, and if you want, even a combination of the previous.

8. Top-notch documentation!

When I gave Cypress a chance, I was extremely impressed by the high level of its documentation.

In addition to detailed explanations of its use, the documentation also covers good and bad practices in writing automated tests, trade-offs and their respective amendments, videos demonstrating its use, dense and detailed blog posts, links to lectures at major conferences, webinars, etc.

9. Help from the front-end developers

Even today, many developers are not used to writing end-to-end tests.

I don't blame them because before Cypress, this job was painful.

However, as Cypress says in its slogan, the web has evolved. Finally, testing has too. That's right. Cypress is a differentiated automated testing tool.

By being differentiated, the tool is attracting more and more front-end developers to its ecosystem since these are very knowledgeable of JavaScript.

And having developers writing or helping with automated testing is of great value.

10. Community

Because it is an open-source tool, Cypress has an engaged community, with professionals worldwide helping and spreading their success stories.

I'm part of this community, and so, I would like to recommend the series “Pinches of Cypress”, available here on Dev Community.

My personal recommendation.

Will you start a web project from scratch? Go with Cypress!

Or, if you are having problems with your current test suite, such as instability in the results (flaky tests), or difficulty engaging developers to write (or at least fix the tests they break), do a proof of concept with Cypress. Who knows, these problems might be completely eliminated.

I hope that this content has clarified why you should consider the automated testing framework in your tech stack.

Until next time and happy testing! 👋

This post was originally published in Portuguese on the Talking About Testing blog.

Top comments (4)

gabrielssilvast profile image

Walmir, pode me tirar uma dúvida quando atualizo uma pagina ela some com algumas funções isso pode indicar algum erro ou é normal ?
Estou tentando escrever testes nela e não consigo

Image description

walmyrlimaesilv profile image
Walmyr • Edited

Não entendi sua dúvida. Pode me dar mais detalhes, por favor?
Um snippet do código ajudaria.

campkathleen3 profile image
Kathleen Campbell

Thank you for sharing an informational post.
This might be useful for you.

walmyrlimaesilv profile image

Thanks for sharing.