Web UI の自動テストツールいわゆるE2Eテストツールの一つにCypressというのがあることを知った
Storybookを活用したテストを考えていて、StorybookとJestやPuppeteerをつかったe2eテストは聞いたことがあるが、StorybookとCypressはあまり聞いたことがなかったので調べてみた
同じようなことを思ってすでに記事にしている方がいた
Storybookにアクセスして、各コンポーネントのiframe内を操作していくことになる
ドキュメントをみるとStorybookを立ち上げて、Cypressも立ち上げてテストを実行というインタラクティブな操作がしょうかいされているが、CIでこのプロセスを自動化するには以下のようにpackage.jsonでconcurrentlyやwait-onを駆使してあげる必要がある
{
"scripts": {
"test": "concurrently 'npm run storybook:run' 'npm run cypress:test' -k -s first",
"storybook:run": "start-storybook -p 6006",
"cypress:test": "wait-on http://localhost:6006 && cypress run",
"cypress:run": "cypress run",
"cypress:open": "cypress open"
}
}
Cypressを使ってみるとわかるが、実行すると書いたスクリプトの操作中の動画が表示される
CircleCIでは、ビルドのアーティファクトとしてビデオを保存するように構成することができるらしい
なぜエラーになったのかの検証をビデオをみて確認できるので、これは利点になりそう
ただ、Google Chrome にしか対応していないとのこと
