Lost Pixel
  • 🖼️What is Lost Pixel?
  • 🤝Lost Pixel Platform | Lost Pixel OSS
  • ⚙️Setup
    • Project Configuration
      • Modes
      • Baseline images
    • Integrating With GitHub Actions
    • ⏯️Lost Pixel Platform
  • 👨‍🏫Guides
    • Getting started
      • Getting started with Storybook
      • Getting started with Ladle
      • Getting started with Next js
    • Testing workflow (GitHub Actions)
    • Updating baseline images
  • 🥘Recipes
    • ⏯️Lost Pixel Platform
      • Working with baseline images
      • Local debugging
      • Integrations
      • Monorepo
      • Automatic baseline updates on selected branches
    • 🖼️lost-pixel(OSS)
      • Failing GitHub Action check
      • Automatic baseline update PR
      • Access test run images
    • 🍝General recipes
      • Thresholds
      • Flakiness
      • Viewport tests
      • Masking page elements
      • Executing arbitrary code before tests runs
      • Programmatically generated pages
  • 💡Examples
    • lost-pixel-example-next-js
    • lost-pixel-example-storybook
    • lost-pixel-example-ladle
  • More
    • Telemetry data
  • ⚙️API reference
    • lost-pixel.config.js|ts
    • PageScreenshotParameter
    • Mask
Powered by GitBook
On this page
  • Create Lost Pixel related files
  • Set up the Lost Pixel platform
  • Set Lost Pixel API key on GitHub
  • Your visual regression testing workflow is done 🎊
  1. Setup

Lost Pixel Platform

Setting up Lost Pixel Platform - managed version of Lost Pixel

PreviousIntegrating With GitHub ActionsNextGetting started

Last updated 1 year ago

offers a managed service with a user-friendly interface for a more efficient visual regression testing workflow.

The platform version provides additional features like collaboration tools, automated test runs, and detailed reporting. Upgrading to the Lost Pixel Platform allows you to streamline your visual regression testing process, improve collaboration with your team, and gain access to valuable insights and analytics.

Lost Pixel Platform has first-class integration with GitHub & GitHub Actions but can be set up with any CI provider, given it runs on GitHub

Create Lost Pixel related files

lost-pixel.config.ts
import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
	pageShots: {
		pages: [
			{ path: '/', name: 'landing' },
			{
				path: '/blog',
				name: 'blog',
			},
		],
		baseUrl: 'http://172.17.0.1:3000',
	},
	lostPixelProjectId: 'we_will_paste_id_here_later',
	apiKey: process.env.LOST_PIXEL_API_KEY,
};

Next up is the GitHub action declaration file that lives in .github/workflows. We are building & serving our Next.js application & run Lost Pixel on it's pages(defined in the above file):

visual-regression.yml
on: [push, pull_request]

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

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

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

      - name: Instal pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 7.17.1

      - name: Install dependencies
        run: pnpm install

      - name: Build next
        run: pnpm run build

      - name: Start next
        run: pnpm run start &

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

Set up the Lost Pixel platform

From the onboarding-screen copy your project id and replace it in the lost-pixel.config.ts created in the first step

lostPixelProjectId: 'clcuk66iz005wp41h3cauveb2',

Copy the Lost Pixel API key, we will need to do the final step to provide it as a GitHub Action secret.

Set Lost Pixel API key on GitHub

Your visual regression testing workflow is done 🎊

All new pushes to your repository are triggering visual tests that you can conveniently manage yourself or collaboratively with your team!

We need to create lost-pixel.config.js|ts file that will run the whole setup. We will use the example of as it is set up on our own platform 😊

Visit the and install Lost Pixel App on organisations & repositories you want to have visual tests on

Sign in using GitHub into , switch to the correct organisation & select which repositories selected in the previous step should be visible on the Lost Pixel Platform:

⚙️
⏯️
lost-pixel.com
Lost Pixel installation page
app.lost-pixel.com
Lost Pixel Platform
Storybook visual regression testing with Lost Pixel Platform - Lost Pixel - holistic Visual Regression Testing cloudLost Pixel - holistic Visual Regression Testing cloud
Storybook + Lost Pixel Platform
Logo
Visual regression testing with Ladle, so far the best Storybook alternative - Lost Pixel - holistic Visual Regression Testing cloudLost Pixel - holistic Visual Regression Testing cloud
Ladle + Lost Pixel Platform
Logo
Complete guide on Playwright visual regression testing - Lost Pixel - holistic Visual Regression Testing cloudLost Pixel - holistic Visual Regression Testing cloud
Playwright + Lost Pixel Platform
Logo
app.lost-pixel.com/app/repos/manage
app.lost-pixel.com/app/repos/lost-pixel-landing
Setting LOST_PIXEL_API_KEY as Action Secret
lost-pixel.com visual test managed on Lost Pixel Platform