E2EテストのPlaywrightを使ってみた

目次

はじめに

あるWebシステムにて、テキスト入力欄やボタン選択が複数ある画面を作ることになりました。
そこで、テスト工程をどのようにしたら効率良く実施出来るのか検討および調査したところ、
テスト自体を自動化してみようとなりました。
E2Eテスト自動化ツールは、たくさん種類があり比較した結果、Playwrightというツールを選定することにしました。

E2Eテストとは

  • End-to-Endの略。
  • システム全体のテストを実施することで想定通りの動作となっているか一連のテストを行うこと。

Playwrightの環境構築

実際にPlaywrightのインストールと初期設定を行います。
Node.jsがインストールされている前提となります。

インストール

作られるディレクトリとファイル

Playwrightの実行

環境構築が終了すると、あらかじめサンプルのテストケースが用意されているのでテストを実行してみます。

テスト実行

テストレポートの表示

コマンド実行して立ち上がった、ローカルホストサーバーへアクセスします。

テストレポート表示結果

ローカルホストサーバーへアクセスすると、下記のような画面が表示されます。
下記の例だと「タイトルが存在しているか」と「リンクボタン押下時のテスト」の2つのテストが実行されています。

また「タイトルが存在しているか」を押下すると、詳細な画面へ遷移します。

基本的なコード

テストコード

ここまでで、環境構築とテスト実行をしてテストレポートの表示まで出来ました。
実際に「tests/example.spec.ts」に実装されている具体的なテストコードを紹介します。

設定ファイル

テストコードは「tests/example.spec.ts」へ実装してテストを実行します。
基本的なテストの設定は「playwright.config.ts」に記載されており、便利な機能を紹介致します。

このような機能も

Playwright codegen

UI上で操作した内容がコードに反映されます。

起動すると、以下のような画面が表示されます。
左側にブラウザ、右側にコードが記録される画面です。

中央の◯ボタンを押下すると、記録が開始されます。
コード化したい動きをUI上で再現します。

検索窓に文字を入力したり、リンクを押下した時の挙動が右側の画面にテストコードとして表示されます。

タイムライン機能

  • テスト前後のスナップショットを見ることが出来る
  • GoogleChromeのnewtworkタブのようなUIでテスト中の通信ログを確認出来る

実行すると画面が開いて、▶️ボタンを押下すると、テストが実行されます。

特定のテストコードに対して、どのくらい時間がかかったのかUI上で見ることが出来ます。

また、開発者ツールのようにDOM情報も見ることが出来ます。

まとめ

PlaywrightのようなE2Eテストツールを使うと、UIの仕様変更があった場合もヒトがテストを再実行するよりも短い時間でテストの実行を出来るため工数の削減にもなります。
また、一部の機能しか試せておらず、並列テストなどの機能にも触れてプロジェクトにテストツールを導入して作業効率が上げることが出来たらと思います。

投稿者プロフィール

ito
2023年8月にスカイアーチにJOIN。
フロントエンド(React / TypeScript)がメイン。
AWS日々勉強中。

ABOUTこの記事をかいた人

2023年8月にスカイアーチにJOIN。 フロントエンド(React / TypeScript)がメイン。 AWS日々勉強中。