Skip to main content
← Back to workflows

How to Use Lost Pixel for Visual Regression Testing in GitHub Actions

lost-pixel-lost-pixel -
GitHub Action
v3.16.0
1,314
Contributors
Contributor - chriskalmarContributor - d-ivashchuk
Categories
CICUBE ANALYTICS INSIGHTS
Engineering Velocity: 25% Team Time Lost to CI Issues
View Platform →
3.5h
Time Saved/Dev/Week
40%
Faster Releases
Click for next insight
Usage
name: 'Usage of lost-pixel GitHub Action'
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 20.x
cache: 'npm'

- name: Install dependencies
run: npm ci

- name: Build Storybook
run: npm run build-storybook

- name: Lost Pixel
uses: lost-pixel/lost-[email protected]

lost-pixel logo

Lost Pixel

Open source alternative to Percy, Chromatic, Applitools.


What is Lost Pixel?

Lost Pixel supports visual regression tests by comparing screenshots of web pages or UI components in their current and baseline states. This tool is particularly effective for projects that use Storybook or Ladle for component development. It excels in identifying visual changes that might go unnoticed by other automated tests, ensuring that any visual discrepancies are caught before they affect the final user experience.

How to Set Up Lost Pixel in a Next.js Project Using GitHub Actions

To maintain the visual integrity of our Next.js applications, it’s essential to include visual regression testing in our development workflow. Using Lost Pixel simplifies and automates this process effectively. Here’s how to set up Lost Pixel in a basic Next.js project and run visual regression testing on selected pages with each push:

- name: Set Up Node.js
uses: actions/setup-node@v3

- name: Install Dependencies
run: npm install

- name: Start Next.js Server
run: npm run build && npm run start &
background: true

- name: Run Visual Regression Tests
run: npm run test:visual

- name: Upload Artifacts
uses: actions/upload-artifact@v2
with:
name: visual-regression-screenshots
path: visual-regression-tests/screenshots

This setup ensures that every push triggers a visual regression test for specified pages, and results are archived as artifacts in your GitHub repository. By automating these tests with Lost Pixel, you can detect and address visual discrepancies early in the development process, maintaining the quality and consistency of your Next.js application’s UI.