• Cypress Cheat sheet

Table of content

CypressIO Cheat Sheet

To generate a package.json

npm init

To install CypressIO

npm install cypress

To install Prettier

npm install prettier​

To open Cypress

npx cypress open

To run all .js spec files

npx cypress run

To run a specific .js spec files

npx cypress run --spec "file path"
By default, Cypress runs in headless mode.

To run in a headed mode

npx cypress run --headed --spec "file path"

To run in a headless mode with a different browser

npx cypress run --headless --spec "file path"--browser chrome

To run in a headed mode with a different browser

npx cypress run --headed --spec "file path"--browser chrome

Format to write a CSS selector

Using Syntax of CSS
ID name #idname
Class name .classname[make sure that there is no space between the class name, if so instead of space replace it by . .For example .cypress.io
Attributes [attribute=value]
Tag name
  • tagname#idname [OR]
  • tagname.classname [OR]
  • tagname[attribute=value]

Intelligent code completion

/// <reference types="cypress" />
Commonly used commands
  • cy.get() : Gets the CSS of the element
  • cy.wait() : Time should be passed in milliseconds. Halts the process for the particular period of time
  • cy.pause() : Pause the execution of the test only if we manually click the pause button the execution of the test resumes.
  • cy.click() : Performs single click action
  • cy.dblclick() : Performs double click action
  • cy.rightclick() :Performs right click action
  • cy.log() : Prints the log in the test runner
  • cy.reload() : Refreshes the Webpage
  • cy.clear() : Clears the space before typing in the field
  • cy.type() : To type in the Webpage element
  • cy.clearCookies() : Clears cookies of the webpage
  • cy.clearLocalStorage() : Clears the Local storage of the web page
  • cy.url() : Mostly used to check the URL while navigating. Gets the current URL
  • cy.contains() : Checks whether the element contains a specific word.
  • cy.go("back") OR: cy.go(-1) : To go to the previous Page
  • cy.go("forward") OR cy.go(1) : To go to the next page
  • cy.get('CSS').check() : To click the check box
  • .prev() : Gets the previous element CSS
  • .siblings(): Gets the next element CSS
Handling dropdowns:

static dropdowns: Select supports value or text as parameter

cy.get('select').select('option1').should('have.value','option1')

dynamic dropdowns: Enter the value and click on the value.

cy.get('#country').type('dev').each(($el, index, $list) => {
        if ($el.text() === "Chercher") {
            $el.click()
        }
    )
}
$el.get('#country').should('have.value', 'Chercher')

Handling visible and invisible elements : 

cy.get('#displayed-text').should('be.visible')
cy.get('#hide-textbox').click()
cy.get('#displayed-text').should('not.be.visible')
cy.get('#show-textbox').click()
cy.get('#displayed-text').should('be.visible')
Handling child tabs

In CypressIO, we cannot directly handle the child windows. To handle the child tabs, the jQuery method invoke() should be used. .invoke("removeAttr", "target")removes the target attribute and allows cypress to load the new link in the same window.

cy.get(":nth-child(17) > .alsosee > a")
      .invoke("removeAttr", "target")
      .click();

Iterates and gets the text for each element and if the text matches, click on the element.

cy.get('#abc').find('#a').each(($el, index, $list) => {
            const text = $el.find('.h4').text()
            if ((text.contains('learner')) {
                    $el.find('button').click()
                }
            }

Cypress Hooks 

//Same for before,after,afterEach
beforeEach(function () { 
    cy.log("before each" );
  });

Cypress tags

//Only tag
it.only("dummy block 1", () => {
    //TODO
});
//Skip tag
it.skip("dummy block 2", () => {
    //TODO
});

Cypress Screenshots

//Fullpage screenshot
cy.screenshot({ capture: "fullPage" });
//single element screenshot
cy.get("CSS of the element to take screenshot").screenshot();

Keyboard simulation

  cy.get("CSS or Xpath").type("type something{enter}");

Mouse Hover

//show method can be applied only for the immediate parent
    cy.get("CSS").invoke("show");
    cy.contains('Cherchertech').click()

Handling alert

  cy.on("window:alert", (str) => {
    //window:alert is the event which get fired on alert open
      expect(str).to.equal("I am alert");
    cy.get('[name="alert"]').click();
    });

Handling Confirmation popup

cy.get('[name="confirmation"]').click();
    cy.on("window:confirm", (str) => {
      expect(str).to.equal("I am confirm");

Canceling Confirmation popup

cy.on("window:confirm", (str) => {
      return false;
    });
    cy.get('[name="confirmation"]').click();

Handling prompt

 cy.window().then(function(promptelement){
    cy.stub(promptelement, "prompt").returns("Hello");
    cy.get('[name="prompt"]').click()

To scroll to a specific element

cy.get().scrollIntoView();
[OR]
cy.get().scrollIntoView(options)

Scrolling the page

cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)
[OR]
.scrollTo(position)
.scrollTo(x, y)
.scrollTo(position, options)
.scrollTo(x, y, options)

To write in the JSON file

//To write in JSON file
 cy.writeFile("Filename.json", { "Data" });
//To write in txt file
cy.writeFile("Filename.txt", "Data");

To read the JSON file

//To read data from JSON file
cy.readFile("filename.json")
//To read data from txt file
cy.readFile("filename.txt")

Selecting an option from the dropdown

.select(value)
.select(values)
.select(value, options)
.select(values, options)

API- PUT method

it("test GET", () => {
  cy.request("GET", "https://chercher.tech/sample/api/product/read?id=90", {
  }).then((response) => {
    // response.body is automatically serialized into JSON
    cy.log(response.body);
  });
});

API-POST method

  cy.request({
      method: "POST",
      url: "https://chercher.tech/sample/api/product/update",
      body: {
        name: "cherchertech",
        description: "postmethod",
        price: "200000",
      },

API-PUT method

 cy.request({
      method: "PUT",
      url: "https://chercher.tech/sample/api/product/update",
      body: {
        id:"3789",
        name: "cherchertech",
        description: "putmethod",
        price: "200000",
      },

API-DELETE method

  cy.request({
      method: "DELETE",
      url: "https://chercher.tech/sample/api/product/delete",
      body: {
        id: "3785",
      },

API-PATCH method

 cy.request({
      method: "PATCH",
      url: "https://chercher.tech/sample/api/product/update",
      body: {
     id: "3787",
     description: "PATCHmethod",
      },

To generate spec, Nyan or dot reporter. Give the below setting in the cypress.json

//Instead of spec give Nyan or dot to generate the respective reporter
{
  "reporter": "spec"
}

Install the Team city reporter

npm install cypress-teamcity-reporter --save-dev

To generate the Teamcity reporter

npx cypress run --reporter cypress-teamcity-reporter

Install JUnit reporter

npm install cypress-junit-reporter --save-dev

In the cypress.json file give the below configuration to avoid the overriding of the result files of the JUnit reporter.

{
  "reporter": "mocha-junit-reporter",
"reporterOptions": {
   "testsuitesTitle": true,
   "mochaFile": "./cypress/reports/junit.[hash].xml"
}
}

To generate the JUnit reporter

npx cypress run --reporter mocha-junit-reporter
Steps to generate Mocha reporter

Install Mocha

npm install mocha --save-dev

Install cypress-multi-reporters : Generate multiple mocha reports in a single mocha execution.

npm install cypress-multi-reporters --save-dev​

Install mochawesome: Mochawesome is a custom reporter for the Javascript testing framework in cypress. It generates an HTML report of the tests.

npm install mochawesome --save-dev​

Install mochawesome-merge: It Merges the several Mochawesome JSON reports.

npm install mochawesome-merge --save-dev​

Install mochawesome-report-generator (marge): Marge takes the JSON output from mochawesome and generates an HTML report. Marge - mochawesome-report-generator.

npm install mochawesome-report-generator --save-dev​

To combine all the reports and execute

npm run combine-reports

To generate the report for the combined report

npm run generate-report
Cucumber plugin

Install cucumber

npm install --save-dev cypress-cucumber-preprocessor​

Cucumber Hooks

const {Before,After,Given,Then} = require("cypress-cucumber-preprocessor/steps");
//Change Before to After to use the After hook
Before(() => {
});
Visual Regression Test

Install Image snapshot plugin

npm install cypress cypress-image-snapshot

Adding the Image snapshot plugin in the plugin/index.js

const { addMatchImageSnapshotPlugin } = require ("cypress-image-snapshot/plugin")
module.exports = (on, config) => {
  addMatchImageSnapshotPlugin(on,config)
}

Add a custom command in the support/command.js for the image snapshot plugin

import { addMatchImageSnapshotCommand} from "cypress-image-snapshot/command"
addMatchImageSnapshotCommand({
    failureTreshold: 0.00,
    failureTresholdType:'percent',
    customDiffConfif:{treshold:0.0},
    capture: 'viewport'
})
Cypress.Commands.add("setResolution",(size)=>{
    if(Cypress._.isArray(size)){
        cy.viewport(size[0], size[1])
    }
    else{
        cy.viewport(size)
    }
})

Command to take the snapshot

cy.matchImageSnapshot()

To install Percy

npm install @percy/cypress
Recommended Readings

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions