At a Glance:
Lost Pixel is an open-source visual regression testing tool designed as an alternative to Percy, Chromatic, and Applitools, offering first-class integrations with Storybook, Ladle, and Histoire, and supporting visual tests for application pages and custom Playwright/Cypress screenshots.
Overview:
Lost Pixel is an open-source visual regression testing tool for frontend applications and component libraries. It is explicitly positioned as an open-source alternative to Percy, Chromatic, and Applitools. Lost Pixel runs visual tests on Storybook, Ladle, and Histoire stories, as well as application pages built with frameworks like Next.js, Gatsby, and Remix. It also supports a custom shots mode where users provide screenshots taken by tools like Cypress or Playwright. The project consists of a core engine, lost-pixel, which can be used standalone, and an optional managed Lost Pixel Platform that adds a review UI, approval flows, and collaboration features. The project announced it is sunsetting the product to build what is next.
Key Decision Points:
Primary workflow integration: Provides first-class support for Storybook, Ladle, and Histoire component stories, plus page-level testing for specific frontend frameworks and a custom shots mode for Playwright/Cypress screenshots.
Open-source vs. platform capabilities: The core engine and local test execution are open-source, but features like the review UI, seamless approval flow, monorepo execution, and team collaboration require the separate Lost Pixel Platform.
Execution environment: Designed to run within GitHub Actions pipelines, with configuration managed through a
lostpixel.config.tsfile at the project root.Project status: The README states the product is being sunsetted and the team is "building what's next", which directly affects its viability for new long-term adoption.
Core Features:
Multi-storybook-framework support: Runs visual regression tests on Storybook, Ladle, and Histoire story builds.
Application page testing: Tests selected application pages for modern frontend frameworks like Next.js, Gatsby, and Remix.
Custom shots mode: Accepts a directory of screenshots generated by external tools such as Cypress or Playwright for visual comparison.
Multi-browser execution: Supports running visual tests across Chrome, Firefox, and Safari browsers.
Responsive testing: Tests can be configured with different breakpoints and viewports.
Masking and sensitivity control: Supports masking parts of the UI and setting flexible sensitivity thresholds to reduce false positives.
Flaky test utilities: Includes test retries and the ability to execute arbitrary code before tests to reduce flakiness.
Use Cases:
Component library maintainers: Developers using Storybook, Ladle, or Histoire can integrate visual regression tests directly into their CI pipeline to catch unintended visual changes in isolated components.
Frontend application teams using Next.js, Gatsby, or Remix: Teams can run automated visual tests against specified application pages on every push using GitHub Actions.
QA engineers using Playwright or Cypress: Testers can leverage existing Playwright or Cypress test suites to capture screenshots and pipe them into Lost Pixel for visual regression analysis.
Open-Source Alternative Value:
Lost Pixel was explicitly built as an open-source alternative to visual testing services like Percy, Chromatic, and Applitools. Its open-source core engine allows users to run visual regression tests locally or in their own CI pipelines without requiring a managed service for the fundamental testing execution. The first-class integrations with multiple storybook tools and support for custom screenshots via Playwright and Cypress provide a self-contained testing workflow configurable entirely through a TypeScript configuration file. Note that the project is currently being sunsetted, making its value as a long-term dependency uncertain.
