【AI開発】githubactionsでchromaui/actionによるUIの自動テストをさせてみる

なぜおすすめなのか

圧倒的に導入が簡単
Storybookとの完璧な統合
デザインレビューが捗った

chromaui/actionとは

chromaui/actionは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を提供します。

主な機能

ビジュアルリグレッションテスト（VRT）: UI の予期せぬ変更を事前に検知
Storybookのホスティング: クラウド上でStorybookを公開
自動レビューフロー: PRと連携したUI変更の確認プロセス

必要な設定準備

Chromaticプロジェクトトークンの取得

Chromaticにアカウント作成
プロジェクトを作成してトークンを取得
GitHubリポジトリのSettings → Secrets and variablesでCHROMATIC_PROJECT_TOKENを設定

実践的な設定例

1. コスト削減型設定

yamlname: 'Chromatic'

on:
  pull_request:
    types: [opened, synchronize, reopened, ready_for_review]
    paths:
      - 'src/**'
      - 'stories/**'
      - '.storybook/**'
      - 'package.json'
      - 'package-lock.json'

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Check for frontend changes
        id: check_changes
        run: |
          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --name-only | grep -E '^src/|^stories/|package.json' || true)
          if [ -z "$CHANGED_FILES" ]; then
            echo "skip=true" >> $GITHUB_OUTPUT
          else
            echo "skip=false" >> $GITHUB_OUTPUT
          fi
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Install dependencies
        if: steps.check_changes.outputs.skip == 'false'
        run: npm ci

      - name: Publish to Chromatic
        uses: chromaui/action@v11
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
          turboSnap: true
          exitZeroOnChanges: true
          skip: ${{ steps.check_changes.outputs.skip }}

2. モノレポ対応設定

yamlname: 'Chromatic'

on:
  pull_request:
    paths:
      - 'packages/ui/**'

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: packages/ui

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Install dependencies
        run: npm ci

      - name: Publish to Chromatic
        uses: chromaui/action@v11
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: 'packages/ui'
          onlyChanged: true

3. プレビューリンクコメント付き設定

yamlname: 'Chromatic'

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Install dependencies
        run: npm ci

      - name: Publish to Chromatic
        id: chromatic
        uses: chromaui/action@v11
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: true

      - name: Comment PR with Chromatic link
        if: github.event_name == 'pull_request'
        uses: peter-evans/create-or-update-comment@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            ## 🎨 Chromatic Visual Review
            
            **Storybook Preview**: ${{ steps.chromatic.outputs.storybookUrl }}
            **Build Status**: ${{ steps.chromatic.outputs.buildUrl }}
            
            Review changes and approve in Chromatic to complete the UI review process.