How to Record Video in Cypress: Simple Guide

To record video in Cypress, enable the video option in the cypress.config.js file by setting video: true. Cypress automatically records videos of test runs when running in headless mode, saving them in the default cypress/videos folder.

Syntax

To enable video recording in Cypress, set the video option in the configuration file. You can also customize the video folder and other options.

• video: true - Enables video recording.
• videosFolder - Path to save videos.
• videoCompression - Controls video file size.

javascript

module.exports = {
  video: true, // Enable video recording
  videosFolder: 'cypress/videos', // Default folder to save videos
  videoCompression: 32 // Compression level (0-51), lower is better quality
};

Example

This example shows how to enable video recording in cypress.config.js and run tests to generate a video file automatically.

javascript

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

module.exports = defineConfig({
  video: true,
  videosFolder: 'cypress/videos',
  videoCompression: 32
});

// Run tests with:
// npx cypress run

// Cypress will record video of the test run and save it in cypress/videos folder.

Output

Test run completes with video saved as cypress/videos/<test-file-name>.mp4

Common Pitfalls

Common mistakes when recording videos in Cypress include:

• Not enabling video: true in the config file.
• Expecting videos when running tests in interactive mode (cypress open)—videos only record in headless mode (cypress run).
• Deleting the cypress/videos folder accidentally.
• Not having enough disk space for video files.

Always run tests with npx cypress run to generate videos.

javascript

/* Wrong: video disabled */
module.exports = {
  video: false
};

/* Right: video enabled */
module.exports = {
  video: true
};

Quick Reference

Option	Description	Default
video	Enable or disable video recording	true
videosFolder	Folder path to save videos	cypress/videos
videoCompression	Video compression level (0-51)	32
trashAssetsBeforeRuns	Delete old videos before new runs	true

Key Takeaways

Enable video recording by setting video: true in cypress.config.js.

Videos are recorded only when running tests in headless mode with npx cypress run.

Videos are saved by default in the cypress/videos folder.

Customize video settings like folder and compression in the config file.

Avoid common mistakes like disabling video or running tests in interactive mode expecting videos.