Assuming you are using basic example of Storybook>). This setup will run visual regression tests against all the storybook stories on every push.

You can find more examples in the examples repository. You can learn more about Lost Pixel workflow and get more useful recipes in documentation.

Add lostpixel.config.ts at the root of the project:

``typescript
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
storybookShots: {
storybookUrl: './storybook-static',
},
// OSS mode
generateOnly: true,
failOnDifference: true

// Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
// lostPixelProjectId: "xxxx",
// process.env.LOST_PIXEL_API_KEY,
};
`

Add GitHub action .github/workflows/lost-pixel-run.yml

`yml
on: [push]

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'

- name: Install dependencies
run: npm ci

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

- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.22.0
`

Add lostpixel.config.ts at the root of the project:

`typescript
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
ladleShots: {
//ip should be localhost when running locally & 172.17.0.1 when running in GitHub action
ladleUrl: 'http://172.17.0.1:61000',
},
// OSS mode
generateOnly: true,
failOnDifference: true

// Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
// lostPixelProjectId: "xxxx",
// process.env.LOST_PIXEL_API_KEY,
};
`

Update package.json with following scripts:

`json
"scripts": {
"serve": "npx serve build -p 61000",
"build": "ladle build"
},
`

Add GitHub action .github/workflows/lost-pixel-run.yml

`yml
on: [push]

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'

- name: Install dependencies
run: npm install

- name: Build ladle
run: npm run build

- name: Serve ladle
run: npm run serve &

- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.22.0
`

Add lostpixel.config.ts at the root of the project:

`typescript
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
histoireShots: {
//ip should be localhost when running locally & 172.17.0.1 when running in GitHub action
histoireUrl: './.histoire/dist',
},
// OSS mode
generateOnly: true,
failOnDifference: true

// Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
// lostPixelProjectId: "xxxx",
// process.env.LOST_PIXEL_API_KEY,
};
`

Add GitHub action .github/workflows/lost-pixel-run.yml

`yml
on: [push]

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'

- name: Install dependencies
run: npm install

- name: Build histoire
run: npm run story:build

- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.22.0
`

Add lostpixel.config.ts at the root of the project:

`typescript
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
pageShots: {
pages: [{ path: '/app', name: 'app' }],
// IP should be localhost when running locally & 172.17.0.1 when running in GitHub action
baseUrl: 'http://172.17.0.1:3000',
},
// OSS mode
generateOnly: true,
failOnDifference: true

// Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
// lostPixelProjectId: "xxxx",
// process.env.LOST_PIXEL_API_KEY,
};
`

Add GitHub action .github/workflows/lost-pixel-run.yml

`yml
on: [push]

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'

- name: Install dependencies
run: npm ci

- name: Build Next app
run: npm run build

- name: Run Next app
run: npm run start &

- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.22.0
`

Add lostpixel.config.ts at the root of the project:

`typescript
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
customShots: {
currentShotsPath: "./lost-pixel",
},
// OSS mode
generateOnly: true,
failOnDifference: true

// Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
// lostPixelProjectId: "xxxx",
// process.env.LOST_PIXEL_API_KEY,
};
`

Update your Playwright tests with following line(note, that there is no external dependency needed here):

`javascript
import { test } from '@playwright/test';

test('lost-pixel e2e', async ({ page }) => {
// Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
await page.goto('http://172.17.0.1:3000/context');
await page.click('data-test-id=context-click-counter');
await page.click('data-test-id=context-click-counter');
await page.click('data-test-id=context-click-counter');
await page.click('data-test-id=context-click-counter');
// Run lost-pixel visual regression test after doing some functional testing on the page
await page.screenshot({ path: 'lost-pixel/a.png', fullPage: true });
});
`

Add GitHub action .github/workflows/lost-pixel-run.yml

`yml
on: [push]

jobs:
build:
runs-on: ubuntu-latest
name: Lost Pixel

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 16.x

- name: Install dependencies
run: npm install --legacy-peer-deps

- name: Build Next app
run: npm run build

- name: Run Next app
run: npm run start &

- name: Playwright tests
run: npx playwright install --with-deps && npm run test:e2e

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