Getting started with Ladle

Prerequisites

• 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]
   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.4.0

4. (Optional) Add automatic PR for easy baseline update

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.