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. Guides
  2. Getting started

Getting started with Storybook

Prerequisites

  • storybook that holds stories to be tested

  • lost-pixel configuration file

  1. Follow this storybook guide to add it to your project in minutes

  2. Add lost-pixel configuration file

  3. Add action file in the root of your project. In .github/workflows/ci.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 Storybook
            run: npm run build-storybook
    
          - name: Lost Pixel
            uses: lost-pixel/lost-pixel@3.3.0
  4. (Optional) Add automatic PR for easy baseline update

Note that your lostpixel.config.js|ts|cjs|mjs should point to the correct relative path to the built storybook or to served storybook URL

After writing your first stories, you can adopt the visual regression testing by following the visual regression testing workflow

You can see some popular integrations in the lost-pixel-examples directory

PreviousGetting startedNextGetting started with Ladle

Last updated 1 year ago

Automatic baseline update PR
👨‍🏫
Page cover image