Cypress vs. Selenium
January 10, 2022

Cypress vs. Selenium: What’s the Right Cross-Browser Testing Solution for You?

Continuous Testing
Automation

Selenium is without a doubt the de-facto test automation framework for cross-browser testing — and it has been for many years. But now, Cypress is gaining traction. With dozens of variations of frameworks that were built on its protocol, WebDriver, momentum in the market is growing for Cypress.io.

Are you debating between using Cypress or Selenium? In this post, I will break down Cypress vs. Selenium and explore some of the objectives that can help teams decide which option is right for them — or if using both is better.

Table of Contents: 

Cypress vs. Selenium: What's the Difference?

Cypress and Selenium are both automation frameworks for web app testing. Selenium is an established solution, while the Cypress tool is closing in on adoption. The Cypress tool supports JavaScript, while Selenium supports many languages.

Cypress supports end-to-end testing. Selenium does this as well while also offering performance testing, mobile app testing, and unit testing.

5 Benefits of Cypress Automation for Web Testing >>

What Is Selenium Automation?

Selenium is a testing automation tool that enables developers to automate web browser testing.

How to Use Page Object Model in Selenium >>

The Selenium WebDriver protocol enables sending commands in various development languages — like Java, Java Script, C#, Python, and others — from the test environment (IDEs) to a selected desktop browser (Chrome, Firefox, Edge, Safari).

Selenium 4 is Now Out With Advanced Features >>

Selenium releases frequently to offer the most up-to-date capabilities to its user community. Selenium 4, Selenium’s latest version, offers the following key new features: 

  • Full W3C compliance. 
  • Relative locators for more reliable and stable test scripts. 
  • A new integration with CDP (chrome debugging protocol) to extend your test coverage. 
  • New Selenium Grid for robust parallel testing 
  • New Selenium IDE with plugins for Chrome and Firefox browsers 

How to Use Selenium Testing Tools >>

As a leading solution, Selenium serves as a foundation to common test frameworks like Protractor, WebDriverIO, and others, as well as mobile app testing frameworks like Appium. Looking at the market trends around adoption and downloads, it is obvious that Selenium is a key enabler for browser test automation.

How to Use Selenium With Perfecto >>

We can also see the growth in adoption of Cypress testing that has passed WebDriverIO in the number of downloads.

What Is Cypress?

Cypress is a JavaScript testing automation solution used for web automation. It enables teams to create web test automation scripts. This solution aims to enable frontend developers and test automation engineers to write web tests in the de-facto web language that is JavaScript for web test automation.

Watch: Mastering Cross-Browser Test Automation With Cypress and Selenium

Cypress also offers the following advanced features: 

  • Time travel for real-time debugging of web apps.  
  • Cypress network control
  • API testing capabilities. 
  • Innovative component testing capabilities. 
  • A beta version of Cypress Studio as a record and playback solution. 
  • Mocking and stubbing capabilities. 
  • A rich set of plugins to advance test automation coverage, such as AXE for accessibility, test coverage measurements (Istanbul), visual testing, and more. 

Cypress also supports the Mocha test framework so the core technologies in which you would develop your web test automation are Java Script on top of Mocha.

Selenium Alternatives: Should I Consider Cypress?

If you’re looking for Selenium alternatives, there are other options for you. Selenium is the leading automation framework for web testing, but it’s not your only choice.

What Are the Limitations of Selenium? How to Solve Them >>

Cypress is a more developer-focused framework and is a good alternative to Selenium. Cypress has limited integrations, but you don’t have to worry about complex environment setup with it. It also boasts good documentation and a growing community.

Selenium also offers complete browser support while Cypress does not support Safari (WebKit). In addition, Selenium supports most development languages including C#, Ruby, Java, JavaScript, and Python, as compared to Cypress which only supports JavaScript. 

Accelerate Cypress & Selenium Testing With Perfecto

How to Get Started With Selenium Cross-Browser Testing

Getting started with Selenium test automation is quite easy. It requires a local or cloud-based setup of a Selenium Grid, Selenium WebDriver for the browsers you wish to test against, and development skills in the various WebDriver supported languages.

6 Ways to Use XPath in Selenium WebDriver >>

To get started with local Selenium, navigate to the Selenium home page, download the relevant web drivers, and set up the IDE environment with relevant development languages.

A simple local Selenium script would look like this:

package com.perfecto.sampleproject;

            import java.util.concurrent.TimeUnit;

            


            import org.openqa.selenium.WebDriver;

            import org.openqa.selenium.chrome.ChromeDriver;

            import org.testng.annotations.Test;

            


            


            public class LocalSelenium {

            


                        @Test

                        public void main() {
                                    //Note: Download chromeDriver for 
windows and update the below if running from Windows.

System.setProperty("webdriver.chrome.driver",System.getProperty("user.dir") 
+ "//libs//chromedriver");

                                    //A sample chrome driver script to 
access perfecto website and verify the title

                                    WebDriver driver = new 
ChromeDriver();

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

driver.manage().timeouts().pageLoadTimeout(15, TimeUnit.SECONDS);

driver.get("https://www.perfecto.io");

                                    String aTitle = driver.getTitle();

                                    System.out.println(aTitle);

                                    //compare the actual title with the 
expected title

                                    if (aTitle.equals("Web & Mobile App 
Testing | Continuous Testing | Perfecto"))

                                    {

                                                System.out.println( 
"Test Passed") ;

                                    }

                                    else {

                                                System.out.println( 
"Test Failed" );

                                    }

                                    driver.close();

                                    driver.quit();

                        }

            


            }
 

A sample Selenium project code in Java would look like this:

Package com.perfecto.sampleproject;

            import java.net.MalformedURLException;

            import java.net.URL;

            import java.util.concurrent.TimeUnit;

            


            import org.openqa.selenium.Platform;

            import org.openqa.selenium.remote.DesiredCapabilities;

            import org.openqa.selenium.remote.RemoteWebDriver;

            import org.testng.annotations.Test;

            


            import com.perfecto.reportium.client.ReportiumClient;

            import com.perfecto.reportium.client.ReportiumClientFactory;

            import com.perfecto.reportium.model.Job;

            import 
com.perfecto.reportium.model.PerfectoExecutionContext;

            import com.perfecto.reportium.model.Project;

            import com.perfecto.reportium.test.TestContext;

            import com.perfecto.reportium.test.result.TestResult;

            import com.perfecto.reportium.test.result.TestResultFactory;

            


            


            public class PerfectoSelenium {

            


                        @Test

                        public void main() throws MalformedURLException 
{

                                    //Update cloudName variable with 
your perfecto cloud name

                                    String cloudName = 
System.getProperty("cloudName");

                                    //Update securityToken variable with 
your perfecto security token.

                                    String securityToken = 
System.getProperty("securityToken");

                                    String browserName = "mobileOS";

                                    DesiredCapabilities capabilities = 
new DesiredCapabilities(browserName, "", Platform.ANY);


capabilities.setCapability("securityToken", securityToken);


capabilities.setCapability("platformName", "Android");

            


                                    RemoteWebDriver driver = new 
RemoteWebDriver(new URL("https://" + cloudName + 
".perfectomobile.com/nexperience/perfectomobile/wd/hub"), capabilities);


driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);


driver.manage().timeouts().pageLoadTimeout(15, TimeUnit.SECONDS);


                                    // Reporting client. For more 
details, see https://developers.perfectomobile.com/display/PD/Java

                                    PerfectoExecutionContext 
perfectoExecutionContext;

                                    if(System.getProperty("reportium
-job-name") != null) {

                                                perfectoExecutionContext 
= new PerfectoExecutionContext.PerfectoExecutionContextBuilder()


.withProject(new Project("My Project", "1.0"))


.withJob(new Job(System.getProperty("reportium-job-name") , 
Integer.parseInt(System.getProperty("reportium-job-number"))))


.withContextTags("tag1")


.withWebDriver(driver)


.build();

                                    } else {

                                                perfectoExecutionContext 
= new PerfectoExecutionContext.PerfectoExecutionContextBuilder()


.withProject(new Project("My Project", "1.0"))


.withContextTags("tag1")


.withWebDriver(driver)


.build();

                                    }

                                    ReportiumClient reportiumClient = 
new 
ReportiumClientFactory().createPerfectoReportiumClient
(perfectoExecutionContext);

                                    try {

reportiumClient.testStart("Perfecto mobile web test", new 
TestContext("tag2", "tag3"));


reportiumClient.stepStart("browser navigate to perfecto");


driver.get("https://www.perfecto.io");


reportiumClient.stepEnd();


reportiumClient.stepStart("Verify title");


                                                            String 
aTitle = driver.getTitle();


System.out.println(aTitle);


                                                            //compare 
the actual title with the expected title

                                                            if 
(!aTitle.equals("Web & Mobile App Testing | Continuous Testing 
| Perfecto"))


throw new RuntimeException("Title is mismatched");


reportiumClient.stepEnd();

            


                                                //STOP TEST

                                                TestResult testResult = 
TestResultFactory.createSuccess();


reportiumClient.testStop(testResult);

            


                                    } catch (Exception e) {

                                                TestResult testResult = 
TestResultFactory.createFailure(e);


reportiumClient.testStop(testResult);

                                                e.printStackTrace();

                                    } finally {

                                                driver.close();

                                                driver.quit();

                                                // Retrieve the URL to 
the DigitalZoom Report

                                                String reportURL = 
reportiumClient.getReportUrl();


System.out.println(reportURL);

                                    }

                        }

            }

 

The above script will simply validate on the Perfecto.io website the page title and report back results to the reporting dashboard. The exact script above could be also executed against a local desktop machine through the ChromeDriver or others that test developers would set up.

How to Get Started With Cypress

To get started with the Cypress tool, you would need to download the NPM package through “npm install cypress” as well as “npm install mocha” or download the actual Cypress desktop application from the cypress.io website.

Cypress Testing: Practical Considerations for Dev Teams >>

The solution comes with a nice set of JavaScript examples. Once you launch the Cypress tool (./node_modules/bin/cypress open) you can trigger them to run with an embedded Chrome browser that the tools come built with. The fact that the solution already bundles a browser ready to be used makes the ramping up and execution even easier.

Cypress, while built on top of MochaJS, comes with a large set of APIs to leverage browser-specific commands, like setting viewport, clear cookies, basic browsing commands, and more.

Using the Perfecto-Cypress SDK, Perfecto users can: 

  • Run Cypress tests in the cloud in parallel and at scale. 
  • Run Cypress tests from a cloud and a secured repository from the command-line of a continuous integration (CI) tool, such as Jenkins. 
  • Benefit from enhanced quality visibility, tagging, and debugging. 

An example of a test written in the Cypress tool would look something like this:

The cy.visit will simply navigate with the Chrome browser to the URL. cy.get will perform the required action on a specific element on the page like click, perform assertions, or type text.

context('Waiting', () => {

  beforeEach(() => {

    cy.visit('https://example.cypress.io/commands/waiting')

  })

  // BE CAREFUL of adding unnecessary wait times.

  // https://on.cypress.io/best-practices#Unnecessary-Waiting


  // https://on.cypress.io/wait

  it('cy.wait() - wait for a specific amount of time', () => {

    cy.get('.wait-input1').type('Wait 1000ms after typing')

    cy.wait(1000)

    cy.get('.wait-input2').type('Wait 1000ms after typing')

    cy.wait(1000)

    cy.get('.wait-input3').type('Wait 1000ms after typing')

    cy.wait(1000)

  })


  it('cy.wait() - wait for a specific route', () => {

    cy.server()


    // Listen to GET to comments/1

    cy.route('GET', 'comments/*').as('getComment')


    // we have code that gets a comment when

    // the button is clicked in scripts.js

    cy.get('.network-btn').click()


    // wait for GET comments/1

    cy.wait('@getComment').its('status').should('eq', 200)

  })


})

Pros and Cons: Cypress vs. Selenium

Both Cypress and Selenium have pros and cons. The right one will depend on what you need. Here's a quick breakdown of their pros and cons.

Test Framework

Supported Dev Languages

Supported Browsers

Supported Test Frameworks

Setup and Execution

Integrations

Breadth of Testing Options

Maturity, Documentation, Support

Selenium WebDriver

Java, C#, Java Script, Python, Ruby, Objective-C

Chrome, Safari, Firefox, Edge, IE

Mocha JS, Jest, Other super set on top of Selenium (Protractor, WebDriverIO, etc.

Download relevant driver, set up a grid, network and location impacts execution speed

Plenty of integrations (CI, CD, reporting, visual testing, cloud vendors)

End-to-end, security, unit

Robust community, multiple bindings, best practices

Cypress.io

JavaScript, Typescript

Chrome, Electron, Edge, Firefox

Mocha JS

Comes with bundled Chrome browser, no complex environment setup

Limited integrations, but many plugins

End-to-end

Good documentation and code sample, growing community

The two solutions provide different capabilities as in the above table. There are other elements, like the simplicity of writing scripts, reporting, and dashboards, but as a whole and in every tool selection, it all depends on the team’s objectives, skillset, scope to test, and other product-specific considerations.

Cypress is a great growing tool. It is fast to ramp up with and provides a good execution environment that is baked in. It is fully JavaScript/MochaJS oriented with specific new APIs to ease the scripting.

On the other hand, Selenium is a mature framework covering multiple browsers with different development languages. And it works well within a grid to scale testing. The element of test flakiness is debatable between the two tools.

Some would argue that Cypress testing produces more robust and reliable test scripts, while Selenium experts can provide good practices to overcome such problems.

Bottom Line

When it comes to debating Cypress vs. Selenium, we recommend that teams start exploring Cypress to see if it can complement their existing Selenium scripts and grow their overall test coverage and stability.

If you already have a good working Selenium suite that is stable and covers enough functionality, there is no real urgency to switch tools. If you are starting a new project, perhaps having a simple POC with Cypress can prove to be a good future solution for you.

Expand Your Cypress and Selenium Testing With Perfecto

Regardless of which cross-browser testing solution you choose, Perfecto makes testing with Selenium and Cypress end to end testing even better. With end-to-end continuous testing support, Perfecto integrates seamlessly with Cypress and Selenium, while offering the following additional benefits:

  • Boosted test coverage.
  • Parallel testing for faster test executions.
  • Stable and scalable test automation.

Take your Cypress and Selenium testing to the next level. Try Perfecto today.

Try Perfecto

Watch a Demo

This blog was originally published on October 4, 2019, but has been updated for clarity. 

 

Related Content