背景

お仕事でCircleCI上で動かすstorycap + reg-suitのVisual Regression Testing (VRT)実行時間がstoryの量に比例して遅くなってきたので、なんとかして早く終わらせられないか調べて良さそうな記事 & 成果が出た

Visual Regression Testing

画面キャプチャを作業単位で保存しておき、その画像の比較差分を検知してチェッキングをサポートするテスト

割とstorycap + reg-suitの構成が主流だったが、金で殴ればChromatic、今から新規でやるならPlaywrightを使うことが多そう

参考: 2023年にVisual Regression Testingを始めるならどんな選択肢があるか

前提

お仕事ではstorycap + reg-suitを使用しており、画像保存のストレージはAWS S3でCICDはCircleCI(Performance Plan)を採用している

改善案

参考: reg-suit と storycap で行う Visual Regression Testing の高速化 を盛大にパクらせてもらった

storybookの新しい機能で出力される story.json を利用してうまく実行単位を分割し、並列でキャプチャしていくというわかりやすく効果的な施策なので実際に適用してみた

効果

もともとVRT全体で8,9分かかっていたものを改善してみる

まず、並列数15で実行してみる

なんか以上に時間の長い分割がいる…

見てみるとCPUの使い方的に変な状態だからもしかしたら無駄なtimeout待ちが発生している…？と思って見てみたら案の定多くのstoryは1000 msec前後なのに対して 305067 msec という異常に時間がかかっている物があった

結果的に個別でdelayを設定していたが設定ミスで 5分近くdelayしてたのでこれを解除

ついでにCPUも余裕がありそうなので並列数20で再実行…！

事前にstorybookのbuildを走らせる必要があり、画像突合と保存があるのでめちゃくちゃ早くなったわけではないが8,9分だったVRTがトータル5分に収まるようになった！！

感想

storyの量産体制に入る前にCICDの改善が出来たので非常に嬉しかったのと何より参考ブログ先のわだまるさんには感謝しか無いです…