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/[email protected]
4.(Optional) Add automatic PR for easy baseline update​
Automatic 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.
Getting started with Storybook
Getting started with Next js
Last modified 4mo ago