Cypress vs Selenium: Collision of Champions 2022

All you need to know in the battle of Cypress vs Selenium

The testing community is being taken by storm by a new contender–Cypress. Is Cypress better than the legendary Selenium WebDriver? Does Cypress replace Selenium? Does Cypress use Selenium? What are the limitations of Cypress? These are just a few of the questions on which we will shed some light.

This article will compare these two excellent tools (yes, Cypress is awesome too). We will have a look at the strengths and weaknesses of each tool. However, this article will not tell you which of these is better, Cypress or Selenium; you will be the judge of that!

According to the Cypress.io website,

Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium.

This enables you to write faster, easier and more reliable tests.

/ Cypress.io

Needless to say, this is quite a bold statement to be made by the Cypress team. Let us now examine some of these claims to better understand why and, more importantly, how Cypress differs from Selenium.

Let’s dive in

• The architecture
• Browser support
• Language support
• Who Cypress is for
• Ease of use
• Speed test
• Key differences
• Closing

Cypress vs Selenium: Architecture

On the one hand, Selenium uses browser drivers (e.g., ChromeDriver, EdgeDriver, SafariDriver, etc.) and the W3C WebDriver protocol to send network requests to the target browser. And because Selenium tests have this extra layer of communication, it makes tests run slower.

Meanwhile, Cypress tests run right alongside the Application Under Test (AUT). Moreover, Cypress does not need a browser driver to communicate with the browser; instead, it uses Document Object Model (DOM) events to send commands to the browser. Hence, Cypress tests will run much faster than Selenium tests.

Browser support

You will not be disappointed when it comes to the web browsers that Selenium supports since it supports all the major ones. The list includes but is not limited to Chrome, Firefox, Safari, Edge, and even IE.

There is one significant advantage that Selenium does have over Cypress in this category, and it is the following.

Cypress does not have Safari support.

In addition, Cypress also does not support Internet Explorer. But to be fair, IE has been replaced by the Edge browser. Cypress supports all Chromium-based browsers (e.g., Electron, Chrome, Edge, etc.) and Firefox.

Language support

Selenium also wins in this category since it supports many programming languages (e.g., Java, Python, PHP, C#, Ruby, etc.). This means that the barrier of entry for Selenium users is relatively low. One generally does not need to learn a new programming language to start with Selenium; you can use what you already know.

This is not the case with Cypress, unfortunately. As per the Cypress documentation,

“The only language we will ever support is the language of the web: JavaScript.”

Although this may be seen as a limitation if you’re coming from Selenium, it is very intentional by the Cypress team, and this builds up nicely to our next topic.

Who Cypress is for

Cypress has been primarily designed with developers in mind. Since front-end developers mainly use JavaScript to develop their code, it makes perfect sense for the Cypress team to only support JavaScript. Cypress also performs best when testing modern JavaScript applications developed using Angular, React, and Vue. Moreover, Cypress has been built to help with Test-Driven Development (TDD).

“Cypress helps you set up and start writing tests every day while you build your application locally. TDD at its best!“

/ Cypress.io

Cypress tests are fast, so it is an ideal tool for practicing TDD. Developers need a way to test their code without wasting too much time, and Cypress is perfect.

And this is where Cypress and Selenium differ significantly. Selenium, being a multi-purpose tool, is not optimized for doing TDD. Hence, it will never be the go-to tool for front-end developers as it now stands.

Generally speaking, Selenium is mainly used by SDETs, but a new trend is starting where this group is also adopting Cypress for automated testing. This can be seen as a good thing since developers and testers work closer together.

Ease of use

Selenium requires a significant level of technical expertise to set up.

For instance, one has to choose a testing framework such as TestNG, a programming language, and a test reporting tool, to name a few. In addition to this, one also needs to programmatically control the application’s state by using waits.

New Cypress users will be happy to find that Cypress automatically manages these and many other things. For instance, Cypress comes bundled with tools such as Chai (an assertion library) and Mocha (a test framework). On the flip side, this also means you must use only the bundled tools with Cypress!

Cypress comes bundled with Mocha and Chai

One of Cypress’s most significant advantages over Selenium is that it handles waits automatically. There is no need to tell Cypress to wait for an element to be interactable; it will do so automatically. This is one of the reasons why the Cypress team claims that Cypress tests are more reliable than their Selenium counterparts.

Another great Cypress feature is test time travel. Cypress allows you to see what happened at each step of test execution. Not only does it take a snapshot at every step, but it also takes a screenshot when tests fail. All this happens without you having to lift a finger. On the other hand, Selenium requires that you programmatically add these features.

The best part is that you only need to run one command to install Cypress.

npm install cypress

Cypress vs Selenium: Speed

We bet that this is what you came here to see. You want to know if Cypress is faster than Selenium. Let the drag race begin!

Here is the test scenario:

• Visit the automateNow home page
• Verify that the page title contains “automateNow”

Additionally, we will wait up to four seconds for the page to load and ensure that the browser’s window is closed when the test finishes.

This would look in Selenium after adding the WebDriver Java language bindings, WebDriverManager, and TestNG dependencies.

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import java.time.Duration;

public class TestNavigation {
    @Test
    public void testVisitingAWebsite() {
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(4));
        driver.manage().window().maximize();
        driver.get("https://www.automateNow.io");
        Assert.assertTrue(driver.getTitle().contains("automateNow"));
        driver.quit();
    }
}

Here is what the same test would look like in Cypress after having installed Cypress.

describe('browser navigation', () => {
    it('visits a website', () => {
        cy.visit('https://automatenow.io')
        cy.title().should('contain', 'automateNow')
    })
})

Cypress takes the win when it comes to making it easier to write tests. You don’t need us to tell you that Cypress tests require less boilerplate code. For instance, you don’t need to set up a driver with Cypress. All you do is say “cy.” followed by the action you want to take. Cypress also closes the browser window automatically.

Okay, but how about test execution speed? We’re glad you also asked!

We ran the same test five times on the same Windows 10 machine using the same browser (Chrome). Here are the results.

In the test speed category, Cypress also takes the “w”. In this scenario, Cypress could execute the test almost three and a half seconds faster than Selenium!

Lastly, It used to be that only Cypress could mock server requests and intercept responses, but with the latest Selenium release, this is now also possible using Selenium WebDriver. Check out the Selenium 4 new features.

Cypress vs Selenium: Key differences

Here are some Cypress limitations that Selenium handles quite well.

Cypress:

• Does not have multi-tab support
• Cannot be used to drive two browsers simultaneously
• Has limited support for iframes
• Has domain restrictions

In fairness, the Cypress documentation does provide some workarounds for some of these issues.

Here is one crucial thing we haven’t discussed: test parallelization. While Selenium uses a Grid server to run tests in parallel, Cypress has no concept of a Grid. Instead, Cypress uses a Dashboard service for test parallelization. The Dashboard is also where you will find a video recording of your test runs.

If you are wondering about some of the other differences between these tools, here is what that looks like.

Final thoughts on Cypress vs Selenium

After all that you have learned, hopefully, you will now understand why Cypress is not like Selenium.

Although Cypress has many things going for it, we believe that it will take some time to attain widespread adoption by the testing community. That is mainly due to Cypress’s limitations and barriers to entry.

Although Cypress is a relatively new tool, it is evolving rather rapidly, and it will be exciting to see how things will play out between it and Selenium in future years.

If you need a place to practice automation using Cypress, check out the automateNow Sandbox page. To learn more about its features, watch this Cypress YouTube video series.

We would love to know your thoughts on which of these you think is the better tool. Please comment below.