Shanika Wickramasinghe is a software engineer by profession and a graduate in Information Technology. She specializes in both Software development and QA automation. Shanika considers writing the best medium to learn and share her knowledge. She is passionate about everything she does, loves to travel, and enjoys nature whenever she takes a break from her busy work schedule. You can connect with her on LinkedIn.

Become a JMeter and Continuous Testing Pro

Start Learning
Slack

Test Your Website Performance NOW! |

arrowPlease enter a URL with http(s)
Sep 22 2021

Selenium vs. Cypress- A Complete Comparison Between the Two Testing Frameworks

When it comes to web application testing, Selenium is the most widely used solution in the industry with its robust reputation, multiple language support, and rich features. However, a new challenger called Cypress has emerged in recent years, rapidly gaining widespread adoption. In this article, let's dig a bit deeper into these two test automation platforms and compare them based on various aspects.

What is Selenium?

Selenium is a free and open-source test automation tool designed to test web-based applications. Having started its life in 2004, Selenium has become the de facto standard for automated testing due to its cross-browser support, ease of use, and rich feature set. Selenium consists of three primary components:

  • WebDriver - The framework used to execute cross-browser tests.
  • Grid - A tool to distribute test workloads across different environments to run multiple tests simultaneously.
  • IDE - The IDE is used to record and replay test cases. It comes as an extension that can be used to create reproducible test cases.

Why Use the Selenium Test Automation Framework?

  • Support for multiple programming languages - Selenium supports multiple languages such as C#, JavaScript, Java, Python, and Ruby, enabling developers to create test cases using their preferred language.
  • Selenium can directly interact with supported browsers due to its WebDriver becoming a W3C standard.
  • Robust feature set - with components like WebDriver, Grid, and IDE, Selenium offers a complete toolset for any test automation need from advanced user input simulation to workload distribution.
  • Support for all major operating systems and mobile platforms.
  • Selenium has a massive user base due to the maturity of the platform. This can lead to a wealth of knowledge on Selenium from both community and official sources.
  • Selenium can be integrated with a large number of third-party tools and platforms to enhance or extend automation functionality.

What is Cypress

Cypress is an open-source test automation tool that aims to provide a more straightforward and developer-friendly web application testing experience. It utilizes a DOM manipulation technique and directly interacts with browsers without the need for separate browser-specific drivers. Cypress is fully JavaScript-based with an emphasis on frontend testing. Additionally, it comes with an inbuilt test runner GUI that provides an interactive testing environment.     

Why Use the Cypress Test Automation Framework

  • Developer-focused testing platform with the ability to get up and running quickly.
  • No need to set up or configure browser-specific drivers.
  • Ability capture snapshots of tests at execution time (Time Travel)
  • Excellent support for modern javascript frameworks like React, Angular, Vue, etc.
  • Built-in support for integration with CI tools, slack, and Github.
  • Automatic load balancing and parallelization support.

Installation and Setup of Selenium Vs. Cypress

Both Selenium and Cypress are both cross-platforms compatible. In this section, we will focus on setting up both tools in a Windows environment using Powershell. Please refer to the official documentation of these providers for more platform-specific instructions:

How to Install Selenium

As Selenium supports multiple languages, developers need to install specific selenium libraries for the languages they use. There are basically two steps in the installation process of Selenium: installing the Selenium libraries and the browser driver. The following example demonstrates how to install Selenium using Python.

1. Install Selenium package via pip (Note - Pipenv is used to manage the Python virtual environment).

 

Pipenv -> pipenv install selenium
Pip -> pip install selenium

 

2. Verify the installed package

 

Pipenv -> pipenv graph
Pip -> pip list

 

 

3. Download the Browser Driver. This driver is browser-specific and used to interact with the browser. (Ex: Chrome-based browsers use chromedriver while Firefox uses GeckoDriver)

 

 

4. (Optional) Add the Browser Driver to the system PATH. As an alternative, you can simply point to the downloaded driver within a selenium script.

Running a Selenium Test

To create a Selenium test, users have to first create a Python file with all the necessary Selenium libraries imported along with the specific browser driver. Then they can create the test script. In the following code block, we have created a test case to execute a google search in the chrome browser.

 

selenium_test.py

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

try:
    # Pointing to the Browser Driver Directly
    driver = webdriver.Chrome('./chromedriver')

    # Visit Google
    driver.get("https://www.google.com")
    print(f"WebSite Title: {driver.title}")

    # Find Search Bar
    search_bar = driver.find_element_by_name('q')

    # Clear the Search Bar
    search_bar.clear()

    # Send Keys (Type the Search Phrase)
    search_bar.send_keys("Selenium")
    search_bar.send_keys(Keys.ENTER)

    # Get Search Result URL
    print(f"Results URL: {driver.current_url}")
Except for Exception as e:
    print(f"Error occurred: {e}")
finally:
    driver.close()

 

Browser Output

 

Console Output

How to Install Cypress

Installing Cypress is comparatively simpler than Selenium. The recommended method for installing Selenium is simply downloading and installing the Cypress package via npm. 

1. Before installing Cypress, ensure that there is a node_modules folder or package.json file at two-way, the root of your project. You can use the npm init command to create the package.json file.

 

 

2. Install the Cypress package using the following command.

 

npm install cypress --save-dev

 

 

3. Verify installation by executing the Cypress version command.

 

npx cypress --version

 

4. Open Cypress

 

npx cypress open

Running a Cypress Test

The easiest way to create a Cypress test is to create a spec file in the Cypress integration tests folder. In the following example, we have created a file called cypress_test_spec.js within the cypress\integration\ folder inside the project root. The script will visit Google and execute a search. 

 

cypress_test_spec.js

describe('Cypress Test', () => {
  it('Google Search', () => {
    // Visit Google
    cy.visit('https://www.google.com/')

    // Get Search Bar and enter the search keyword
    cy.get('input[name="q"]').type('Cypress');

    // Submit the Search
    cy.get('input[value="Google Search"]').first().click();

    // Get Search Results
    cy.url().then(url => {
      const getUrl = url
      cy.log('Results URL: '+getUrl)
    })
  })
})

 

Browser Output

 

The Architecture of Cypress vs. Selenium

When comparing the architecture of Cypress vs. Selenium, the primary point of interest is how they interact with the browser to execute test cases. 

 

In Selenium, test cases use the WebDriver component to communicate with the Browser Driver, which will then interact with the actual browser to execute the commands. Communications between all the components throughout this route are two-way, so that information can seamlessly flow back to the WebDriver from the actual browser. Likewise, developers will need different Browser Drivers for different types of browsers. Simply stated, Selenium runs outside the browser and executes the commands via the network.

 

In contrast, Cypress executes test cases directly inside the browser. A server process that powers Cypress makes it possible for Cypress to execute code in the same run loop as the application. Both Cypress and the server process constantly communicate with each other to perform tasks, enabling Cypress to respond to application events in real-time. This communication also allows Cypress to interact with OS components for tasks outside the browser, such as taking screenshots.

 

At first glance, Cypress seems to be the better architecture as it runs directly inside the browser in the same run loop of the application, thus providing native access to all web application objects (Ex: DOM elements, functions, etc.) However, the code will not be tested using any server-side language as it is tested inside the browser. This leads to complexities and will require additional configurations when interacting with server-side components like databases. This encapsulated approach also leads to a lack of multi-tab support and requires workarounds to support multiple browsers simultaneously.

 

Selenium's WebDriver approach provides relatively more freedom when it comes to testing. As Selenium supports multiple languages, developers can easily and directly interact with server-side components through Selenium test cases. Selenium also offers direct support for multi-tabs and multi-browsers in a single test instance. Moreover, it can be easily adapted to support multiple test executions and distributed testing environments (Ex: Selenium Grid) as the commands are communicated to different browser drivers.

 

Considering the above facts, we can't claim that one architecture is superior to the other. Depending on the automation and testing requirements, developers need to decide which tool to use on a case-by-case basis. In the next section, let's explore the key differentiating factors of both tools.
 

Selenium vs. Cypress – Key Comparison Factors Table

 

Selenium

Cypress

Language Support

C#, JavaScript, Java, Python, and Ruby

JavaScript

Browser Support

Google Chrome, Firefox, IE, Safari, and any chromium-based browsers (Edge, Vivaldi, etc...)

Google Chrome, Firefox, and any chromium-based browsers (Edge, Vivaldi, etc...)

Test Framework

PyUnit, JUnit, TestNG almost any language-specific test framework can be adapted.

Mocha JS

Ease of Setup

Medium

Requires both Selenium and the browser drivers to be configured before utilizing selenium

Relatively Low

No additional browser drivers are required and come with a bundled chrome browser.

Driver Dependencies

Dependent on specific Browser Drivers

No driver dependency

Integrations (3rd Party Tools/Platform)

Extensive integration options. Ranging from CI/CD tools, Reporting, etc...

Comparatively limited options. Inbuilt support for slack and GitHub integrations.

Test Scope

Unit, security, integration, end-to-end testing

end-to-end testing

Parallel Testing and Load Balancing

Yes, Selenium Grid

Yes

Support for Multi Tab / Browser Instances

Yes

No

Execution Speed

Comparatively slow as commands are sent to the browser through the network

Fast as tests are executed within the browser.

Mobile Testing Support

Yes, Through Appium

No

Element Scope

All elements in DOM

All elements in the DOM as well as other objects such as functions, service works, etc...

Community & Documentation

Large and mature community with good official documentation

A growing community with excellent official documentation

Licensing

All features are offered completely free of charge

All core features are offered completely free, however, some advanced features require a subscription.

 

Target Audience for Cypress and Selenium

When considering who will be using these test automation platforms, the primary user groups will be developers and QA engineers. Cypress is specifically targeted towards developers and QA engineers to facilitate test-driven development coupled with end-to-end testing. However, Cypress requires some programming experience in JavaScript to utilize the tool effectively. Furthermore, it will not be as feature-rich as Selenium and may require additional configurations and workarounds since it is a newer solution.

 

Developers and QA engineers also use Selenium, yet, with a low barrier for entry when compared to Cypress. Anyone who is familiar with a supported language can start using Selenium as it supports multiple languages. Additionally, there are ample resources to get started and find solutions for most issues with Selenium due to its maturity and extensive community support. However, Selenium is by no means simple, and it can quickly grow in complexity when dealing with larger projects. Yet, it is more of a generalized test automation platform that provides unparalleled adaptability. 

 

When to Choose Selenium vs. Cypress

In the previous section, we had a look at the differences between these two platforms in terms of architecture, target audience, and key features. Now we need to understand what are the best use cases of each platform.

Let's start with Cypress. Cypress excels at providing a robust end-to-end testing platform that acts as an all-in-one test automation framework. There, you will find all the necessary features built-in from an assertion library, mocking, and stubbing to visualized testing experience. 

Cypress even comes with Chrome bundled so that users can directly move into writing tests after the installation. Moreover, Cypress delivers unparalleled performance as it is based on JavaScript and runs inside the browser. So if you have experience in JavaScript and your project needs to revolve around front-end testing, Cypress would be the ideal solution.

On the other hand, Selenium does not aim to be an all-in-one framework. Yet, it provides all the necessary tools to create a complete test automation pipeline. While the setup process can be complex compared to Cypress, users can mix and match components to create the perfect test automation pipeline.

Moreover, Selenium can be easily adapted to support any kind of testing, from front-end testing to server-side testing and even mobile testing using Appium. This flexibility, coupled with the extensive feature set and integrations, enables Selenium to handle any kind of workload.

Additionally, Selenium offers first-party support for managing distributed testing workloads with Selenium Grid. Selenium can be used for any project regardless of the requirements or scope due to its maturity, adaptability, and robust feature set.

Wrapping Up

In this article, we compared the two leading test automation tools Selenium and Cypress.  Which tool to use solely depends on the user and the project requirements as both have their unique advantages and disadvantages. You have to think long-term and consider the required testing features for choosing the right tool. To learn more about Selenium, follow our blog.
 

   
arrowPlease enter a URL with http(s)

Interested in writing for our Blog?Send us a pitch!