LostPixel

Lost Pixel is an open-source visual regression testing tool. It detects UI changes by comparing screenshots of application components and pages to ensure visual consistency across different versions of a project. The tool helps developers identify unintended layout shifts or styling bugs before they reach production.

The software is deployed as a server-side engine that integrates directly into CI pipelines, with specific support for GitHub Actions. It is designed to work with component libraries and modern frontend frameworks. Users can run visual tests against Storybook, Ladle, and Histoire stories, or target specific application pages built with Next, Gatsby, and Remix. For those using custom testing frameworks, the tool allows the provision of image directories for integrations with Cypress or Playwright.

Key features

• Visual regression testing in Chrome, Firefox, and Safari
• Responsive tests using different breakpoints and viewports
• Flexible sensitivity thresholds for image comparison
• Masking of specific UI elements to exclude them from tests
• Flaky test retries and utilities to reduce instability
• Execution of arbitrary code before tests to prepare the UI
• Parallel execution of tests
• Integration with Storybook, Ladle, and Histoire

The project architecture is split into two distinct parts: the core engine and the Lost Pixel Platform. The core engine handles the technical execution of visual tests, image generation, and difference detection, and it can be used as a standalone tool. The Platform provides a managed interface for reviewing snapshots, a team collaboration system for approving or rejecting visual changes, and specialized support for monorepo execution. This separation allows teams to choose between a self-managed setup or a managed service with a dedicated review UI.

Lost Pixel is a developer tool for quality assurance and frontend development workflows, focusing on automating the detection of visual regressions.