Cypress - Screenshots and Videos

Cypress - Screenshots and Videos

Cypress provides robust capabilities for capturing screenshots and recording videos of your test runs. These visual artifacts are invaluable for debugging and understanding test outcomes.

Screenshots

You can capture screenshots of the entire application viewport or specific elements using the cy.screenshot() command. Cypress also has a built-in feature to automatically capture screenshots of tests when they fail, which is extremely helpful for quick diagnosis.

To capture a screenshot programmatically during a test, use the cy.screenshot() command. You can provide a filename and options to customize the capture.

Screenshot Implementation

Here’s how you can implement screenshot commands in a Cypress test:

describe('Visual Test Suite', () => {
    it('Captures screenshots', () => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');

        // Capture a full page screenshot with a custom filename
        cy.screenshot('full-application-page');

        // Capture a screenshot of a specific element
        cy.get('button[onclick="jsConfirm()"').screenshot('confirm-button-element');
    });
});

Execution and Output

When you run this test, Cypress will execute the commands. In the Test Runner, you would visually see the page and the element targeted for the screenshot.

The execution logs in the Test Runner will confirm the screenshot actions. For instance, it might show ‘screenshot: full-application-page.png’ and ‘screenshot: confirm-button-element.png’.

By default, screenshots are saved in the cypress/screenshots folder within your project. Each test file gets its own subdirectory. For example, if your test file is my_test_spec.cy.js, screenshots will be in cypress/screenshots/my_test_spec.cy.js/.

The file full-application-page.png would contain an image of the entire visible part of the web page. The confirm-button-element.png would be an image specifically of the ‘Click for JS Confirm’ button.

Configuration

Screenshot behavior can be configured in your cypress.config.js (or cypress.config.ts) file. The screenshotOnRunFailure option is true by default, meaning screenshots are automatically taken on test failure during cypress run.

The screenshotsFolder option defaults to "cypress/screenshots". You can change this path if needed.

To disable automatic screenshots on failure, you can set screenshotOnRunFailure to false in your cypress.config.js:

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    screenshotOnRunFailure: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Videos

Cypress automatically records a video of each spec file run via cypress run. This feature is enabled by default. Videos are stored in the cypress/videos folder.

When you execute your tests using the command line, for example:

npx cypress run

After the run completes, the console output will typically include information about the video recording, such as its path, duration, and compression details. For example, it might state: ‘Video: cypress/videos/my_test_spec.cy.js.mp4’.

You will find the corresponding MP4 video file in the specified location within your project. This video shows the entire test execution for that spec file.

Configuration

To disable video recording, set the video option to false in your cypress.config.js:

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    video: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

You can also configure other video-related settings like videosFolder, videoCompression, and videoUploadOnPasses (which controls whether videos for passing tests are uploaded to the Cypress Dashboard).