Cypress - Screenshots and Videos

---

Cypress can work on screenshots and videos. First, let us understand how Cypress can help in capturing the screenshot.

Screenshots

We can capture both the complete page and particular element screenshot with the screenshot command in Cypress.

In addition to that Cypress has the in-built feature to capture the screenshots of failed tests. To capture a screenshot of a particular scenario, we use the command screenshot.

Screenshot Implementation

The implementation of the screenshot commands in Cypress is as follows −

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //complete page screenshot with filename - CompletePage
      cy.screenshot('CompletePage')
      //screenshot of particular element
      cy.get(':nth-child(2) > button').screenshot()
   });
});

Execution Results

The output is given below −

The execution logs show that complete full page screenshot captured (with filename as CompletePage.png) and also screenshot a particular element (Click for JS Confirm).

These screenshots got captured inside the screenshots folder (in the plugins folder) within the project. The location where the screenshots got captured, can be modified by changing the Global configurations.

CompletePage.png file created for full page image.

The screenshot of the button Click for JS Confirm got captured.

In the Test Runner Settings tab, the parameter screenshotOnRunFailure, set to true value by default. Due to which, the screenshots are always captured for failure tests.

Also, the screenshotsFolder parameter has the value cypress/screenshots value. So, the screenshots are captured within the screenshots folder.

To disable feature of capturing failed screenshots, we have to add the below values in the cypress.json file −

Cypress.Screenshot.defaults({
   screenshotOnRunFailure: false
})

Videos

The video capturing of Cypress is turned on for tests, by default. They are stored in the videos folder within the project.

Once a Cypress test is run with the below mentioned command −

node_modules/.bin/cypress run

We get the console message along with the location of the video, compression details, and so on −

We get the corresponding video in the same location within the project.

To disable the video capture feature, we have to add the below value in the cypress.json file −

{
   "video": false
}