🖼️What is Lost Pixel?

Lost Pixel Platform & Lost Pixel(OSS)

Lost Pixel is an open-source tool to run visual regression tests on your software project. Currently supported modes include Storybook, Ladle, Histoire Page Screenshots(Web app pages) & Custom Screenshots(your own way of making screenshots, e.g. Cypress or Playwright).

Like other tests in software development (e.g., unit and integration tests), visual regression tests exist to detect regressions after changes to the code base have been made. In this case, the focus is on the visual aspect of unintended changes.

Lost Pixel consists of the Lost Pixel engine(OSS) & Lost Pixel Platform(SaaS); learn which one fits your needs the best:

🤝Lost Pixel Platform | Lost Pixel OSS

Why Do I Need Visual Regression Tests?

Visual regression tests do not replace unit and integration tests. They complement them and improve the quality of your delivery.

Lost Pixel Blog - Visual regression testing 101lost-pixel.com

Learn what is Visual Regression Testing and how you can benefit from it

The fact that the user interface is what your customers will see makes it even more important to have these quality checks in place.

Developers must be confident that an introduced code change will not break the app. Manually visiting your app's page (and state) to check if everything is rendered correctly is neither pleasant nor effective. This is a process of the past.

Humans are great at many things - finding visual differences is not one of them.

Use Cases

Here are a few examples that visual regression tests could help with:

Differences In Environments

Developer machines often carry history setups that keep being updated but rarely get a new setup state. They can sometimes deviate from staging and production environments. Catching the resulting differences in production is something that could be prevented.

Review Process

If your team has designers and UX people, reviewing code changes by approving visual updates could be of great value. Lost Pixel enables the review process by providing a screenshot of the version before and after the code change. This makes it super easy to understand what impact the change will have.

Big Engineering Teams

In bigger engineering teams, it is impossible to know and remember each change to the UI introduced by each developer. With good visual regression tests, developers stop worrying about what they might have broken on the other end of the application.

Lost Pixel Blog - Visual regression testing 101lost-pixel.com

Lean the Case Studies for Visual Regression testing

Lost Pixel Blog - 5 reasons to write visual regression testslost-pixel.com

Learn 5 main reasons to add Visual Regression Testing to your test suite

Case studies:

Lost Pixel Blog - Prisma Docs: Visual regression testing case studylost-pixel.com

Top-notch teams like prisma.io are using Lost Pixel to overcome their challenges. Learn from their experience.

Lost Pixel Blog - How Lost Pixel Platform helps Adverity to run 1m visual tests per monthlost-pixel.com

Teams like Adverity run millions of shots per month and make sure their clients are always looking at impeccable UI

Guides: Jump right in

Follow our handy guides to get started on the basics as quickly as possible:

Getting started with LadleGetting started with StorybookGetting started with Next js