Capture and Manage Screenshots and Videos in Cypress

This tutorial shows you how to automatically capture screenshots of test failure. It will explain to you how you can manually capture your own screenshot. In this tutorial, we will also learn how Cypress can record a video of the entire run. And finally, you will learn some options of what to do with screenshot and video artifacts.

Screenshots

By default, Cypress has the ability to take screenshots, whether you are running Cypress via the cypress open or cypress run commands, even when you are in the CI.

If you want to take a manual screenshot, you can use the cy.screenshot() command.

In addition, Cypress automatically captures screenshots when failure happens during cypress run. Screenshots will not be captured automatically taken on test failure during cypress open.

To turn this behavior off, you will need to set screenshotOnRunFailure to false in the Cypress.Screenshot.defaults().

The screenshots will be stored in the screenshotsFolder which is by default set to cypress/screenshots.

By default, cypress will clear any screenshot that is in the folder before cypress run. If you don’t want to clear your screenshots folder before a run, you should set trashAssetsBeforeRuns to false.

Videos

Cypress will record a video for each spec file when running tests during cypress run. Videos will not be recorded automatically during cypress open.

You can completely turn off video recording by setting video to false within your configuration.

The videos will be stores in the videosFolder which is set to cypress/videos by default.

Once cypress run completes, Cypress will automatically compress the video so as reduce the file size. By default, Cypress will compress the video to a 32 CRF, but you can configure this using the videoCompression property.

Whenever you are using the –record flag to run your tests, the videos will be processed, compressed and uploaded to the Dashboard Service after every spec file runs, whether it is successful or not. If you want to change this behavior to only process videos in the case that the tests fail, you will need to set the videoUploadOnPasses configuration option to false.

Cypress will clear any existing video before a cypress run. If you don’t want to clear your videos folder before a run, you should set trashAssetsBeofreRuns to false.

Video encoding

In the case where your spec files have a long run duration, you may notice a time gap between a finished spec and a new spec file that starts during cypress run. What is happening behind the scene is that Cypress is encoding the captured video and possibly uploading it to the Dashoard Service.  In the case where the machine is encoding the video slowly (which is usually the case for virtual machines that use a single core), the encoding may take a long time. In such cases, you can modify the videoCompression configuration to make the encoding a little bit faster. Here are some common scenarios:

Use minimal compression

{
  "videoCompression": 0
}

This will cause the compression step to be skipped completely, thus, the video will be large but the processing should now be faster.

Disable Compression

{
  "videoCompression": false
}

Next Steps

Having captured screenshots and recorded videos, you can share them with your team via the Cypress Dashboard Service. You can also perform visual regression testing (that is, comparing screenshots of past runs with the current run in order to ensure that nothing has changed).