Screenshots and videos in CypressIO

Screenshots

Working with screenshots is easy in CypressIO. In cypress, we can take two types of screenshots namely

  • Full page screenshot
  • Single element screenshot

Syntax :

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

Example program :

describe("screenshots", () => {
  it("fullpage screenshot", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
    cy.screenshot({ capture: "fullPage" });
  });
  it("single element screenshot", () => {
    cy.get("div h1").screenshot();
  });
});

Output :

screenshots-output

We can also view the screenshots, by selecting the images in the plugin folder which are automatically saved by cypress with the description in it block as the name of the files as below,

viewing-screenshots

When we run the program in the command line if the program fails, the screenshot of the failed program is automatically taken by cypress and it is saved in the screenshot folder of cypress.

Capturing Videos in CypressIO

When we run the program in the command line the videos are created and are saved in the video folder of the explorer. Make sure in the cypress.json file the below configuration should be "video" is "true" like below,

{
  "video": true,
  "Screenshotsfolder": "cypress/videos",
}

Example program :

describe("screenshots", () => {
  it("fullpage screenshot", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/dropdowns");
    cy.screenshot({ capture: "fullPage" });
  });
});

The program is executed by giving the below command in the command line

npx cypress run --spec "cypress\integration\examples\screenshot.spec.js"

Output :

videos-cypress

In the explorer files, a video is created in the video folder. If we play that video the process which is executed in headless mode is recorded.

video-folder

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions