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 screenshots 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('Adglob 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()
});
});
The execution logs show that a complete full-page screenshot was captured (with the filename as CompletePage.png) and also a screenshot of 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 a true value by default. Due to this, the screenshots are always captured for failure tests.
Also, the screenshots folder parameter has the value cypress/screenshots value. So, the screenshots are captured within the screenshots folder.
To disable the 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
}