CI/CD Integration

CI/CD workflow

Integrate Storybook tests into your CI/CD pipeline to ensure component quality on every commit. Run interaction tests, accessibility tests, and visual tests automatically.

GitHub Actions example

Here's how to run Storybook tests in GitHub Actions.

name: Storybook Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build-storybook
      - run: npx concurrently -k -s first "npx http-server storybook-static --port 6006 --silent" "npx wait-on tcp:6006 && npm run test-storybook"
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Test automation benefits

CI/CD integration catches component regressions early, ensures accessibility compliance, and maintains design consistency across deployments.

Running tests locally before push

Run Storybook tests locally to catch issues before pushing to CI.

# Run interaction tests
npm run test-storybook

# Run visual tests against local build
npm run build-storybook
npx chromatic --local