3.4Lost Pixel

Lost Pixel is designed specifically for Next.js and Storybook projects, with a GitHub Action for seamless CI integration.

# .github/workflows/lost-pixel.yml
name: Lost Pixel
on: [pull_request]

jobs:
  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build-storybook

      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3
        env:
          LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}

// lostpixel.config.ts
import { CustomShot } from 'lost-pixel';

export const config = {
    storybookShots: {
        storybookUrl: './storybook-static',
    },
    pageShots: {
        pages: [
            { path: '/', name: 'homepage' },
            { path: '/products', name: 'products' },
            { path: '/login', name: 'login' },
        ],
        baseUrl: 'http://localhost:3000',
    },
    threshold: 0.05,
    generateOnly: false,
};