こんにちは、kubotakです。
突然ですが、３年ほどまえにこんな発表を社外で行いました。
M&Aクラウドのプロダクトではこの仕組みを用いてVRT（ビジュアルリグレッションテスト）を行ってきました。
我ながら便利な仕組みだなと思いつつ、以下のような課題も抱えていました。
- 別のプロジェクトへの導入障壁が高い
- メンテナンスが大変
- VRTの実行速度が遅い
- VRTが安定しない（スクリーンショットのタイミング）
弊社では3つのプロダクトでこのVRTの仕組みを導入していたので特にメンテナンス性について課題を感じていました。
そこで、ClaudeCodeの力も借りて、この仕組みをOSS化することにしました。
で、完成したのがStorywrightです。
名前は安直にStorybook + Playwrightのかけ合わせた名前です。npm publishするときにすでに同名のライブラリが存在することに気づきましたが、Organizationとしてpuslishすることで回避しています。
※ちなみに同名のライブラリはMicrosoft社製
特徴
StorywrightはStorybookでカタログを作成したらそのカタログに対してPlaywrightでVRTを行うというツールです。
その他に以下のような仕組みがあります。
- 差分が一覧表示できるレポートHTMLの出力
- CI上で動かした際に、プルリクエストとベースブランチとの差分から関連するカタログを抽出して差分比較する
- CIでの並列実行の設定が可能
類似サービスとしてはChromaticがあげられますが、レビュー機能はないので簡易版Chromaticとしてセルフホスティングしたい人向けのツールとなります。
導入方法の詳細はリポジトリのドキュメントを見ていただくのが良いですが、大まかな説明をすると導入方法は現状2パターンあります。
- ローカル戦略
- S3戦略
ローカル戦略
事前にローカルで正となるスクショを生成することでプルリクエスト時にGitHub（等）上の差分画面でスクショの差分を確認するパターンです。 こちらは比較的導入障壁が低い戦略ですが、スクショをリポジトリで管理する必要があるため大量のStoryがある場合にリポジトリ容量を圧迫します。 そんなときはS3戦略です。
S3戦略
mainブランチにマージした際に前回との差分のスクショを正としてS3に更新する仕組みです。 プルリクエストを作成したタイミングでS3にあるmainブランチの最新状態のスクショと、プルリクエスト時点のStoryのスクショが比較されます。
ライブラリとして切り出してみて
個別のライブラリになったことで以下の対応を追加することができました。
- CircleCIでシャーディング実行により並列でVRTが実行できるようになった
- VRTのスクリーンショットが安定しない問題を、Playwrightのチューニングで統一化することができた（まだ課題はありそう）
- レポート用ページをSvelteを用いてリッチに組み立てられた
- OSSだけをメンテしたらよいので、導入しているプロジェクトは（破壊的変更がない限り）ライブラリをアップデートするだけで良い
などなど、便利になりました。
ちなみに弊社ではCircleCIでCIを実行しているのでGitHub Actionsやその他CIで動作検証はできていません。
また、外部オブジェクトストレージに関してもS3しか現状サポートしていないので他のオブジェクトストレージに対応できていません。
このあたりはぜひ使いたい！という方がいらっしゃったらIssueをつくっていただいても構いませんし、PRをしてくれても構いません。
（やるとは言ってない）
外部オブジェクトストレージに関してはプラガブルになっているのでおそらく追加対応もそんなに大変じゃないかと思います。
その他、操作した結果をスクショする等の機能はありません。必要に迫られたら実装したいなと思います（）
いいね！と思ってくれた方はぜひスターしてください〜！
