Cypress end-to-end Testing

1 Min. Read
May 12, 2021

Web Automation Using Cypress

What is Cypress?

  • Cypress is next generation front end testing tool built for the modern web applications.
  • Cypress uses JavaScript to write automated tests.
  • Cypress addresses the key pain points from other automation tools.
  • Cypress built on Node.js and comes packaged as an npm module.
  • As it is built on Node.js, it uses JavaScript for writing tests. But 90% of coding can be done using Cypress inbuilt commands which are easy to understand.
  • Cypress makes our tests very simple when we compared with other tools.
  • Cypress is having different architecture when we compare with selenium.
  • We can write faster, easier and more reliable tests using Cypress.

Key Difference between Cypress and Selenium

Selenium Cypress
For installation the configuration of drivers and language binding is done separately. For installation the drivers and dependencies are easy to install and comes with .pkg file
The Selenium script will not directly speak to browser but talk with the middle layer where all browser drivers are available like
a. Chrome drivers
b. Gecko drivers
c. Safari drivers etc.
The Cypress script will directly speak to the browser as it operates inside it.
The drivers will interpret our script and accordingly send the request to browser then only action will be performed. No middle layer ( drivers) are required to operate the request to browser.
Selenium does not directly interact with browser so it is slow in processing the script. Cypress directly operates inside the browser so it is fast in processing the script.


Before and With Cypress

Cypress Install and Project Setup

  • Node js (Environment setup): Download Node and NPM as we need these environment to install Cypress.
  • Create Cypress working folder (you can create on desktop for ease)
  • Generate package.json which should be inside the working folder (created above) where we specify dependencies.
  • Install Cypress
    npm install cypress
  • Download Visual Studio Code editor

Launch Test Runner

  • How to launch test runner in Cypress.

    1
    
    ./node_modules/.bin/cyress open 
    

Writing First Test cases in Cypress

  • Syntax

    1
    2
    3
    4
    5
    
    describe('My first test', function()){
        it('Does not do much!', function(){
            expect(true).to.equal(true)
        })
    }
    

Test Suite and Test Case Structure in Cypress

  • Syntax

    1
    2
    3
    4
    5
    6
    7
    8
    
    describe('Test Suite', function(){
        it('Test Case 1', function(){
            steps
        });
        it('Test Case 2', function(){
            steps
        });
    });
    


    Thank you for your Time.