E2E Web Automation with Cypress

nd raIn the era of Digital Transformation, web automation is the best way to reduce manual testing effort. But test flakiness is the biggest concern for automation professionals and that is the reason to explore various tools for Web Automation. In this article, we will explain about most popular automation tool Cypress and help you in writing first Automation Test with Cypress.

Cypress is the Web Automation Tool and primarily used for browser based activities. Cypress is JavaScript based open source tool. Cypress support real word testing problem and works on network layer so tests are highly stable.

Cypress supports Chrome, Edge, Electron and Firefox.

Browsers Supported by Cypress - Chorme, Edge, Electron and Firefox
Browsers Supported by Cypress – Chorme, Edge, Electron and Firefox

Important Features of Cypress:

  • Inbuilt snapshot capture feature.
  • Readable errors and stacks trace (Debug ability).
  • Automatically waits for commands and assertions before moving on.
  • There is no use of selenium or WebDriver.
  • It is very fast, consistent and reliable.
  • There is cross browser running support and also support cloud services.
  • Cypress enables you to write all types of tests.
  • End-to-end tests
  •  Integration tests
  • Unit tests
  • Cypress can be easily integrated in Continuous pipeline.

Prerequisite for Cypress:

  1. Node.js should be installed if not then refer link
  2. Install Visual Studio Code
  3. NPM should be installed  if not then refer link

Steps to set up Cypress Project:

Step 1 – Create a new folder for cypress project.

In below, I have created a folder with name “cypress-demo”

Folder created for Cyprtess Web Automation Code


 Step 2: Open the above folder in VS code

Open Folder in Visual Studio

Step 3: Open Visual Studio Code terminal and run command

Launch terminal from VS Code 

npm init -y

install libraries using npm

Step 4: To insall Cypress, you need to run below command on terminal

npm install cypress --save-dev

Command to install Cypress
Command to install Cypress

Step 5: Open Cypress with below command

npx cypress open

Command to Open Cypress Runner

Cypress E2E Folder
Cypress E2E Folder

Step 6  – Create a file under cypress> e2e Folder ( File name must comprise with .cy)

Cypress js folder
Cypress js folder

Step 7 –Open spec file and Add cypress reference type  to enable cypress scripts

/// <reference types=”cypress”
import cypress command
import cypress command

Step 8 –describe block used for Test Suite and within test suite we need to write test script for test steps.

cy.visit() à used to launch browser and naviage to url

cy.title() -> returns title of the web page.

/// <reference types="cypress"
describe('Google- Website Test',()=>{
     it('Test Case 1: Verify Title', ()=>{
                 cy.title().should('eq', 'Google')
describe section to add report suite
describe section to add report suite

Step 9  – To open  cypress runner  and run below command

npx cypress open
command to run cypress
command to run cypress


Now click on E2E Testing
Cypress Window
Cypress Window

Step 10: Choose desired browser from screen

Choose Browser To Run Test
Choose Browser To Run Test


Step 11:   Click on your cypress test file and it will execute the specific written test.

Cypress code
Cypress code
Test Runner Window
Cypress Window - Test Runner
Cypress Window – Test Runner

Step 10:  To trigger test run below command from command line

npx  cypress run --record --spec "cypress\e2e\thoughtcoders.cy.js"
Cypress Execution Results
Cypress Execution Results

Hope this tutorial helps you in Cypress set up and writing first test using Cypress. Still if you face any issue then feel free to write us on info@thoughtcoders.com

This article is contributed by Shubham Srivastava. Shubham is young SDET professional working with Thoughtcoders.


Write A Comment