Chromatic の差分検知を GitHub Actions で自動化する

Chromatic を使って UI テストやビジュアルリグレッションテストを行っているんですが、いつの間にか複数のコンポーネントでデグレしてしまい再発を防ぐために差分ができたときに Slack 通知する仕組みをつくりました

---

前提として Chromatic のデプロイは

• master へマージかつフロントエンドに影響のあるパスに diff がある場合に自動デプロイ(GitHub Actions)
• コンポーネント追加や UI 変更を行ったときに手動デプロイ

の2パターンで行っていたので、UI に差分ができる変更を行ったがうっかり Chromatic デプロイを忘れていた場合はいつの間にか知らない差分ができてしまう状態でした

先に結論

.github/workflows/chromatic.yml

name: 'Chromatic Deployment'

on:
  push:
    branches:
      - master
    paths:
      - <JS や CSS のパス>
      - ".storybook/**"
      - "package.json"

jobs:
  choromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: deploy chromatic
        id: chromatic
        run: |
          yarn
          yarn storybook build
          mv storybook-static ../
          yarn chromatic \
            --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} || echo "status=$?" >> $GITHUB_OUTPUT

      - name: Slack Notification Failure
        if: (steps.chromatic.outputs.status && steps.chromatic.outputs.status != '1') || failure()
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_COLOR: '#dc143c'
          SLACK_TITLE: 'Chromatic デプロイエラー'
          SLACK_MESSAGE: 'master でのデプロイが失敗しました https://www.chromatic.com/builds?appId=<appID>'

      - name: Slack Notification Diff
        if: steps.chromatic.outputs.status == '1'
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_COLOR: '#ffff66'
          SLACK_TITLE: 'Chromatic changes'
          SLACK_MESSAGE: 'master でのデプロイで差分がでました https://www.chromatic.com/builds?appId=<appID>'

解説

Chromatic の Project token と Slack の Webhook URL が必要なので事前にシークレットを作成しておきます(個人的にGitHub CLIでの登録がおすすめ)
タイトルには差分検知と書いてますが、今回は差分がある or 他の理由でコマンドが失敗(yarn chromatic の status code が 0 でない場合と yarn storybook build が失敗)した場合にそれぞれ通知するようにしています

yarn chromatic ... || echo "status=$?" >> $GITHUB_OUTPUT

と書くことで yarn chromatic が失敗したときのみ status code を $GITHUB_OUTPUT に代入しています(参考)

Slack 通知には rtCamp/action-slack-notify を使いデプロイコマンドの status code を見てそれぞれ文言と色を変えています

• status code が 1 -> 差分がでました
• status code が存在する、かつ status code が 1 ではない -> 失敗しました

テスト通知

---

これで UI の差分が検知しやすくなりました
せっかく Chromatic 使ってるのに微妙にビジュアルリグレッションテストできてないことがあるなぁとモヤモヤしてたので解決できてよかったです！
GitHub Actions はあんまり使ったことなかったですけどトリガーとかが柔軟でいいですね〜