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.

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”

 Step 2: Open the above folder in VS code

Step 3: Open Visual Studio Code terminal and run command

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

npm install cypress --save-dev

Step 5: Open Cypress with below command

npx cypress open

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

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

/// <reference types=”cypress”

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.visit('https://google.com/')
                 cy.title().should('eq', 'Google')
            })
})

Step 9  – To open  cypress runner  and run below command

npx cypress open

Now click on E2E Testing

Step 10: Choose desired browser from screen

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

Test Runner Window

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

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

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.