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
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.