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

Integrating With GitHub Actions

Lost Pixel has first-class support for GitHub Actions, offering a dedicated action in the GitHub Action Marketplace:

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

As outlined in modes, Lost Pixel can run in different modes or all of them simultaneously. You would need to build the respective provider and serve it in the action to make it available for the Lost Pixel, e.g. build & serve storybook, build & serve ladle, build & serve next app

Here's an example of a complete workflow file that builds the Storybook before continuing with Lost Pixel. To make it run, you need to place vis-reg-test.yml it into .github/workflows at the root of your project. This will execute the Lost Pixel visual regression tests on every commit:

vis-reg-test.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.8.0

Using Lost Pixel in Platform Mode, you need to provide the LOST_PIXEL_API_KEY

to the action:

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

Last updated 1 year ago

⚙️