Selenium WebDriver vs Cypress — Web automation choice

Cypress vs Selenium is a rather popular argument about the superiority of one instrument over the other. And indeed, while one is quite popular, the other has appeared relatively recently. They both perform the same function, which is to automate testing. The benefits of automation are obvious. It allows testers to manage their work more efficiently, gain better process visibility, and reduce the time spent on testing. In this article, we will look at both tools and try to answer the question of who is the winner in the Selenium vs Cypress battle.

Cypress vs. Selenium: An Overview

Before comparing the two tools, let’s first take a look at them. Selenium is one of the most popular solutions in the web application testing industry and has been on the market for quite some time. Its distinctive features are the support of a large number of programming languages. In its turn, Cypress, which appeared comparatively recently, has also managed to take a bite from the market thanks to its speed and several useful features. Let’s examine these two tools in more detail.

What is Cypress

Cypress is an open-source framework for E2E testing. It brings new concepts and solutions to the way automation testing is done. A key feature of Cypress is that it runs inside the browser itself. This means, among other things, that Cypress always keeps track of when all sorts of events are called in the browser and never misses any manipulation of page elements, which makes floating tests much less likely.

Why Cypress For Web Automation?

Cypress automation tool has the following advantages:

• Built-in test suite built on a fork of mocha, chai, sinon;
• Built-in automatic wait mechanism;
• When writing a script you don’t need to write async/await functions as you do in Selenium. Cypress itself will wait for the desired item to appear, wait for the animation to finish, and wait for the network request to finish;
• a ‘Time travel’ feature that allows the Cypress test runner to rollback to certain steps in the test sequence;
• Extensive documentation with a large set of examples;
• Ability to write unit tests as well;

How to Get Started With Cypress Tool

A great development experience is the main advantage of Cypress. You can do your first Cypress testing for your project in 10 minutes. You only need to add one dependency to package.json (npm install cypress), read the documentation about where to put the files (cypress/integration/login.spec.js), and write 5 lines of JavaScript code:

describe('Login', () => {
     it('should log in with credentials', () => {
        cy.visit('/login');
        cy.get('[name=login_name]').type(cypress.env('login'));
        cy.get('[name=passwd]').type(Cypress.env('password'));
        cy.get('[name=send]').click();
        cy.get('.main-header').should('be.visible');
    });
});

Here we get a real test that visits the login page, fills out the form, clicks the button, and examines the result.

All the steps of the test are logged. Moreover, it’s not just a log but navigation where you can go back to any point after the test and see what was going on in the browser. For example, you can see snapshots before and after the Ajax request.

A nice little thing is that each cy.get() makes sure that the page has loaded and makes several attempts to find the element. Web application interfaces are getting more and more complex every year. The resulting HTML is not generated on the server-side, but on the browser side. This is done asynchronously and using different component libraries. Eventually, it becomes difficult to say at what point an element of the interface appears on the screen.

What is Selenium

Selenium is an open-source tool that is widely used for automating the testing of web applications. It’s easy to use and there are Selenium forums where you can go if you face some problems. Due to this, Selenium has gained a certain popularity among software testers. 

Selenium consists of three main components: Selenium IDE, Selenium WebDriver, and Selenium Grid. The tool gives those who use it the ability to cross-browser and parallel test web applications. This allows testers to test applications in different operating systems and browsers which, in particular, enables them to check the compatibility of a web project with different platforms.

• Selenium IDE is a small plugin for the Mozilla Firefox browser, based on which you can easily record and playback certain user actions. 
• Selenium Grid is used to start tests on a large number of PCs, addressing only the one on which the Grid is installed.
• Selenium WebDriver is a framework used to execute cross-browser tests.

Why Selenium For Web Automation?

Selenium pros and cons are as follows:

• It allows the developer to write tests in several popular programming languages, such as C#, Java, Python, Ruby, and others; 
• The API is very user-friendly for beginners;
• It can easily handle basic Javascript (DOM) concepts;
• It can easily handle AJAX and PJAX requests;
• The tool supports all major operating systems;
• Large user base;
• Extensive integration of third-party tools and platforms.
• Selenium can only be used in web applications. But it is more of a limitation rather than a drawback since you can integrate the WinAppDriver to test desktop applications.

How to Get Started With Selenium Cross-Browser Testing

While using Selenium WebDriver, we can automate test cases in various browsers.

To run test cases with different browsers on the same computer simultaneously, we can integrate the Testing environment with Selenium WebDriver. To do this you have to simply write the following lines of Java code:

package Newpack;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;

public class Example  {
  public String baseUrl= "https://agilistrysoft.com/";
  public WebDriver driver = new FirefoxDriver();

  @Test
  public void verifyHomePageTitle() {
   driver.get(baseUrl);

   // Find the text input element by its name
   WebElement element = driver.findElement(By.name("q"));

   // Enter something to search for
   element.sendKeys("Cheese!");

   // Now submit the form
   // WebDriver will find the form
   element.submit();

   // Check the title of the page
   System.out.println("Page title is: " + driver.getTitle());
   driver.quit();
  }
}

Pros and Cons: Cypress vs. Selenium

Above we have already analyzed briefly the advantages of each of the tools. Let’s look at them in more detail, and for convenience let’s present it as a table.

So, Which One Is Better — Cypress or Selenium?

So, it’s time to answer the question of what’s best. However, it is not possible to give an unambiguous answer. It strongly depends on your needs.

Although Cypress is a relatively new product on the test tool market, it has already gained a loyal audience. It integrates perfectly into the production codebase, thereby improving collaboration between developers and testers. In addition, Cypress speeds up test execution because of its architecture. Overall, Cypress is better suited for testing simple applications, especially if speed and consistency are a priority on a project.

Selenium, on the other hand, covers a much wider range of platforms, browsers, and programming languages. Among Selenium’s advantages is its ability to handle more complex applications that require cross-platform testing.

***

We’ve taken a fairly detailed look at both tools. It’s up to you to decide who the winner of the Cypress vs Selenium battle is. We’ll just repeat that each tool is suitable for its own purposes and it is reasonable to use each of them depending on the specific task. Remember, however, that each tool is only as good as the person using it. An experienced tester will get the most benefit of both, and ultimately end up with high-quality results.