Automated Testing with Cypress for Modern Web

The evolution of development tools has also led to the evolution of testing tools too, thus supporting and firming up the entire process of Quality Assurance. One among them is automation testing, talking about which it may be difficult to ignore the popular, open-source tool – Selenium. With changing times, the automation tools are also changing at a rapid pace. There are plenty of automation tools today that can be used as a fragment of your automation process. This article centers on the most promising and featured filled tool, Cypress.

What is Cypress?

Cypress is an End-to-End Testing framework based on JavaScript, which comes with loads of inbuilt features that you will need any automation tool. Cypress makes use of the Mocha testing framework and chai assertion library, and most essentially, it’s not put up on top of Selenium. It’s a modern driver that works inside your application and permits excellent control over both the application’s frontend and backend.

Cypress is a package

Cypress is unlike other tools, where in order to support your automation framework, multiple libraries have to be maintained and integrated. It increases the effort and expense needed to maintain those libraries. With Cypress, it becomes needless to worry about these things since many required aspects come along with Cypress itself.

Why Cypress: feature elaboration

#1. Easy setup
Cypress can be set up and running in 5 minutes or less. Setting up and running test in Cypress can be done in just three steps:

  • Download Cypress
  • Open Cypress GUI
  • Run the test

#2. No more flaky tests
Much time is spent on smoothening the test execution process. We often run into situations where the actions are executed on web elements before they are ready to act. Cypress is excellent when it comes to handling flakiness. A default timeout command (defaultCommandTimeout) is added before performing any command. It is done by using an algorithm to determine if the element is in a ready state to perform actions.

#3. GUI tool
Cypress offers the GUI tool to view or execute the tests, configuration outlook, and to view the executed tests from the dashboards. What is more, you can watch the running tests and receive more insights into the test run. Hovering over each step will provide more insights into a specific step and also gives a DOM snapshot before and after carrying out the actions. It helps to comprehend and debug the test in a detailed manner. One more fantastic feature is updating and saving your test, which can be re-run automatically on the GUI tool.

#4. Cypress plugins – beyond UI testing
Cypress is a UI testing tool and a plugin ecosystem where plugins can be integrated, or they can be created and then extended with Cypress. Below are some of the examples apart from functional testing:

  • Unit testing: Cypress plugins support unit testing for Angular, Vue, React, etc.
  • Visual testing: Cypress offers plugins for the most popular visual testing tools like Percy, AppliTools, etc., to keep an eye on your UI.
  • Accessibility testing: we can utilize a plugin called cypress-axe for accessibility testing. There is API testing and many more if we keep on exploring.

#5. Excellent documentation
The Cypress team has put in much time and effort to make their documentation clear for all who are using it. Their GitHub repository also exhibits a wide range of different examples. Cypress has inevitable tradeoffs, but they should not stop you from trying out the tool as the Cypress team has specific detailed workarounds on these limitations in their documentation site.

#6. Awesome dashboard
The dashboard is another fantastic feature of Cypress (https://dashboard.cypress.io). It offers insights and a summary of your tests executed through CI/CD tools. The dashboard is similar to other CI/CD tools dashboards, which provide execution details and logs of the tests.
Moreover, there is also a default option to record your test and watch them on the dashboard. It helps to identify how the tests were executed in CI and know the exact point of failure.

#7. Clear error messages
The error messages that Cypress offers are crystal clear and easily understandable than other testing tools that show a lengthy stack trace error. Clear messages help increase productivity as the time spent trying to figure out why the test has failed is reduced.

#8. Encourages developers to write more tests
Several companies are moving towards a model where the developers are encouraged to do more code testing and write automated tests. Here is where Cypress plays a vital role in promoting a culture where ensuring the quality is everyone’s responsibility. Also, working in silos where an individual QA team writes the tests on various repositories is discouraged.

Things to know about Cypress before adopting

  • Supports only JavaScript scripting
  • At present, Cypress supports only Canary, Chromium, Chrome, and Electron, even though they support cross-browser functionality on their roadmap.
  • Backs only jQuery selector
  • The dashboard is not for free; however, it offers a basic free plan.
  • Writing a test in Cypress is more effortless and enjoyable.
  • An entirely new architecture beyond Selenium

Wrapping it up

Cypress understands developers’ various pain points to ease automation testing, and they have developed a tool that fits in everyone’s toolbox. Many a time, QA engineers find it difficult to maintain a balance between manual and test automation. Now with Cypress, the responsibilities of writing automated tests are shared with developers. It saves more time that we can use to attend to other imperative activities like exploratory testing.