Overview:
Lost Pixel is an open-source visual regression testing tool for frontend applications. It automatically compares screenshots of UI components and pages across code changes to catch unintended visual differences. The tool integrates natively with component story systems like Storybook, Ladle, and Histoire, and can also test pages in frameworks such as Next, Gatsby, and Remix. It supports custom shot workflows with Cypress or Playwright. Lost Pixel uses GitHub Actions to run tests on every push. It offers both a local core engine (lost-pixel) and a managed SaaS platform with a review UI and team collaboration features.
Core Features:
Storybook, Ladle, and Histoire integration: First-class support for testing all component stories from these tools without additional configuration.
Page testing: Runs visual regression tests against specified URLs in modern frontend apps like Next, Gatsby, and Remix.
Custom shots: Accepts pre-captured screenshots from tools like Cypress or Playwright for flexible testing workflows.
Multi-browser execution: Tests can run in Chrome, Firefox, and Safari (standalone OSS version).
Responsive and viewport testing: Supports test execution at multiple breakpoints and viewport sizes.
Sensitivity thresholds and masking: Allows configurable pixel-difference sensitivity and the ability to mask parts of the UI from comparison.
Flaky test handling: Includes retry utilities and pre-test code execution to reduce flakiness.
Review UI and approval flow (Platform only): Provides a dedicated interface for comparing, approving, or rejecting visual diffs, including team collaboration.
Use Cases:
Developers adding visual regression checks to pull requests in a Storybook- or Ladle-based component library.
Frontend teams running automated visual tests on static pages within Next, Gatsby, or Remix apps.
QA or test engineers integrating screenshot comparison into existing Cypress or Playwright test suites.
System administrators setting up CI pipelines (via GitHub Actions) to catch UI regressions before deployment.
Why It Matters:
Lost Pixel is a focused open-source engine for visual regression testing that covers both component stories and full pages. It avoids vendor lock-in by supporting local execution, multiple browsers, and custom screenshot workflows. The separate platform tier adds a review UI and team approval processes for those who need managed collaboration. Its direct integrations with Storybook, Ladle, and Histoire reduce setup work, and the open-source core is maintained alongside the commercial offering.
