Comparing Testing Tools: Cypress vs. Selenium

Marie Drake @mcruzdrake

Principal Test Automation Engineer

 

Giridhar Rajkumar @vgrk2017

Test Automation Consultant

Agenda

  1. What is Selenium?
  2. What is Cypress?
  3. Architecture differences
  4. Test Walkthrough
  5. Feature differences between Selenium and Cypress
  6. Questions?
 

What is Selenium?

Selenium WebDriver is a W3C Recommendation

Selenium Architecture

Bindings & Support Classes

Driver

Browser

JSON Wire Protocol

What is Cypress?

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

Todo App 

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

1

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);
  });

2

3

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

4

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')
      );
  });

5

Cypress Demo

1

3

4

/// <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'
    );
  });

2

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

 

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

0
 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?

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

Questions?

Join our UK Meetup Group...

Cypress.io UK

Community