Frontend Testing

VitestのカバレッジレポートをGithub Actionsで添付する実装例

Playwrightでスクリーンショットの保存先をカスタマイズする

Playwrightでテスト実行時にweb serverを立ち上げる

VitestでsetTimeoutやsetIntervalなど時間が関与したコードのテストを記述する

VitestではFake Timer APIを利用することで時間に依存するコードを柔軟に且つ短時間でテストすることができる。

Playwright v1.49の変更によるChromiumダウンロードコストの変化

Playwirght v1.49の変更によるChromiumのダウンロードコストの変化を計測した。

フロントエンドテスト講座を開催した

フロントエンドテスト講座を行った際の内容をまとめた。

VitestのspyOnは同一ファイルの別関数をモックできない

VitestのspyOnは、Jestなどと異なり同一ファイルの別関数をモックできない。ただし、これはVitestのスコープ外の問題であり、Jestなどでも同条件であれば同様の制限が発生する。

Q. 指定されたパスのすべてのモジュールをモックするmockメソッドは巻き上げられる

Vitestでモックが上手く動作しないと相談されたので、その理由などについてまとめた。

Playwrightの動画を取りたい

Playwrightのテスト結果を動画で録画する方法について紹介する。

Q. VSCodeが勝手にテストを走らせるようになった

VSCodeが勝手にテストを走らせるようになったという相談を受けたので、その理由と対応についてまとめた。

Q. Playwrightのテスト改善をしてほしい

Playwrightのテスト改善をしてほしいという相談を受けた際の対応をまとめた。

Playwrightでファイル選択をする

PlaywrightでFileChooserオブジェクトを利用してファイル選択をエミュレートする方法について紹介する。

Playwrightスクリプトを自動生成する

Playwrightのスクリプトを自動生成する方法について紹介する。

Q. E2Eテストで稀に要素が取得出来なくなり失敗する

Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。

CI上でPlaywrightのテストが落ちたら確認すること

CI上でPlaywrightのテストが落ちた場合、どのようなことを確認すると良いか書いた。

PlaywrightでAPIのレスポンスを差し替える

PlaywrightでAPIのレスポンスを差し替える方法について紹介する。

Playwrightでページエラーを検出する

Playwrightでページ内で発生したエラーを検出する方法について紹介する。

Playwrightをheadedまたはデバックモードで実行する。

Playwrightをheadedまたはデバックモードで実行する方法について紹介する。

Playwrightでセッションを再利用する

PlaywrightでCookieやLocal storageをstate.jsonに保存してセッションを再利用する方法について紹介する。

Playwrightで任意のスクリプトを実行する

Playwrightでページ内で任意のスクリプトを実行する方法について紹介する。

PlaywrightでVisual Regression Testingする

PlaywrightでVisual Regression Testingを行う方法について紹介する。