UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Chromatic】かんたんにVRT環境をつくる

Qiitaの@xrxoxcxoxさんと同じモチベーションでChromaticを試してみた

qiita.com

ChromaticはStorybookを利用したクラウドベースのツールチェーンで、主にVRT(ビジュアルリグレッションテスト)などに使われる

www.chromatic.com

さっそくやってみる

まずは、chromaticにサインアップするとGithubとの連携を求められるので、リポジトリと紐づける

このときプライベートは選択肢に出てこないので、Githubから [Integrations]→[Applications]→[Chromatic OAuth] でプライベートリポジトリにチェックをつける

紐付けが完了すると次のような画面がでてくるので、順にコマンドを実行する

これでまずはChromaticにStorybookとビルド結果がアップロードされた

Github Actionsでビルド

ここをみてGithubActionsで自動化する

www.chromatic.com

公式ドキュメントでは、pushイベントでChromaticのステップを実行することをお勧めしているが、プルリクにつくったときにビルドするように変更した

これでめちゃめちゃ簡単にVRT環境がつくれた