Understanding and implementing Cypress snapshot testing

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • snapshot

    Discontinued Adds value / object / DOM element snapshot testing support to Cypress test runner (by cypress-io)

    The @cypress/snapshot module introduces the Cypress snapshot() command which serializes the selected UI component.

  • cypress-plugin-snapshots

    Plugin for snapshot tests in Cypress.io

    The cypress-plugin-snapshots module has already been mentioned earlier, but I'll mention it again as it provides image snapshot functionality as well. The toMatchImageSnapshot() command can take a screenshot of the entire web document or of a specific element.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • puppeteer

    Node.js API for Chrome

    Snapshot tests can be implemented on many testing frameworks, such as serialized data snapshots with Jest, or image snapshots with Selenium and Puppeteer. But in this blog post, we'll be focusing on the Cypress ecosystem.

  • cypress-image-snapshot

    Catch visual regressions in Cypress

    The cypress-image-snapshot module introduces the matchImageSnapshot() Cypress command which can take a screenshot of the entire screen or of the chained element.

  • Enzyme

    JavaScript Testing utilities for React

    Frontend code changes frequently and, every so often, existing UIs break as a result. To combat breaking code changes, well-managed codebases contain a plethora of unit and integration tests. Testing libraries such as Enzyme and React Testing Library provide tools to check whether a DOM node is rendered with the correct properties, styles, and children.

  • cypress-visual-regression

    Module for adding visual regression testing to Cypress

    The cypress-visual-regression module adds the compareSnapshot() Cypress command which takes a screenshot of the full screen or of a single HTML element.

  • cypress-image-diff

    Visual regression test with cypress

    The cypress-image-diff module provides the compareSnapshot() Cypress command which provides functionality similar to that of the above commands.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts