📘
@playwright/testとstorybookでビジュアルリグレッションテストを試してみた
ことの動機は...
少し前に $ yarn run build-storybook で生成されたフォルダを眺めていたら stories.json というファイルを発見した
そのデータをもとに各storyのURL作れそうだったので、網羅的にVRT実行できたらchromaticみたいなことが実現できそう、やってみよう!と試してみることに
Storybook for React tutorialから動作環境をcloneする
適当に動きそうなものを選んでbuild-storybookを実行するところまでやる
$ npx degit chromaui/intro-storybook-react-template taskbox
$ cd taskbox
$ yarn
$ yarn run build-storybook
$ yarn run build-storybook を実行するも stories.json が見当たらない
自分が前に見ていたのとはバージョンも違うので、挙動が変わったのかもしれない
早速詰んだと思ったが、少し調べてみると $ yarn run build-storybook 実行後に $ npx sb extract を実行することで、 path/to/storybook-static/stories.json が生成されていることを確認できた
Codespacesで $ npx sb extract が実行できない
どうやらpuppeteerを使って storybook-static/iframe.html から stories.json を生成しているようだったが、puppeteerのインストールでPermissionが指摘されて実行できなかった
$ npx sb extract の代わりになるコードを作成
無事に stories.json を生成することができた
テストコードを書く
await page.goto('file:///path/to/') でも動くことを知る
stories.json コマンドによって生成されているのでgit管理対象から外している...が、更新されたらCIで落ちるようにすれば管理してもいいかもしれないなと記事を書いてて思った
GitHub Actionsのワークフローを書く
GitHub Actionsで実行する
🎉
感想
サクッと作れると思ったら意外とつまずいてしまった
が、動くところまで作り切れてよかった
結論chromatic は便利
Discussion