BestFREE.nl

Screenshot testing in cypress

•

BestFREE.nl

Updated on

To dive into screenshot testing with Cypress, here are the detailed steps to get you up and running quickly:

👉 Skip the hassle and get the ready to use 100% working script (Link in the comments section of the YouTube Video) (Latest test 31/05/2025)

Check more on: How to Bypass Cloudflare Turnstile & Cloudflare WAF – Reddit, How to Bypass Cloudflare Turnstile, Cloudflare WAF & reCAPTCHA v3 – Medium, How to Bypass Cloudflare Turnstile, WAF & reCAPTCHA v3 – LinkedIn Article

  1. Install Cypress: If you haven’t already, open your terminal and run npm install cypress --save-dev or yarn add cypress --dev.

  2. Open Cypress: After installation, execute npx cypress open to launch the Cypress Test Runner. This will set up the necessary folders and files.

  3. Basic Screenshot Command: Within your Cypress test file .cy.js or .cy.ts, use cy.screenshot to capture a screenshot at any point. For example:

    // cypress/e2e/my-test.cy.js
describe'My First Screenshot Test',  => {


 it'should take a screenshot of the homepage',  => {
    cy.visit'https://example.com'.


   cy.screenshot'homepage-initial'. // Takes a screenshot named 'homepage-initial.png'
  }.
}.

  4. Targeted Screenshots: You can also take a screenshot of a specific DOM element:

    Cy.get’.my-element’.screenshot’specific-element-screenshot’.

  5. Configure Screenshots: Customize screenshot behavior in cypress.config.js. For instance, to turn off automatic screenshots on test failure:
    // cypress.config.js
    const { defineConfig } = require’cypress’.

    module.exports = defineConfig{
    e2e: {
    setupNodeEventson, config {
    // implement node event listeners here
    },

    screenshotsFolder: ‘cypress/screenshots’, // Default location

    screenshotOnRunFailure: false, // Prevents automatic screenshots on failure
    },

  6. Visual Regression Testing VRT Libraries: For robust screenshot comparison visual regression, you’ll need external plugins. Popular choices include:

    • cypress-image-snapshot: https://github.com/jaredpalmer/cypress-image-snapshot A widely used plugin for comparing images against a baseline.
    • cypress-plugin-snapshots: https://github.com/meinaart/cypress-plugin-snapshots Another option that can handle both visual and textual snapshots.
    • Installation for cypress-image-snapshot:
      • npm install --save-dev cypress-image-snapshot
      • Add to cypress/support/e2e.js or e2e.ts: import 'cypress-image-snapshot/command'.
      • Add to cypress.config.js in setupNodeEvents: 
        

const { addMatchImageSnapshotPlugin } = require'cypress-image-snapshot/plugin'.
module.exports = defineConfig{
  e2e: {
    setupNodeEventson, config {


     addMatchImageSnapshotPluginon, config.
      return config.
    },
    // ... other configs
  },
}.
    • Usage with cypress-image-snapshot: 
      

it'should visually match the baseline',  => {
  cy.visit'https://example.com'.


 cy.get'body'.matchImageSnapshot'homepage-visual-regression'.
}.

      The first run generates the baseline. subsequent runs compare against it.

If there’s a difference, the test fails, and a diff image is usually generated.

Mastering these steps lays a solid foundation for integrating visual regression testing into your Cypress workflow, ensuring your application’s UI remains consistent and free of unintended visual changes.

Table of Contents

The Essence of Screenshot Testing in Cypress: Ensuring Visual Integrity

Screenshot testing, particularly when integrated with a robust framework like Cypress, offers a powerful mechanism to ensure that your application’s user interface UI remains consistent across deployments and changes.

It’s about capturing a snapshot of your application’s visual state and comparing it against a previously approved baseline.

This proactive approach helps catch unintended UI regressions—subtle shifts in layout, font changes, color discrepancies, or element misalignments—before they impact end-users.

While Cypress provides built-in screenshot capabilities, true “visual regression testing” requires integrating additional plugins to perform the actual image comparison, identifying pixel-level differences.

The goal is to build confidence that new features or bug fixes don’t inadvertently break the existing visual design, maintaining a professional and reliable user interface. Implementation and testing

Why Visual Regression Testing is More Than Just a “Nice-to-Have”

Visual regression testing VRT isn’t just about finding bugs.

It’s about safeguarding the brand image and user trust.

  • Preventing “Pixel-Perfect” Issues: Even a single pixel shift can disrupt carefully crafted designs, leading to a jarring user experience. VRT catches these minute changes that often escape manual testing or traditional functional tests. A survey by Akamai found that 47% of consumers expect a web page to load in 2 seconds or less, and 40% abandon a website if it takes longer than 3 seconds. While not directly about VRT, this highlights the general intolerance for poor user experience, of which visual glitches are a significant part.
  • Catching Unintended Side Effects: When developers implement new features or refactor code, changes in one part of the application can unintentionally affect another. VRT acts as a visual safety net, immediately flagging any such visual collateral damage.
  • Automating Tedious Manual Checks: Manually verifying every screen and component after each code change is time-consuming, error-prone, and unsustainable for large applications. Automation through VRT saves countless hours and increases testing efficiency significantly. Teams using VRT can reduce manual UI review time by up to 70-80%, according to anecdotal evidence from various engineering blogs.
  • Improving Cross-Browser/Device Consistency: VRT can be extended to test across different browsers and viewports, ensuring a consistent visual experience for all users, regardless of their setup. While Cypress itself doesn’t offer native cross-browser VRT out-of-the-box in the same way as specialized VRT tools, it lays the groundwork for integrating solutions that do.
  • Building Developer Confidence: Knowing that visual integrity is automatically checked allows developers to deploy code with greater confidence, reducing anxiety about breaking the UI and accelerating the release cycle.

The Cypress Advantage for Screenshot Testing

Cypress stands out as an excellent choice for screenshot testing due to its unique architecture and developer-friendly features.

Unlike traditional Selenium-based tools, Cypress runs in the same run loop as your application, providing direct access to the DOM and enabling real-time interaction and debugging.

  • Built-in Screenshot Capabilities: Cypress offers cy.screenshot out of the box, which is simple to use and powerful for capturing the state of the application or specific elements. This core functionality is the bedrock upon which visual regression testing plugins are built.
  • Reliable and Consistent Execution: Cypress’s automatic waiting mechanism ensures that elements are visible and actionable before commands execute, leading to more stable and less flaky tests, which is crucial for VRT where consistent visual states are paramount. Flakiness in tests can be a major productivity drain. a report by Google stated that test flakiness at Google costs engineers millions of dollars annually in lost productivity. Stable screenshot tests reduce this overhead.
  • Developer Experience DX: The Cypress Test Runner provides a fantastic interactive experience. Developers can see their application running, observe commands executing, and debug tests directly in the browser’s developer tools. This significantly speeds up the process of creating and maintaining visual tests.
  • Extensible Ecosystem: While Cypress doesn’t natively compare images, its robust plugin architecture allows seamless integration with powerful visual regression libraries like cypress-image-snapshot or happo.io, turning basic screenshots into a full-fledged VRT solution.
  • Component Testing Integration: With Cypress’s growing support for component testing, you can perform granular visual regression tests on individual components in isolation, ensuring each UI piece renders correctly before assembly. This can lead to catching visual bugs much earlier in the development cycle.

Setting Up Your Cypress Environment for Screenshot Testing

Before into visual regression testing, you need a properly configured Cypress environment. Run visual test with cypress

This involves installing Cypress, setting up your project structure, and understanding the core configuration options that impact screenshot behavior.

Installing Cypress and Project Initialization

The first step is to add Cypress to your project.

This is typically done as a development dependency.

  • Node.js and npm/yarn: Ensure you have Node.js installed version 14.x or higher is generally recommended.
  • Installation Command: Navigate to your project’s root directory in your terminal and run: 
    npm install cypress --save-dev
# OR
yarn add cypress --dev
This command downloads Cypress and adds it to your `package.json` file. As of Q1 2023, Cypress npm downloads average over 1.5 million per week, indicating its widespread adoption.
  • Opening Cypress for the First Time: After installation, launch the Cypress Test Runner to initialize your project:
    npx cypress open
    This command does several things:

    • It checks if Cypress is already installed.
    • If not, it downloads the Cypress binary.
    • It then creates the cypress/ folder structure in your project root, including:
      • cypress/e2e: Where your end-to-end test files will live.
      • cypress/fixtures: For test data.
      • cypress/support: For custom commands and utilities.
      • cypress/screenshots: The default location where screenshots are saved.
      • cypress/videos: Where videos of test runs are saved.
    • It also creates cypress.config.js or cypress.config.ts, the primary configuration file for Cypress.
    • Finally, it opens the Cypress Test Runner UI, prompting you to choose between E2E Testing and Component Testing, and then offers to scaffold example specs.

Understanding cypress.config.js for Screenshot Behavior

The cypress.config.js file is your central hub for configuring Cypress. How to test apps with device passcodes

Several options within this file directly influence how screenshots are captured and stored.

  • screenshotsFolder: This option specifies the directory where Cypress will save all screenshots.

    • Default Value: cypress/screenshots

    • Customization: You can change this path if you prefer a different location, for example:
      // cypress.config.js

      Const { defineConfig } = require’cypress’. Why should companies focus on automated testing

      module.exports = defineConfig{
      e2e: {
      setupNodeEventson, config {

      // implement node event listeners here
      },

      screenshotsFolder: ‘test_results/screenshots’, // Custom folder
      },
      Pro Tip: While changing the default is possible, sticking to the standard cypress/screenshots is often recommended for consistency across projects and easier collaboration, especially when integrating with CI/CD pipelines.

  • screenshotOnRunFailure: This boolean flag controls whether Cypress automatically takes a screenshot when a test fails during a cypress run headless execution.

    • Default Value: true Importance of code reusability

    • Impact: If set to true, a screenshot will be captured at the moment of failure, providing valuable debugging information. If you’re using a visual regression plugin that also captures screenshots on failure, you might set this to false to avoid duplicates.

       // ...


screenshotOnRunFailure: false, // No automatic screenshot on failure

  • trashAssetsBeforeRuns: This option determines whether Cypress clears the screenshotsFolder and videosFolder before each cypress run execution.

    • Impact: Setting it to true ensures you always start with a clean slate, preventing old, irrelevant screenshots from cluttering your results. However, if you rely on retaining specific screenshots for comparison outside of a VRT plugin’s baseline, you might set this to false though this is rare for typical VRT workflows.

      trashAssetsBeforeRuns: false, // Keep old screenshots

  • setupNodeEvents: This is a crucial function within cypress.config.js where you can hook into Node.js events that Cypress emits. It’s the primary place where you’ll integrate visual regression plugins.

      // This is where you'll register plugins for visual regression testing


  // Example: addMatchImageSnapshotPluginon, config.
   return config.
 // ...

    This function gives you access to the Node.js environment where Cypress runs its commands, allowing for deeper customization and integration with third-party libraries that require server-side operations like image comparison. Cloud solutions for devops

By carefully configuring these options, you can tailor Cypress’s screenshot behavior to fit your testing needs and integrate seamlessly with visual regression testing workflows.

Taking Screenshots with cy.screenshot

Cypress provides a straightforward command, cy.screenshot, which is your fundamental tool for capturing visual states of your application.

While simple on the surface, it offers various options for granular control over what gets captured and how.

Basic Usage and Capturing the Entire Page

The most basic use of cy.screenshot captures the entire current viewport of the browser.

  • Command: cy.screenshotfileName, options Maintainability testing

    • fileName optional: A string specifying the name of the screenshot file without the extension. If omitted, Cypress generates a unique name.
    • options optional: An object to customize screenshot behavior.

  • Example:
    // cypress/e2e/homepage.cy.js
    describe’Homepage Screenshots’, => {

    it’should take a full page screenshot of the homepage’, => {

    cy.visit'/'. // Assuming baseUrl is configured in cypress.config.js


cy.screenshot'homepage-full-page'. // Will save as cypress/screenshots/homepage-full-page.png

    it’should take a screenshot without a specific name Cypress generates one’, => {
    cy.visit’/about’.

    cy.screenshot. // Cypress will generate a name like ‘about-page-screenshot-1.png’

  • Output: Screenshots are saved to the cypress/screenshots folder or your custom screenshotsFolder. Each screenshot will be a .png file. If you run multiple times, Cypress will append a number to the file name to prevent overwriting if the same name is used and trashAssetsBeforeRuns is false. Browser compatible smooth scrolling in css javascript

Capturing Specific Elements

Often, you don’t need a screenshot of the entire page.

You only care about a particular component or section.

cy.screenshot can be chained off a cy.get command to capture only that specific element.

  • Chaining:

    Cy.get’selector’.screenshotfileName, options.
    // cypress/e2e/login.cy.js
    describe’Login Form Visuals’, => {
    beforeEach => {
    cy.visit’/login’.
    it’should screenshot the login form’, => { Test ui components

    cy.get'.login-form'.screenshot'login-form-state'.

    it’should screenshot the error message after invalid login’, => {
    cy.get’#username’.type’wronguser’.
    cy.get’#password’.type’wrongpass’.
    cy.get’button’.click.

    cy.get’.error-message’.should’be.visible’.screenshot’login-error-message’.

  • Behavior: When chained, cy.screenshot intelligently captures only the bounding box of the selected element, cropping out the rest of the page. This is incredibly useful for isolating visual changes to specific components.

Customizing Screenshots with Options

The options object allows for fine-grained control over the screenshot capture process.

  • capture: Determines what part of the page to capture. Mobile app performance testing checklist

    • 'viewport' default: Captures only the visible area within the browser’s current viewport.

    • 'fullPage': Scrolls and stitches the entire page content into a single screenshot. Useful for very long pages.
      cy.visit’/long-article’.

      Cy.screenshot’full-page-article’, { capture: ‘fullPage’ }.
      Note: fullPage capture can be slower and might sometimes behave unexpectedly with complex layouts or sticky headers/footers.

  • clip: An object { x, y, width, height } to define a specific rectangular area to capture. This is a more precise way to crop than chaining off an element, though chaining is often more semantic.
    cy.visit’/’.
    cy.screenshot’clipped-area’, {

    clip: { x: 10, y: 10, width: 200, height: 150 }, Page object model in cucumber

  • scale: A boolean to control whether to scale the screenshot to the device pixel ratio DPR.

    • true default: Captures at the native resolution of the device, which is good for retina displays but results in larger files.

    • false: Captures at a 1:1 pixel ratio, ignoring DPR. Useful if you need consistent pixel dimensions regardless of the display.

      Cy.screenshot’no-scaling’, { scale: false }.

  • log: A boolean to control whether the screenshot command is logged in the Cypress Command Log. Wait commands in selenium c and c sharp

    • true default: Command is logged.
    • false: Command is not logged. Useful for high-frequency or internal screenshots that don’t need to appear in the log.

  • onBeforeScreenshot / onAfterScreenshot: Callback functions that execute immediately before and after the screenshot is taken. These are powerful for advanced scenarios, such as hiding dynamic content or flickering elements just before capture, or restoring them afterwards.

    It’should hide dynamic content before screenshot’, => {
    cy.visit’/dashboard’.

    cy.get’.dynamic-ads’.invoke’css’, ‘visibility’, ‘hidden’. // Hide ad
    cy.screenshot’dashboard-no-ads’, {
    onAfterScreenshot: => {

    cy.get’.dynamic-ads’.invoke’css’, ‘visibility’, ‘visible’. // Show ad again
    Best Practice: Use these callbacks judiciously. Over-relying on them for manipulating the DOM can make tests harder to read and maintain. Consider if the element truly needs to be hidden or if it’s indicative of a broader testability issue.

  • overwrite: Only for cy.screenshot when run without a VRT plugin A boolean to allow overwriting an existing screenshot with the same name. Honoring iconsofquality snehi jain

    • false default: Cypress will append a number if a file with the same name exists.
    • true: The existing file will be replaced. Use with caution, as this can inadvertently remove your baseline. This is rarely used in VRT setups where plugins manage baselines.

By leveraging these options, you can create highly tailored screenshots that focus precisely on the areas of your application that require visual verification, making your visual regression tests more efficient and targeted.

Implementing Visual Regression Testing with cypress-image-snapshot

While cy.screenshot captures images, it doesn’t compare them.

For true visual regression testing, you need a dedicated plugin.

cypress-image-snapshot is one of the most popular and robust choices, leveraging the jest-image-snapshot library under the hood.

It allows you to compare current screenshots against baseline images, failing the test if there are significant visual differences. Test apps in landscape portrait mode using appium

Installation and Configuration of cypress-image-snapshot

Integrating cypress-image-snapshot involves a few straightforward steps:

  1. Install the Plugin:
    npm install –save-dev cypress-image-snapshot
    yarn add –dev cypress-image-snapshot

    This command adds the necessary package to your package.json.

  2. Add to cypress.config.js Plugins File:

    You need to register the plugin in your Cypress configuration file, specifically within the setupNodeEvents function. Lazy load images in javascript

This allows the plugin to extend Cypress’s functionality on the Node.js side.

const { addMatchImageSnapshotPlugin } = require'cypress-image-snapshot/plugin'.

       addMatchImageSnapshotPluginon, config.
       return config. // Important: always return the config


    // Optional: configure the folder for image snapshots


    screenshotsFolder: 'cypress/snapshots/actual', // Actual screenshots for comparison


    // Optional: where to store diffs on failure
     diffOutputPath: 'cypress/snapshots/diff',
Note: The `screenshotsFolder` in `cypress.config.js` now points to where *actual* newly captured screenshots will be stored, which the plugin will then compare against baselines. The plugin typically manages its own baseline folder e.g., `cypress/snapshots/base`.

  1. Add to cypress/support/e2e.js Support File:

    You need to import the plugin’s commands into your Cypress support file.

This makes the cy.matchImageSnapshot command available in your test files.
// cypress/support/e2e.js

// This is processed and loaded automatically before your test files.
 import 'cypress-image-snapshot/command'.


If you're using TypeScript, make sure this file is `e2e.ts` and you might need to add `/// <reference types="cypress-image-snapshot" />` at the top or ensure your `tsconfig.json` includes the types.

Writing Your First Visual Regression Test

With the plugin installed and configured, you can now write tests that perform visual comparisons.

  • cy.matchImageSnapshot Command: This is the core command provided by the plugin. It works similarly to cy.screenshot.

    • Usage:
      cy.matchImageSnapshotname, options.

      • name optional: The name for the snapshot. If omitted, Cypress will derive a name from the test title.
      • options optional: An object for plugin-specific configurations see below.

  • Example Test:
    // cypress/e2e/visual-homepage.cy.js
    describe’Homepage Visual Regression’, => {

    it’should match the baseline image of the homepage’, => {

    cy.visit'/'. // Assuming baseUrl is configured


cy.get'body'.matchImageSnapshot'homepage-layout'. // Capture the entire body

    it’should match the header visually’, => {
    cy.visit’/’.

    cy.get’header’.matchImageSnapshot’site-header’. // Capture only the header element

How cypress-image-snapshot Works Baseline Creation and Comparison

The plugin operates on a “record and replay” model:

  1. First Run Baseline Creation:

    • When cy.matchImageSnapshot is called for the first time for a given snapshot name, cypress-image-snapshot captures a screenshot.
    • It then saves this screenshot as the baseline image or “golden master” in a dedicated folder, typically cypress/snapshots/base/<spec-name>/<snapshot-name>.png.
    • The test passes, as there’s nothing to compare against yet.
    • Crucially: You should commit these baseline images to your version control system Git, SVN, etc. so they are available for future comparisons. This ensures consistency across different developer machines and CI/CD environments.

  2. Subsequent Runs Comparison:

    • On subsequent runs, when cy.matchImageSnapshot is called with the same snapshot name:
      • The plugin captures a new screenshot the “actual” image and saves it, often in cypress/snapshots/actual/<spec-name>/<snapshot-name>.png.
      • It then compares this “actual” image pixel-by-pixel against the stored baseline image.
      • If no significant difference is detected within a defined threshold: The test passes.
      • If a significant difference is detected: The test fails.
        • The plugin will typically generate a diff image e.g., cypress/snapshots/diff/<spec-name>/<snapshot-name>.png that visually highlights the differences between the baseline and the actual image. This diff image is invaluable for debugging visual regressions.
        • The test output will also show details about the percentage of pixel difference.

Managing Baselines: Updating and Accepting Changes

One of the most important aspects of VRT is managing baselines.

When a legitimate UI change occurs e.g., a design update, new feature, your existing baselines will no longer match the new visual state, causing tests to fail.

You then need to “update” or “accept” these new visual states as the new baselines.

  • --env updateSnapshots=true Flag: cypress-image-snapshot provides an environment variable to update baselines.
    npx cypress run –env updateSnapshots=true
    npx cypress open –env updateSnapshots=true

    • When this flag is present, instead of comparing, cypress-image-snapshot will overwrite the existing baseline images with the newly captured “actual” images.
    • Workflow:

      1. Make your UI changes.

      2. Run your Cypress tests with updateSnapshots=true.

      3. Review the updated baseline images to ensure they represent the intended new visual state.

      4. Commit the updated baseline images to version control.

      5. Run your tests again without the updateSnapshots flag to verify that everything now passes against the new baselines.

  • Commit Baselines: Always commit your cypress/snapshots/base directory to version control. These are critical assets for your visual tests.

  • Review Diffs: When a test fails due to a visual difference, always review the generated diff images. This helps you quickly determine if it’s a legitimate bug regression or an expected change that requires a baseline update.

By diligently following these steps, you can effectively integrate cypress-image-snapshot into your Cypress testing suite, providing a robust safety net for maintaining the visual integrity of your application.

Advanced Configuration for cypress-image-snapshot

While the basic setup of cypress-image-snapshot is powerful, its true flexibility comes from its extensive configuration options.

These options allow you to fine-tune the comparison logic, ignore specific areas, and manage thresholds to suit the nuances of your application’s UI.

Plugin-Level Options in cypress.config.js

You can configure cypress-image-snapshot globally within your cypress.config.js file, in the setupNodeEvents function, as part of the addMatchImageSnapshotPlugin call.

  • customSnapshotsDir: Specifies where baseline images should be stored.

    • Default: cypress/snapshots/base

    • Example:

      AddMatchImageSnapshotPluginon, config. // Basic usage
      // OR
      addMatchImageSnapshotPluginon, config, {

      customSnapshotsDir: ‘cypress/visual-baselines’,

  • customDiffDir: Specifies where diff images showing discrepancies should be stored.

    • Default: cypress/snapshots/diff

      customDiffDir: ‘cypress/visual-failures’,

  • customReceivedDir: Specifies where actual newly captured images are stored before comparison.

    • Default: cypress/snapshots/actual

      customReceivedDir: ‘cypress/visual-runs’,

  • failureThreshold: The maximum allowable percentage of differing pixels before a test fails. This is crucial for dealing with anti-aliasing, minor browser rendering differences, or dynamic content.

    • Default: 0.01 0.01% of pixels can differ. This is a very strict default.

    • Type: number 0-1

      failureThreshold: 0.03, // Allow up to 3% pixel difference

      failureThresholdType: ‘percent’, // Can also be ‘pixel’ for absolute pixel count
      Important: Finding the right failureThreshold requires experimentation. Too low, and tests become flaky. too high, and they miss subtle regressions. Start low and increase only if necessary, understanding the trade-offs. Many teams find 0.01% to 0.05% to be a good starting point for strict comparisons.

  • failureThresholdType: How failureThreshold is interpreted.
    • Default: 'percent'
    • Options: 'percent' percentage of pixels, 'pixel' absolute number of pixels.
  • customSnapshotsDir: The directory path for baseline screenshots.
  • diffHeight/diffWidth: The dimensions for the generated diff image.
  • noColors: If true, the diff image will be grayscale.
  • pixelMatchConfig: An object for pixelmatch options. pixelmatch is the underlying library used for image comparison. Important options here include:
    • threshold: 0-1 The color difference threshold for marking pixels as “different”. Lower values mean more sensitive comparison. Note: This threshold is different from failureThreshold. pixelMatchConfig.threshold determines what a single pixel is considered different, while failureThreshold determines how many different pixels are allowed overall for the test to pass.
      pixelMatchConfig: {
      threshold: 0.1, // Default is 0.1
  • dumpSnapshots: If true, actual and diff images are always saved, even if the test passes. Useful for debugging but can consume significant disk space.
    • Default: false

Test-Specific Options with cy.matchImageSnapshot

You can override the global plugin configurations for individual cy.matchImageSnapshot calls by passing an options object as the second argument.

This is powerful for handling specific elements or pages that have unique visual characteristics.

  • failureThreshold / failureThresholdType: Override for a specific snapshot.

    // Allow more pixel difference for a dynamic chart

    Cy.get’.chart-area’.matchImageSnapshot’dynamic-chart’, {

    failureThreshold: 0.05, // 5% for this specific snapshot
    failureThresholdType: ‘percent’,

  • diffDirection: Controls how the diff image is displayed.

    • Default: 'horizontal'
    • Options: 'horizontal', 'vertical', 'topToBottom', 'leftToRight'

    Cy.get’body’.matchImageSnapshot’homepage-diff-vertical’, {
    diffDirection: ‘vertical’,

  • threshold within pixelMatchConfig: Specific pixel difference threshold for a single snapshot.

  • customSnapshotsDir / customDiffDir / customReceivedDir: Can also be overridden per snapshot, though this is less common.

Ignoring Elements or Regions

One of the most common challenges in visual regression testing is dynamic content timestamps, advertisements, user-generated data, animations, carousels, video players. These elements change on every run and will cause tests to fail if not handled.

cypress-image-snapshot provides robust ways to ignore them.

  1. Ignoring Specific Elements by Selector ignore option:

    You can pass a list of CSS selectors to the ignore option, and the plugin will “mask” or “black out” these areas before comparison.

    It’should match page layout ignoring timestamps and ads’, => {
    cy.visit’/article’.
    cy.matchImageSnapshot’article-content’, {
    ignore: , // Ignore elements by CSS selector
    Best Practice: Use specific, stable selectors for ignored elements. Using generic selectors like div can inadvertently mask critical areas.

  2. Ignoring Arbitrary Rectangular Regions customDiffConfig.ignoreAreas:

    This allows you to specify precise pixel coordinates to ignore, which is useful for areas that don’t correspond to a clear DOM element e.g., a dynamic background pattern, a specific small section of a canvas.

    It’should match dashboard ignoring a specific region’, => {
    cy.matchImageSnapshot’dashboard-layout’, {
    customDiffConfig: {
    ignoreAreas:

    // Define areas as { x, y, width, height }

    { x: 10, y: 10, width: 100, height: 50 }, // Top-left corner box

    { x: 500, y: 200, width: 150, height: 75 }, // Another box
    ,
    Note: The coordinates are relative to the element being screenshotted. If you cy.get'body'.matchImageSnapshot, the coordinates are relative to the body/viewport. If you cy.get'.my-component'.matchImageSnapshot, they are relative to .my-component.

  3. Hiding Elements with CSS Pre-Snapshot:
    For elements that might cause layout shifts or flickering, sometimes it’s better to hide them before the screenshot is taken using Cypress’s DOM manipulation commands.

    It’should match without animated elements’, => {
    cy.visit’/interactive-page’.

    // Hide all elements with a class of ‘animated-spinner’

    cy.get’.animated-spinner’.invoke’css’, ‘visibility’, ‘hidden’.

    cy.matchImageSnapshot’static-interactive-page’.

    // Optionally make them visible again if needed for subsequent actions

    cy.get’.animated-spinner’.invoke’css’, ‘visibility’, ‘visible’.
    Consideration: While effective, hiding elements alters the true state of the application for the screenshot. Use this carefully, ensuring it aligns with the testing goal.

By leveraging these advanced configurations, you can create a more robust and reliable visual regression testing suite that intelligently handles the complexities of modern web applications, minimizing false positives and focusing on real visual regressions.

Best Practices for Effective Screenshot Testing

Implementing screenshot testing is not just about writing a few lines of code.

It’s about adopting a strategic approach to ensure your tests are reliable, maintainable, and genuinely add value.

Without careful planning and adherence to best practices, visual regression tests can quickly become a source of frustration, leading to flakiness and high maintenance costs.

Ensuring Test Stability and Reliability

Flaky tests are the bane of any automated testing suite, and visual regression tests are particularly susceptible to them due to minor rendering differences, dynamic content, or timing issues.

  • Wait for Page Stability: This is paramount. Before taking a screenshot, ensure all elements have loaded, animations have completed, and dynamic content like data fetching or third-party widgets has settled.

    • Use cy.wait sparingly and with caution, as it’s an arbitrary wait or, preferably, assert for element visibility/state:
      cy.visit’/data-dashboard’.

      // Wait for a specific data table to be visible and populated

      Cy.get’.data-table’.should’be.visible’.and’contain’, ‘Total Sales’.

      // Wait for all animations to complete on a specific element

      Cy.get’.chart-canvas’.should’have.css’, ‘animation-play-state’, ‘paused’. // If you can control animation states
      cy.screenshot’dashboard-stable’.

    • Consider using cy.intercept to mock or wait for API requests to ensure predictable data.

  • Handle Dynamic Content Gracefully: As discussed, dynamic elements timestamps, random data, advertisements, user avatars, live feeds, animated SVGs are a primary source of flakiness.
    • Ignore them: Use the ignore option with cy.matchImageSnapshot or customDiffConfig.ignoreAreas. This is the most common and effective approach.
    • Mock them: If the dynamic content is crucial for the layout but the specific value doesn’t matter, mock API responses to return consistent dummy data.
    • Stabilize them: If possible, freeze animations or set specific dates/times in your application’s state.
  • Standardize Browser Viewports: Browser rendering can vary slightly across different viewport sizes. Always define a consistent viewport for your tests.

    • Set viewportWidth and viewportHeight in cypress.config.js:
      viewportWidth: 1280,
      viewportHeight: 720,

    • Or use cy.viewport within your tests for specific scenarios:
      it’should look good on mobile’, => {

      cy.viewport’iphone-x’. // Predefined viewport
      cy.visit’/’.

      cy.matchImageSnapshot’homepage-mobile’.

    • Data Point: According to StatCounter GlobalStats April 2023, desktop screen resolutions of 1920×1080 still dominate over 20%, followed by 1366×768. For mobile, 360×800 and 414×896 are common. Testing across a range of popular viewports is crucial.

  • Isolate Components for Testing: When possible, test individual components in isolation using Cypress Component Testing. This minimizes external dependencies and makes visual tests more targeted and less prone to side effects from other parts of the page.

    • Example React Component Testing:
      // cypress/component/Button.cy.jsx
      import Button from ‘./Button’.

      Describe’Button Component Visuals’, => {
      it’renders the default button’, => {
      cy.mount.

      cy.matchImageSnapshot’default-button’.
      }.

      it’renders the primary button’, => {

      cy.mount<Button variant="primary">Primary</Button>.


cy.matchImageSnapshot'primary-button'.

Naming Conventions for Snapshots

Consistent and descriptive naming is crucial for managing your baseline images.

  • Descriptive Names: Names should clearly indicate what is being screenshotted and its state.
    • Bad: screenshot1.png
    • Good: homepage-initial-load.png, login-form-error-state.png, product-card-hover.png
  • Path-Based Naming Default: cypress-image-snapshot automatically structures snapshots by spec file. Leverage this. If your spec is e2e/products/product-details.cy.js and your snapshot name is product-info-panel, the baseline will be in cypress/snapshots/base/products/product-details.cy.js/product-info-panel.png. This hierarchical structure is very helpful.
  • Avoid Special Characters: Stick to alphanumeric characters and hyphens/underscores for file names.

Managing Baselines in Version Control

Your baseline images are just as important as your test code and should be treated as such.

  • Commit Baselines: Always commit the cypress/snapshots/base directory or your customSnapshotsDir to your Git repository. This ensures:
    • Consistency: All developers and CI/CD environments use the same baseline.
    • History: You can trace changes to baselines through Git history.
  • Review Baseline Updates Carefully: When running with updateSnapshots=true, meticulously review the new baseline images before committing them. This is your “manual” gate for visual regressions. Are the changes intended? If not, revert the code or fix the visual bug.
  • Clear Old Baselines: If you refactor a test or delete a component, the corresponding baseline images will become orphaned. Periodically e.g., during sprint cleanup or large refactoring, clean up old, unused baseline files to keep your repository tidy. There are community tools or simple scripts you can write for this.

Integrating with CI/CD Pipelines

Automating visual regression tests in your Continuous Integration/Continuous Delivery CI/CD pipeline is where they provide the most value.

  • Headless Mode: Always run Cypress tests in headless mode in CI/CD.
    npx cypress run –headless
  • Environment Variables: Pass necessary environment variables like updateSnapshots=true when intended, or CI=true if your code needs to adapt using the --env flag.
  • Artifacts: Configure your CI/CD pipeline to store the cypress/snapshots/actual, cypress/snapshots/diff, and cypress/videos folders as build artifacts. This way, if a test fails, you can easily inspect the actual screenshot, the diff image, and the video of the test run directly from your CI/CD dashboard. This is crucial for debugging.
    • Example GitHub Actions: 
      - name: Upload Cypress Artifacts
  uses: actions/upload-artifact@v3
 if: failure # Only upload if a test failed
  with:
    name: cypress-screenshots-and-videos
   path: |
      cypress/screenshots
      cypress/videos
     cypress/snapshots/diff # Crucial for failed VRT tests
     cypress/snapshots/actual # Useful for seeing what was captured
  • Avoid Updating Baselines in CI: As a general rule, never run updateSnapshots=true in your main CI/CD pipeline. Baseline updates should be a deliberate, manual step performed by a developer on their local machine after visually verifying the changes. Running updateSnapshots=true in CI would mean automatically accepting any visual change as correct, defeating the purpose of visual regression testing.
  • Parallelization: For large test suites, consider parallelizing your Cypress runs across multiple CI agents to reduce execution time. Tools like Cypress Dashboard or cypress-parallel can help.

By following these best practices, you can establish a robust and efficient screenshot testing workflow in Cypress that effectively catches visual regressions, boosts developer confidence, and contributes to a high-quality user experience.

Handling Common Challenges in Screenshot Testing

Despite its power, visual regression testing isn’t without its challenges.

Dynamic content, responsive design, and subtle rendering differences can lead to flaky tests or a high maintenance burden.

Understanding how to tackle these issues is key to a successful implementation.

Dynamic Content and Flakiness

Dynamic content is arguably the biggest culprit behind flaky visual regression tests.

Anything that changes between test runs—even by a single pixel—will cause a failure unless specifically handled.

  • Problem Examples:
    • Dates and Times: A “Last Updated” timestamp, current date in a header.
    • Random Data: User avatars, ad banners, “trending now” sections, randomized testimonials.
    • Animations and Transitions: Loading spinners, carousels, subtle hover effects, progress bars.
    • Third-Party Widgets: Live chat bubbles, social media embeds, external payment gateways.
    • Network Latency: Images loading at different speeds, causing layout shifts.
  • Solutions:

    • Ignore Regions/Elements: As covered, the ignore option in cypress-image-snapshot is your primary defense. Identify the selectors for dynamic content and add them to the ignore list.
      cy.matchImageSnapshot’dashboard-view’, {
      ignore: ,

    • Hide Elements Programmatically: For very problematic elements or elements that cause layout shifts during the capture, temporarily hide them using cy.invoke'css', 'visibility', 'hidden' or cy.invoke'hide' before the screenshot, and show them again afterward.

      Cy.get’.chat-bubble’.invoke’css’, ‘visibility’, ‘hidden’.
      cy.matchImageSnapshot’clean-page’.

      Cy.get’.chat-bubble’.invoke’css’, ‘visibility’, ‘visible’.

    • Stub/Mock Network Requests: For dynamic content sourced from APIs e.g., product recommendations, stock prices, use cy.intercept to return consistent, static data. This makes the content predictable.

      Cy.intercept’GET’, ‘/api/products/recommendations’, { fixture: ‘static-recommendations.json’ }.as’getRecommendations’.
      cy.visit’/product-page’.

      Cy.wait’@getRecommendations’. // Ensure mock data is loaded

      Cy.matchImageSnapshot’product-page-static-recs’.

    • Freeze Time: If your application uses Date objects directly, libraries like sinon-js can be integrated to “freeze” the system time, making timestamps consistent.

      Cypress.Commands.add’freezeTime’, dateString => {
      const now = new DatedateString.
      cy.window.thenwin => {
      cy.stubwin, ‘Date’.returnsnow.
      // In your test:
      it’should show consistent date’, => {
      cy.freezeTime’2023-01-01T12:00:00Z’.
      cy.visit’/report’.

      cy.matchImageSnapshot’report-fixed-date’.

    • Increase failureThreshold Slightly: As a last resort, if very minor, acceptable pixel differences persist e.g., due to font rendering variations, slightly increase the failureThreshold in your plugin configuration. However, use this cautiously, as it can mask real regressions.

Responsive Design Testing

Modern web applications are inherently responsive, adapting their layout to different screen sizes.

A comprehensive visual regression strategy must account for this.

  • Problem: A single baseline at one viewport won’t catch regressions on other viewports.

    • Test Multiple Key Viewports: Identify the most common screen sizes desktop, tablet, mobile that your users employ. Create separate tests or loops to run your visual comparisons at each of these viewports.

      Const viewports = . // Predefined and custom

      Describe’Responsive Homepage Visuals’, => {
      viewports.forEachviewport => {

      it`should match homepage on ${viewport} viewport`,  => {
   if Array.isArrayviewport {


    cy.viewportviewport, viewport.
   } else {
     cy.viewportviewport.
   }
   cy.visit'/'.


  cy.matchImageSnapshot`homepage-${viewport}-viewport`.

    • Target Components: Focus VRT on responsive components rather than entire pages. For example, test a navigation bar’s collapse behavior, or a card layout’s stacking behavior, at different viewports. This is often more efficient.

    • Specialized Tools: For extremely complex responsive layouts or a very large number of viewports, consider specialized visual testing platforms e.g., Storybook with a visual testing addon, Percy, Chromatic, Applitools Eyes that are built specifically for extensive responsive VRT. These often handle screenshot capture across many browsers/viewports and have advanced diffing algorithms.

Browser and OS Differences

While Cypress runs in a real browser, subtle rendering differences can occur across different browser engines Chromium, Firefox, WebKit for Electron/Safari or even different operating systems Windows, macOS, Linux.

  • Problem: A baseline captured on macOS Chrome might fail on Windows Firefox due to font rendering or slight layout shifts.
    • Choose a Primary Browser for Baselines: Select your primary development browser e.g., Chrome/Electron and use it to generate all your baseline images.
    • Test Across Browsers if critical: If cross-browser visual fidelity is a strict requirement, run your visual tests against different browsers Firefox, Edge, and potentially Electron for simulating Chrome. 
      npx cypress run --browser chrome
npx cypress run --browser firefox
    • Separate Baselines for Different Browsers: If you do test across browsers, you’ll likely need separate baseline folders for each browser, as minor differences are expected and should be validated per browser.
      • Example: cypress/snapshots/base/chrome/..., cypress/snapshots/base/firefox/...
      • This requires custom logic in your setupNodeEvents to direct the plugin to the correct baseline folder based on Cypress.browser.name.
    • Increase failureThreshold Cautiously: A slight increase in the global failureThreshold might be necessary to account for minor, acceptable cross-browser rendering differences.
    • Specialized VRT Platforms: Again, for highly critical cross-browser/OS VRT, dedicated platforms offer cloud-based testing across a vast array of environments and advanced comparison algorithms that are better suited for these nuances.

By systematically addressing these common challenges, you can build a robust and reliable visual regression testing suite with Cypress that truly enhances the quality and consistency of your web application’s UI.

Integrating Screenshot Tests into Your Development Workflow

For screenshot tests to be truly effective, they need to be seamlessly integrated into your daily development practices and continuous integration pipeline.

This ensures they act as a proactive safety net rather than an afterthought or a burden.

Local Development Loop: Fast Feedback

The fastest feedback loop for visual changes is during local development.

Developers should be able to run visual tests quickly and understand failures immediately.

  • Run Tests Locally and Often: Encourage developers to run npx cypress open or npx cypress run frequently while working on UI changes. This allows them to see visual changes in real-time and address regressions before committing code.

  • Interactive Debugging: The Cypress Test Runner’s interactive nature is a huge advantage. When a visual test fails, developers can:

    • See the application state at the point of failure.
    • Inspect the DOM.
    • Examine the generated diff image cypress/snapshots/diff.
    • Use the cypress open mode to run the failing test repeatedly while making code changes and observing the outcome.

  • updateSnapshots as a Developer Tool: The --env updateSnapshots=true flag should be a developer’s primary tool for accepting intended visual changes.

    1. Developer implements a new feature or design update.

    2. Runs Cypress tests with updateSnapshots=true.

    3. Crucially, visually inspects the new baseline images to ensure they are correct and represent the intended design. This manual review is the human gate.

    4. Commits both the code changes and the updated baseline images to version control.

    5. Runs tests without the updateSnapshots flag to verify everything passes with the new baselines.

Pull Request PR Reviews and Visual Changes

PRs are a critical checkpoint.

Integrating visual test results into the PR review process provides another layer of quality assurance.

  • Automated CI Checks: Your CI/CD pipeline should automatically run all visual regression tests on every PR.
    • If tests fail, the PR should be blocked or marked as failing until the visual regressions are resolved either by fixing the code or updating baselines, if the change was intended.
    • Recommendation: Never automatically update baselines in CI. A failed visual test in CI signals a potential issue that needs human review.
  • Visual Diffs in PR Comments: Some advanced CI/CD setups or specialized visual testing platforms can integrate directly with Git providers like GitHub to post visual diffs as comments directly on the PR. This allows reviewers to see pixel-level changes without leaving the PR interface. While cypress-image-snapshot doesn’t do this natively, integrating with cloud-based VRT services e.g., Percy, Chromatic, Applitools often provides this capability.
    • Value: This significantly accelerates visual review and reduces the context switching for developers.
  • Dedicated Reviewers for Visual Changes: For critical UI components or major design overhauls, consider having a dedicated UX/UI designer or a senior front-end developer specifically review the visual changes highlighted by the tests.

CI/CD Pipeline Integration: The Safety Net

The CI/CD pipeline is where visual regression testing truly shines as an automated safety net.

  • Stage Integration:
    • Early Stages: Run a subset of critical, fast-running visual tests early in the pipeline e.g., on feature branch pushes to catch major regressions quickly.
    • Later Stages: Run the full suite of visual tests as part of the main integration/release pipeline before deployment.
  • Artifact Storage: Ensure all relevant artifacts are stored:
    • cypress/screenshots for general test failures
    • cypress/videos for full test run recordings
    • cypress/snapshots/actual the new image that caused the failure
    • cypress/snapshots/diff the image highlighting the pixel differences
    • This allows anyone investigating a failed build to immediately see what broke visually.
  • Notification and Reporting:
    • Configure CI to send notifications Slack, email when visual tests fail, linking directly to the build artifacts.
    • Consider generating comprehensive test reports e.g., using mochawesome-report-generator with Cypress that can include links to screenshots or even embed them for easier viewing.
  • Performance Considerations: Visual tests can be resource-intensive due to image processing.
    • Caching: Cache node_modules and Cypress binaries in your CI pipeline to speed up installation.
    • Parallelization: Use Cypress Dashboard’s parallelization or other tools to run tests across multiple CI machines concurrently.
    • Selective Testing: In large projects, consider running visual tests only on parts of the application affected by the current changes e.g., based on Git diffs. This requires more sophisticated tooling.

By embedding screenshot testing as a first-class citizen in your development and deployment workflows, you transform it from a mere technical tool into a powerful quality assurance mechanism that safeguards your application’s visual integrity and enhances overall product quality.

Alternatives and Beyond Cypress Screenshots

For highly critical applications, extensive cross-browser/device needs, or advanced visual AI, dedicated visual testing platforms offer capabilities beyond what a single Cypress plugin can provide.

Specialized Visual Testing Platforms

These are often cloud-based services designed specifically for visual regression testing.

They capture screenshots, perform comparisons, and provide reporting and integration features far beyond what a local plugin typically offers.

  • Applitools Eyes:
    • Strengths: Industry leader, highly advanced AI-powered visual comparison engine “Eyes” technology that understands layout, content, and purpose rather than just pixels. It significantly reduces false positives from minor rendering differences. Offers extensive cross-browser and device testing, automatic baseline management, and comprehensive dashboards. Integrates with Cypress via its SDK.
    • When to Use: When pixel-perfect accuracy with minimal flakiness is paramount, for complex UIs, large test suites, or when testing across a wide matrix of browsers/viewports is required. Can be integrated with Cypress for test execution, but the visual comparison happens on their cloud platform.
    • Considerations: Commercial product, can be expensive for large-scale usage.
  • Percy BrowserStack:
    • Strengths: A popular visual review platform that integrates easily with CI/CD. It captures screenshots from your tests e.g., Cypress, Playwright, Storybook, uploads them to their cloud, and provides a beautiful UI for reviewing visual changes and accepting/rejecting baselines. Handles cross-browser testing well.
    • When to Use: When you need a collaborative visual review workflow, comprehensive baseline management, and a robust cloud infrastructure for storing and comparing millions of snapshots. Excellent for teams that need to involve designers or product managers in the visual review process.
    • Considerations: Commercial product.
  • Chromatic Storybook:
    • Strengths: Specifically designed for component-level visual regression testing within the Storybook ecosystem. It builds and hosts your Storybook, captures snapshots of every component state, and provides a visual diffing tool. Excellent for maintaining design system consistency.
    • When to Use: If you heavily use Storybook for component development and want to ensure the visual integrity of your design system components in isolation.
    • Considerations: Best suited for component testing, less for full end-to-end page regressions. Commercial.
  • Playwright with jest-image-snapshot or similar:
    • Strengths: Playwright is another powerful browser automation library from Microsoft. Like Cypress, it doesn’t have native VRT but integrates very well with jest-image-snapshot the same underlying library cypress-image-snapshot uses. Playwright offers excellent cross-browser support Chromium, Firefox, WebKit out-of-the-box, making it a strong contender for VRT across different browser engines.
    • When to Use: If your team prefers Playwright’s API or needs stronger native cross-browser testing capabilities directly from the test runner without relying on external services for browser orchestration.
    • Considerations: Different API than Cypress, might require a separate setup if you already use Cypress.
  • Storybook with Visual Testing Addons:
    • Strengths: Storybook itself a UI component explorer can be augmented with various visual testing addons. This allows you to define different states for your components and then run visual tests on them in isolation. Examples include storybook-addon-visual-test.
    • When to Use: For granular, component-level visual testing, ensuring your design system elements are robust and visually consistent. This is often complementary to end-to-end VRT.
    • Considerations: Limited to components, not full-page layouts.

Choosing the Right Tool/Strategy

The choice of visual testing tool or strategy depends on several factors:

  • Budget: Commercial tools offer more features but come at a cost. Open-source solutions are free but require more setup and maintenance.
  • Scale: How many pages/components do you need to test? How many different viewports/browsers? Larger scale often benefits from commercial cloud solutions.
  • Complexity of UI: Highly dynamic UIs with subtle visual nuances might benefit from AI-powered tools.
  • Team Size and Workflow: Do you need a collaborative review process? How technical are your designers?
  • Existing Tooling: If you’re already heavily invested in Cypress, cypress-image-snapshot is a natural starting point.
  • Tolerance for Flakiness: How critical is it to have zero false positives? AI-powered tools tend to reduce flakiness significantly.

For most teams starting with visual regression testing in Cypress, cypress-image-snapshot is an excellent, cost-effective, and powerful solution.

For teams needing more advanced capabilities, especially related to cross-browser testing, sophisticated diffing, or a dedicated visual review workflow, exploring the specialized platforms mentioned above becomes a worthwhile next step.

Remember, the goal is always to balance coverage, reliability, and maintenance effort to ensure your visual tests genuinely support your development process.

Frequently Asked Questions

What is screenshot testing in Cypress?

Screenshot testing in Cypress involves capturing images of your web application’s UI at specific points during test execution.

When combined with a visual regression testing VRT plugin, it allows you to compare these newly captured screenshots against previously approved “baseline” images to detect unintended visual changes regressions in your application’s layout, styling, or elements.

How do I take a basic screenshot in Cypress?

You can take a basic screenshot in Cypress using the cy.screenshot command.

For example, cy.screenshot'homepage-view' will capture the current viewport and save it as homepage-view.png in your cypress/screenshots folder.

Can Cypress do visual regression testing natively?

No, Cypress does not provide native visual regression testing capabilities for comparing images out-of-the-box.

Its built-in cy.screenshot command only captures images.

To perform image comparison and visual regression testing, you need to integrate a third-party plugin like cypress-image-snapshot or use an external visual testing platform.

What is cypress-image-snapshot?

cypress-image-snapshot is a popular Cypress plugin that extends Cypress’s capabilities to perform visual regression testing.

It integrates jest-image-snapshot to compare screenshots against a baseline, failing the test if there’s a significant pixel difference and optionally generating a diff image.

How do I install cypress-image-snapshot?

You install cypress-image-snapshot using npm or yarn: npm install --save-dev cypress-image-snapshot. After installation, you need to configure it in your cypress.config.js setupNodeEvents function and import its commands in your cypress/support/e2e.js file.

Where are Cypress screenshots saved by default?

By default, Cypress saves screenshots to the cypress/screenshots folder within your project directory.

This path can be configured in your cypress.config.js file using the screenshotsFolder option.

How do I update baselines for cypress-image-snapshot?

To update baselines for cypress-image-snapshot, you run your Cypress tests with the environment variable updateSnapshots set to true. For example: npx cypress run --env updateSnapshots=true. This will overwrite the existing baseline images with the newly captured screenshots. Always review updated baselines manually before committing.

Should I commit baseline images to Git?

Yes, it is highly recommended to commit your baseline images typically found in cypress/snapshots/base or your customSnapshotsDir to your version control system Git. This ensures that all team members and your CI/CD pipeline are using the same reference images for comparisons, maintaining consistency across environments.

How do I ignore dynamic content in screenshot tests?

You can ignore dynamic content by using the ignore option in cy.matchImageSnapshot, providing CSS selectors for the elements you want to mask out.

For example: cy.matchImageSnapshot'my-page', { ignore: }. Alternatively, you can use customDiffConfig.ignoreAreas to define specific pixel regions to ignore.

What is failureThreshold in cypress-image-snapshot?

failureThreshold is a configuration option in cypress-image-snapshot that defines the maximum allowed percentage or absolute number of pixels of difference between the baseline and actual screenshot before a test fails.

It helps account for minor, acceptable rendering variations.

How do I test responsive designs with screenshots in Cypress?

To test responsive designs, you can use cy.viewport to change the browser’s viewport size before taking screenshots.

You would typically run the same visual tests at different key viewport dimensions e.g., desktop, tablet, mobile and maintain separate baselines for each viewport.

Can I capture only a specific element’s screenshot?

Yes, you can capture a screenshot of a specific DOM element by chaining cy.screenshot or cy.matchImageSnapshot off a cy.get command.

For example: cy.get'.my-component'.screenshot'component-only'.

How can I make my screenshot tests more reliable?

To improve reliability, ensure your application is fully stable before taking screenshots wait for animations, data loading. Handle dynamic content by ignoring or mocking it. Use consistent viewports.

And, for very minor, unavoidable differences, adjust the failureThreshold cautiously.

What is the difference between cy.screenshot and cy.matchImageSnapshot?

cy.screenshot is a built-in Cypress command that simply captures an image of the current page or element.

cy.matchImageSnapshot is a command provided by the cypress-image-snapshot plugin that captures an image AND then compares it against a stored baseline image, failing the test if there are significant visual differences.

How do I integrate screenshot tests into my CI/CD pipeline?

Integrate screenshot tests into your CI/CD pipeline by running Cypress in headless mode npx cypress run --headless. Configure your CI to store screenshots, videos, and diff images as build artifacts for debugging failed tests. Never run updateSnapshots=true in CI. baseline updates should be a manual step.

What are common causes of flaky screenshot tests?

Common causes of flaky screenshot tests include: dynamic content timestamps, ads, random data, animations not completing before capture, network latency causing layout shifts, slight differences in font rendering across operating systems/browsers, and not waiting for page stability before taking the screenshot.

Can Cypress capture full-page screenshots?

Yes, cy.screenshot supports capturing full-page screenshots using the { capture: 'fullPage' } option.

This will scroll the page and stitch together a single image of the entire scrollable content, not just the visible viewport.

What are the benefits of visual regression testing?

The benefits of visual regression testing include: catching unintended UI changes early, maintaining consistent visual design across deployments, reducing manual UI testing effort, improving developer confidence, and ensuring a high-quality user experience by preventing visual bugs from reaching production.

What are some alternatives to cypress-image-snapshot for VRT?

Alternatives to cypress-image-snapshot include commercial cloud-based visual testing platforms like Applitools Eyes, Percy, and Chromatic.

These often provide more advanced AI-powered comparison, extensive cross-browser/device testing, and collaborative review workflows.

Playwright also integrates with jest-image-snapshot for VRT.

How often should I run screenshot tests?

Screenshot tests should be run frequently: locally during development to catch issues immediately, on every Pull Request PR to act as a quality gate before merging code, and as part of your Continuous Integration/Continuous Delivery CI/CD pipeline before deploying to different environments.

0.0
0.0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

There are no reviews yet. Be the first one to write one.

​
Amazon.com: Check Amazon for Screenshot testing in
Latest Discussions & Reviews:

•

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

Social Media