Cypress vs. Selenium: What testing tool is right for you?

Here at Druva, we are always working to improve the quality of our solutions and the efficiency of our system testing. One of the tools that we employ to reach those goals is test automation. Selenium and Cypress both are open-source automation frameworks for web-based applications. Selenium is a long-time solution, whereas Cypress is a newborn, test automation tool.

Although Cypress is new in the market, there are a lot of questions stirring in a tester's mind:

• Is Cypress the replacement for Selenium?
• Is Cypress better than Selenium?
• Is Cypress developer-friendly or tester-friendly?
• Is Cypress faster than Selenium?
• Does Cypress support cross-browser?
• Is Cypress signaling the end of an era?

Let's dive further into the details to find the differences between these two tools and determine which is most suitable for you.

Getting started with Selenium and Cypress 

Selenium

Software Requirements for installing Selenium-

Java SDK, Eclipse IDE, Selenium Java Client driver,

WebDrivers (CromeDriver for chrome, Mozilla GeckoDriver for Firefox, etc.)

Writing your first test

This test code will open the chrome browser and navigate to https://google.com/ and search for the keyword “Selenium Rocks!”    

Cypress

Software Requirements for installing Cypress-

Node.js, Visual Studio Code

Run the following commands to starts with Cypress:

npm install cypress --save-dev

npx cypress open

Writing Your First Test

This test code will open the chrome browser and navigate to https://google.com/ and search for the keyword “Cypress Rocks!”

Both tools can be easily installed. Cypress is simpler and there is no overhead of driver or IDE.

Language Support

Selenium

Selenium supports a wide range of programming languages using the drivers specific to each programming language. Some of the supported programming languages - Java, Python, C#, JavaScript Etc.

Cypress: It’s JavaScript Only!

Any programming language can be compiled down to JavaScript, but the test cases ultimately run inside the browser. Therefore, Cypress uses the JavaScript library only, there is no binding of drivers like in Selenium.

Wait, what?

Selenium has a large number of language supports than Cypress, does it mean Selenium is more Developer-friendly?

Selenium is a pure automation tool for testing purposes, it is not built for development purposes.

On the other hand, Cypress is built for both Developers and QA Engineers. Cypress is less of a  replacement for Selenium and more of a way to introduce developers to test automation.

Finding web elements

In Selenium, a web element can be identified by the element ID, CSS class name, name, XPath, and HTML tag name.

Cypress also has a great feature of a selector playground in the test runner for finding web elements.

So what is the difference?

Any UI test faces a classic problem of dreaded sleep/timeouts (flakiness).

The flakiness in the test arises because of the waiting time for the DOM to load an element or because of something (different view-port) elements moved from their location on the web page.

A typical flow in Selenium: Command → Driver → Browser

• This flow can result in the above issue.
• While writing a selenium test, the tester tells the WebDriver what they want, and the driver tells the browser what the tester wants. After completing the loop, Selenium clients get the response. Selenium commands are not executed in the browser, so they don't have access to any browser information to help to respond if anything changes.

On the other hand, Cypress is not flaky. Cypress commands run in the browser, It has great control over the DOM. Cypress knows and understands everything that happens in the application synchronously. Cypress even knows how fast an element is animating and will wait for it to stop! Additionally, it automatically waits for elements to become visible, to become enabled, and to stop being covered. When pages begin to transition, Cypress will pause command execution until the subsequent page is fully loaded.

Test execution and time travel

Now, here comes one of the main differences between Selenium and Cypress.

Selenium executes all of its commands in a web driver outside of the browser in which actual testing happens.

On the other side, Cypress’s tests run inside the browser along with application code.

The advantage of running the Cypress process inside the browsers is that there is no network lag. It uses the same DOM events generated by the browser, so Cypress commands run as fast as the DOM is generated.

Yes, Cypress’s test execution is much much faster than Selenium.

Time travel

Time travel is yet another game-changing feature in Cypress. It takes snapshots of events while running cypress tests and can be viewed on the command panel in the test runner.

One can hover and click on each command that runs the test.

Testing framework

Selenium does not restrict using any specific testing framework. You can write your own common code for doing any action. However, there are a number of frameworks available depending on the language you are using with Selenium. Like JUnit in Java, NUnit in C# Etc.

On the other hand, Cypress has adopted Mocha’s BDD syntax which fits perfectly with both integration and unit testing. And Chai, Chai-JQuery, Sinon, Sinon-Chai assertion libraries.

On the other hand, Cypress has adopted Mocha’s BDD syntax which fits perfectly with both integration and unit testing.

Cross-browser support

This is one of the biggest gaps between these two tools. Selenium offers extensive support for testing multiple browsers in parallel. On the other hand, Cypress has a limited set of browsers support.

Feature comparison: Selenium and Cypress

Which one to choose?

Well, it totally depends on the requirements. Both tools have their own pros and cons.

Where Selenium fits 

If the requirement is to test on IE and needs access to external tools like SauceLabs, BrowserStack, Selenium will be preferred

Where Cypress fits

Nowadays, web application development has completely changed. If the web application is built on modern JS frameworks like React, Angular, Vue, etc., then Cypress is the best option. It will serve the common platform for tester and front-end developers to write their automation tests.

Conclusion

I hope this analysis gave you a sight of the differences between Selenium and Cypress.

Always consider a tool that fulfills the team's requirements, scope to test, your skill-set, and think from the latest and longer-run perspective.

Happy testing!

Learn why more organizations are leaning on Kubernetes and the cloud when developing their DevOps pipeline.