【ISSUE】PlaywrightでE2Eテストを自動化する

0

2024年12月23日 8:40

はじめに

E2Eテストについて学んだので、備忘録程度に書いていきます。

E2Eテストとは

E2Eテスト(エンドツーエンドテスト)とは、システム全体をユーザーの視点からテストし、期待通りの動作をしているかどうかを確認する手法です。
E2Eテストでは、ネットワーク接続やWebサービス、データベース接続、その他のアプリケーションや依存関係など、さまざまなサブシステムが連携して正しく動作しているかどうかを検証します。

https://aslead.nri.co.jp/ownedmedia/development/productivityimprovement-002/#entry-outline_4

E2Eテストを自動化するメリット

テスト時間の削減
E2Eテストは、手動で行うにはかなりの時間と労力がかかるテスト手法です。
大規模なアプリケーションの場合、E2Eテストを実行するだけで数日またはそれ以上の時間がかかるケースもあるため、自動化を行うことは、テストにかかる時間を大幅に削減できるうえに、夜間や週末などの非稼働時間にもテストを実行できるため、リリースサイクルの短縮に繋がります。

繰り返し実行できる
自動化されたE2Eテストは、同じテストケースを何度でも簡単に繰り返し実行することができるため、アプリケーションリリース前のE2Eテストだけでなく、新しいコードの追加や変更が既存の機能に影響を与えて発生する回帰エラーの検出も可能です。
特に、継続的インテグレーション(CI)環境では、コードがコミットされるたびに自動テストが実行されるため、回帰テストを自動化することができます。

テスト結果の安定化
人間が行う手動テストでは、実行者によるばらつきや人為的なミスが発生する可能性がありますが、自動化されたテストではそのようなリスクがありません。
その結果、テスト結果の信頼性が向上し、バグの発見と修正が効率的に行えます。

Playwrightについて

Playwright は、モダンなWebアプリケーションのテスト自動化やブラウザ操作を行うためのオープンソースのフレームワークです。
Microsoftによって開発され、主にエンドツーエンド(E2E)テストのために使用されますが、ブラウザの操作自体を自動化するため、Webスクレイピングやインタラクションのテストにも利用されます。
Chromium、WebKit、Firefoxを含むすべての最新のレンダリングエンジンをサポートしています。

https://playwright.dev/docs/intro

インストール

今回は、以下のNext.jsのプロジェクトにインストールしていこうと思います。
スクリーンショット 2024-11-17 14.21.11.png

以下のコマンドでインストールを行います。

・npm
img
・yarn
img
・pnpm
img

コマンドを実行すると、質問されるので答えていきます。
img

インストールが完了すると、以下のように自動でフォルダとファイルが作成されます。

スクリーンショット 2024-11-17 14.23.33.png

Playwright Test for VSCodeをインストール

以下の「Playwright Test for VSCode」というVSCodeの拡張機能をインストールします。
スクリーンショット 2024-11-17 14.30.50.png

この拡張機能を使うと、ローカルで立ち上げた画面上で、アプリケーションの操作を行うと、その操作に沿ったテストコードを作成してくれる便利なものです。

テストコードの生成

テストコードの生成をしていきます。

テストケース

今回は、以下のテストケースを作成したいと思います。
①フォームに「test」と入力する。
②ボタンをクリックする。
③demoページへのリンクをクリックし、ページ遷移する。

img

スクリーンショット 2024-11-17 14.46.16.png

生成手順

①ローカルでサーバーを立ち上げる。
http://localhost:3000」でローカルサーバーを立ち上げます。

②VSCodeのテストタブから、E2Eテストのレコードを開始する。
以下のVSCodeのサイドバーのテストのタブから、「Record new」をクリックし、レコードを開始する。
スクリーンショット 2024-11-17 14.49.15.png

すると、以下のようにブラウザが自動で立ち上がりますので、http://localhost:3000
をURLバーに入力し、アプリケーションのページにアクセスします。
スクリーンショット 2024-11-17 14.50.24.png

スクリーンショット 2024-11-17 14.51.54.png

③テストケースに沿って画面を操作
テストケースに沿って画面を操作し、完了後は、以下のボタンをクリックして終了します。

スクリーンショット 2024-11-17 14.53.12.png

すると、以下のようにテストファイルとテストコードが自動で生成されます。
スクリーンショット 2024-11-17 14.55.49.png

テスト実行

最後に、自動で生成されたテストを実行していきたいと思います。
ルート階層で、以下のコマンドを実行します。
img
成功すると、以下のように表示されます。
スクリーンショット 2024-11-17 15.00.51.png

まとめ

今回はPlaywriteを使ったE2Eテストについて備忘録程度に書いていきました。
もっと踏み込んだ内容などについては、追記していこうと思います。

最後に

他にも色々な記事を書いているので、よければ読んでいってください!

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。