Page cover image

Getting started with Ladle


  • ladle that holds stories to be tested

  • lost-pixel configuration file

  1. Follow this handy ladle 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]
        runs-on: ubuntu-latest
         - name: Checkout
           uses: actions/checkout@v3
         - name: Setup Node
           uses: actions/setup-node@v3
             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.4.0
pageAutomatic baseline update PR

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

This example is available here. You can see some other popular integrations in the lost-pixel-examples directory.

Last updated