Redefining Testing Automation with Cypress

Keethivasan R C from our QE Community looks at how Cypress is poised to overtake Selenium as the preferred tool for testing automation.

The Selenium Legacy

With a legacy spanning over a decade, Selenium today dominates the testing industry as one of the most preferred automation tools. The tool is most extensively leveraged by projects for web automation. An open source tool that also provides cross browser support for testing, Selenium has effectively evolved over the years in line with changes in development languages. 

Selenium has simplified the life of the testers as well as the entire Software Development Life Cycle (SDLC) process to a great extent, and has become synonymous with automation. However, there’s a new player in the automation tool game.

Will Cypress Break Selenium’s Reign?

With the arrival of JavaScript-based automation frameworks, Selenium’s dominance is very likely to be interrupted. One of the main UI automation tools that is primed to break the open source tool’s long reign is Cypress. The key reason is the development language is based on JavaScript, in particular Angular, React and Vue JS. 

JS-based frameworks render the pages in an asynchronous manner, they are dynamic and most of them are Single Page applications (SPA). The ability of Selenium to cope with the dynamicity of rendering is slow and poor compared to Cypress or any other JS=based tools.  

Our team at Cognizant Softvision explored Cypress in a as the development moved on from regular Java to ReactJS.  We were using Selenium but ended up facing several failures because of the dynamic rendering of elements and asynchronous nature of React. 

Cypress: The Game Changer

Let us take a closer look at what Cypress has to offer. 

To begin with, Cypress is not a wrapper or an extension of Selenium, like Protractor and WebdriverIO. It is a JavaScript script-based framework built with npm bindings on the backend. Any dependency is taken care of by the node modules, which makes the installation easier. Its entire architecture differs from that of Selenium, thus making it a unique front end automation tool.

Cypress includes the following features:

Time travel: Cypress takes snapshots as your tests run

Debugging: Readable errors and stack traces make debugging easier

Automatic waiting: Automatically waits for commands and assertions before moving on

Spies, stubs and clocks: Verify and control the behavior of functions, server responses, or timers

Network traffic control: Control, stub and test edge cases without involving the server

Screenshots and videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI, though videos are limited to paid version

Cross browser testing: Run tests within Firefox and Chrome family browsers (including Edge and Electron) locally – Available in the latest version of Cypress

  • Another unique aspect of Cypress is that it can be integrated within the development code. Therefore, unit tests, integration tests and E2E testing are much easier. Cypress also executes along with the application code within the browser, unlike Selenium that executes outside the browser, creating an instance of it. 
  • Instead of using the regular way of finding web elements, Cypress uses a more powerful approach with its cy.get (element value), which renders the elements faster than Selenium as it does not use the explicit waits. It not only serves the purpose of automation, but also helps developers write their unit tests for frontend.  
  • Furthermore, in comparison with Selenium, Cypress scripts are easy to understand. The way of writing the tests is simpler, as opposed to Selenium that involves a lot of steps and follows a pattern to set up the framework.  

Consider the below example. Here, we are just navigating to a URL and checking if it contains a specific parameter. Assertion comes by default in Cypress, whereas in Selenium we will have to declare the assertions explicitly. 

The below graph shows the popularity of Cypress in recent times.


Source: https://docs.cypress.io/guides/overview/why-cypress

Cypress and JS-Based Tools Bolster Testing Automation

Going by the recent trends, we can expect Cypress to play a substantial role in redefining testing automation. Though it will not completely replace Selenium, Cypress is set to make a significant difference with its modern way of execution. 

However, Cypress does have its own limitations, like parallel testing, limited testing of i-frames, and lack of support for Safari and IE.  Also, Cypress is not the only JS-based automation framework. There are a few more evolving tools, including Playwright JS, Taiko Gauge and Puppeteer, which rightly ensure that the testing automation game will become even more interesting soon!

Background Image