Cypress: Web Automation Testing

Cypress Features

•Eng to End Testing

•Integration Tests

•Units Tests

•Time Travel: Takes snapshots of application as your tests runs

•Debuggability readable errors and stack traces

•Automatic waits: automatically waits for commands and assertions

•Consistent Results: Doesn’t use Selenium or WebDriver, fast, consistent and reliable

•Screenshots and Videos: Get screenshots and videos

•Cross browser Testing: Locally or remote (CI CD)

Cypress Project Setup

Step 1 – Install Node.js

Step 2 – Install Visual Studio Code

Step 3: Create a new folder for cypress project

Step 4: Open the folder in VS code

Step 5: Open VS code terminal and run command npm init –y

Step 6: npm install cypress

Npx cypress -v

Cypress 1st Test

Step1: Create a file under cypress> Integration folder

Step2: At the top mention ///<reference types=“cypress”/>

Steps3: Write Test function   //cy.visit('https://react-redux.realworld.io/#/login?_k=2gqraj')

Step 4: Run test npx cypress open

Steps 5: Access elements

Some Common Cypress Commands

cy.visit ()

cy.get()

cy.type()

cy.get().clear()

cy.wait(miliseconds)

Variables

•Let

•Const

•var

•.should('not.exist')

•.should(‘be.visible’)

•.should(‘be.not visible’)

•.should(‘contains’, ‘some text’)

•.should('have.text’, ‘some text')

•.should(‘be.enabled’)

•.should(‘be.disabled')

Verifying Page Title

cy.title().should(‘eq’, ‘ ‘)

Custom Waits

cy.wait(miliseconds)

Step 1: Create a class

Step 2: Add functions

Step 3: export that class so we can use it

Step 4: import that class in test case where we can to use

Step 5: Create a class object

Step6: Call class functions

Step 7: Run the main .js file and see (Note: .js file which is class, we can not directly run it)

1. Writing to File Command

•cy.writeFile()

2. Reading from file Command

•cy.readFile()

Step 1: In Cypress/Fixture folder create a JSON file in our case "example.JSON"

{

  "email": "John@gmail.com",

  "password": "admin123"

}

Step 2: Write the spec file in our case "DemoFixture.js" and get the email and password for our test case from JSON file.

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

it('Demo Fixture', function(){

cy.visit('https://react-redux.realworld.io/#/login?_k=2gqraj')

cy.fixture('example').then((user)=>{

    cy.get(':nth-child(1) > .form-control').type(user.email)

    cy.get(':nth-child(2) > .form-control').type(user.password)

})

    cy.get('.btn').contains('Sign in').should('be.visible').click()

})

Reports in Cypress

Step 1: Download Required npm Packages

npm install cypress-mochawesome-reporter junit-report-merger mocha-junit-reporter cypress-multi-reporters mocha

cypress-multi-reporters: This package is used for configuring multiple reports in our case Junit reporter and HTML reporter.

mocha-junit-reporter: Mocha Junit Reporter generates Junit XML file for each spec.

junit-report-merger: Since the Mocha Junit Reporter generates a JUnit XML file for each spec we need to merge them all at the end to create a single XML file.

cypress-mochawesome-reporter: This package helps to generate HTML reports.

Step 2: Reports configuration in cypress.json

"reporter": "cypress-multi-reporters",

"reporterOptions": {

"reporterEnabled": "cypress-mochawesome-reporter, mocha-junit-reporter",

"cypressMochawesomeReporterReporterOptions": {

"reportDir": "cypress/reports",

"charts": true,

"reportPageTitle": "My Test Suite",

"embeddedScreenshots": true,

"html": true,

"json": true,

"inlineAssets": true

},

"mochaJunitReporterReporterOptions": {

"mochaFile": "cypress/reports/junit/results-[hash].xml"

}

},

"video": false

}

Step 3: Configure plugin/index.js File

Project root folder > open cypress folder > open plugin folder > open index.js file

//index.js inside plugin folder

const { beforeRunHook, afterRunHook } = require('cypress-mochawesome-reporter/lib');

const exec = require('child_process').execSync;

module.exports = (on) => {

on('before:run', async (details) => {

console.log('override before:run');

await beforeRunHook(details);

//If you are using other than Windows remove below two lines

await exec("IF EXIST cypress\\screenshots rmdir /Q /S cypress\\screenshots")

await exec("IF EXIST cypress\\reports rmdir /Q /S cypress\\reports")

});

on('after:run', async () => {

console.log('override after:run');

//if you are using other than Windows remove below line (having await exec)

await exec("npx jrm ./cypress/reports/junitreport.xml ./cypress/reports/junit/*.xml");

await afterRunHook();

});

};

Step 4: Add an Entry Into support/index.js

Navigate to cypress folder > open support folder > open index.js file

//index.js inside support folder

import 'cypress-mochawesome-reporter/register';

Step 5: Run Your Test

Run your test with either npx cypress run command.

npx cypress run --spec “cypress/integration/Demo_Project/Demo.js"

Step 6: Viewing HTML File

•Project Root folder > cypress > reports > index.html

•You can use this XML file when you integrate with CI/CD either Jenkins, Azure DevOps, or any other tools.

Cypress Dashboard Configuration

Step 1: Register with dashboard. cypress.io and get the project id and key

https://dashboard.cypress.io/

Step 2: Enter the project id in Cypress.json file "projectId": "h245ts",

Step 3: Run the test cases from terminal

npx cypress run --record --key 8e34dfg66-75451-46cb-b5a1-8c5sd341cf9