Comparing Testing Tools: Cypress vs. Selenium

Marie Drake @mcruzdrake

Principal Test Automation Engineer

Giridhar Rajkumar @vgrk2017

Test Automation Consultant

Agenda

What is Selenium?
What is Cypress?
Architecture differences
Test Walkthrough
Feature differences between Selenium and Cypress
Questions?

What is Selenium?

https://www.selenium.dev/

Selenium WebDriver is a W3C Recommendation

Source - https://www.selenium.dev/

Selenium Architecture

Bindings & Support Classes

Driver

Browser

JSON Wire Protocol

What is Cypress?

https://www.cypress.io/

Source - https://cypress.io

What is Cypress?

A tool which simulates browser actions like a real user
Provides an easy way for Developers and QAs to write tests.
A great alternative to Selenium, but built differently.

Cypress Architecture

Code

Browser

Executes commands

directly into browser

Framework Setup

Source - https://cypress.io

Selenium Installation

Cypress installation

npm i cypress

npm i selenium-webdriver
npm i chai
npm i mocha

// download chromedriver 
// set your PATH variable 
// to include location 
// for chromedriver

Selenium Demo

https://github.com/mdcruz/webdriverjs-sample

Todo App

http://todomvc.com/examples/react/#/

const { Builder, By, Key, until } = require('selenium-webdriver');
const { expect } = require('chai');

beforeEach(async () => {
    driver = new Builder().forBrowser('chrome').build();
    await driver.get('http://todomvc.com/examples/react/');

    newTodoField = By.css('.new-todo');
    todoList = By.css('.todo-list li');

    await driver.wait(until.elementLocated(newTodoField));
    await driver
      .findElement(newTodoField)
      .sendKeys('do lunch and learn about Cypress', Key.ENTER);
    await driver.findElement(newTodoField).sendKeys('have lunch', Key.ENTER);
  });

afterEach(async () => driver.quit());

it('should add a new todo successfully', async () => {
    await driver.wait(until.elementLocated(todoList));
    await driver
      .findElements(todoList)
      .then((elements) => expect(elements.length).to.equal(2));
  });

it('should mark a todo item as completed', async () => {
    await driver.findElement(By.css('.toggle:first-child')).click();
    await driver.findElement(By.linkText('Completed')).click();
    await driver
      .findElements(todoList)
      .then((elements) => elements[0].getText())
      .then((text) =>
        expect(text).to.equal('do lunch and learn about Cypress')
      );
  });

Cypress Demo

https://github.com/mdcruz/cypress-demo-todo

/// <reference types="cypress" />

beforeEach(() => {
    cy.visit('http://todomvc.com/examples/react/');
    cy.get('.new-todo').as('addTodo');

    cy.get('@addTodo').type('do lunch and learn about Cypress {enter}');
    cy.get('@addTodo').type('have lunch {enter}');
  });

it('should add a new todo successfully', () => {
    cy.get('.todo-list').find('li').should('have.length', 2);
  });

it('should mark a todo item as completed', () => {
    cy.get('.toggle').first().click();

    cy.contains('Completed').click();
    cy.getFirstTodoItem().should(
      'be.equal',
      'do lunch and learn about Cypress'
    );
  });

Cypress Test Runner

Comparisons

Actual Comparison

Selenium

Cypress

Testers

Developers

but Testers too

Programming Languages

Selenium

Cypress

1. Java

2. C#

3. JS

4. Ruby

5. Python

6. PHP

1. JS

2. TS

Browser Supports

1. Chrome

2. Mozilla Firefox

3. Safari

4. Opera

5. Internet Explorer

6. Edge

Canary
Chrome
Chromium
Edge
Edge Beta
Edge Canary
Edge Dev
Electron
Firefox (Beta support)
Firefox Developer Edition (Beta support)
Firefox Nightly (Beta support)

Selenium

Cypress

v4.x

Comparison - Selenium Side

Selenium	Cypress
TestNG, JUnit, nUnit, xUnit, Cucumber, Mocha etc.	Mocha
Remote execution	No Remote Execution Supported
Support for multiple tabs and cross domain testing	No direct multiple tabs support and only supports running tests in 1 domain
Excellent support for Cross-browser testing tools like BrowserStack, SauceLabs etc.,	No 3rd party cross-browser testing tools support
Excellent support for mobile testing like Appium	Mobile testing not possible
Excellent community support	Evolving community support

Comparison - Cypress Side

Advanced issue found

▲

Cypress	Selenium
Faster execution	Slower
No Driver Dependencies	Different WebDriver versions for different browser versions
Built-in Mock Server, Spies & Clocks	No Mocking support
XHR Validation Support	No XHR support, but can be achieved using 3rd party tools
Cypress Test Runner with features like Selector Playground, integration with Developer Tools	Selenium IDE (record and playback) is great, but not as good as Cypress

Comparison - Cypress Side

Cypress	Selenium
API Testing Support - End to End Testing Tool	No API Testing Support as Selenium is just a browser automation tool
Automatic retries	Implicit & explicit waits
Automatic screenshots & Videos	No automatic screenshots or videos
Easy install with one command	Installation of multiple components
Clear error messages	Error messages sometimes confusing (long stack trace errors)
Excellent documentation	Average documentation

Selector Playground

Clear Error Messages

Scenario: Selector for the new todo element was changed to

 newTodoField = By.css('new-todo');

XHR Validation Example

it('should return mock data', () => {
  cy.fixture('unsplash').as('unsplashData');
  cy.server();
  cy.route('search/photos?query=mock+', '@unsplashData');

  cy.get('@searchInput').type('mock {enter}');
  cy.get('@imageGallery')
    .should('be.visible')
    .and('have.attr', 'description', 'This is a mock data')
    .and('have.length', 10);
});

BrowserMob Proxy

What's common?

Both Selenium & Cypress are Browser Automation tools
Open-sourced (Cypress has Commercial Dashboard)
Structured & Customised Reporting
CI/CD Pipeline Support
Parallel Execution

Questions?

@mcruzdrake

@vgrk2017

Join our UK Meetup Group...

Cypress.io UK

Community