# CI/CD Integration — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-cicd

> GitHub Actions में Storybook interaction, accessibility और visual tests चलाएँ ताकि हर commit पर component regressions पकड़े जाएँ।

## CI/CD workflow

हर commit पर component quality ensure करने के लिए Storybook tests को अपने CI/CD pipeline में integrate करें। Interaction tests, accessibility tests, और visual tests को automatically चलाएँ।

## GitHub Actions example

यहाँ GitHub Actions में Storybook tests कैसे चलाएँ।

```yaml
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 component regressions को जल्दी पकड़ता है, accessibility compliance ensure करता है, और deployments में design consistency को maintain करता है।

## Push से पहले tests को locally चलाना

CI में push करने से पहले issues को पकड़ने के लिए Storybook tests को locally चलाएँ।

```bash
# Run interaction tests
npm run test-storybook

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