📘

@playwright/testとstorybookでビジュアルリグレッションテストを試してみた

2022/08/03に公開約1,900字

ことの動機は...

少し前に $ yarn run build-storybook で生成されたフォルダを眺めていたら stories.json というファイルを発見した
そのデータをもとに各storyのURL作れそうだったので、網羅的にVRT実行できたらchromaticみたいなことが実現できそう、やってみよう!と試してみることに

Storybook for React tutorialから動作環境をcloneする

適当に動きそうなものを選んでbuild-storybookを実行するところまでやる

https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
$ 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が指摘されて実行できなかった

https://github.com/storybookjs/storybook/blob/736389950a299a76f948490b73fc78ae99130874/lib/cli/src/extract.ts

$ npx sb extract の代わりになるコードを作成

https://github.com/aokiken/playwright-storybook-vrt-example/blob/9bb36e94416a6a639a7b73026d0ba1e26278e735/e2e/scripts/extract.ts

無事に stories.json を生成することができた

テストコードを書く

https://github.com/aokiken/playwright-storybook-vrt-example/blob/9bb36e94416a6a639a7b73026d0ba1e26278e735/e2e/tests/stories.spec.ts

await page.goto('file:///path/to/') でも動くことを知る
stories.json コマンドによって生成されているのでgit管理対象から外している...が、更新されたらCIで落ちるようにすれば管理してもいいかもしれないなと記事を書いてて思った

GitHub Actionsのワークフローを書く

https://github.com/aokiken/playwright-storybook-vrt-example/blob/9bb36e94416a6a639a7b73026d0ba1e26278e735/.github/workflows/playwright.yml

GitHub Actionsで実行する


https://github.com/aokiken/playwright-storybook-vrt-example/actions/runs/2791507669
🎉

感想

サクッと作れると思ったら意外とつまずいてしまった
が、動くところまで作り切れてよかった
chromatic 便利

Discussion

ログインするとコメントできます