📝
PlaywrightでE2Eテストを自動化する

2024/11/17に公開
React
 はじめに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のプロジェクトにインストールしていこうと思います。

以下のコマンドでインストールを行います。
・npm
npm init playwright@latest
・yarn
yarn create playwright
・pnpm
pnpm create playwright
コマンドを実行すると、質問されるので答えていきます。
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
インストールが完了すると、以下のように自動でフォルダとファイルが作成されます。

 Playwright Test for VSCodeをインストール以下の「Playwright Test for VSCode」というVSCodeの拡張機能をインストールします。

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

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

 テストケース今回は、以下のテストケースを作成したいと思います。

①フォームに「test」と入力する。

②ボタンをクリックする。

③demoページへのリンクをクリックし、ページ遷移する。
import Link from "next/link";

export default async function Page() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <input
        className="w-full max-w-sm p-3 mb-6 border-2 border-gray-300 rounded-lg text-lg focus:outline-none focus:border-green-500"
        type="text"
        placeholder="Enter text here"
      />
      <button className="px-6 py-3 text-white bg-blue-500 rounded-lg text-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-300">
        Click me
      </button>
      <Link
        href="/demo"
        className="mt-6 text-lg text-blue-500 hover:text-blue-700"
      >
        Go to Demo
      </Link>
    </div>
  );
}

 生成手順①ローカルでサーバーを立ち上げる。

「http://localhost:3000」でローカルサーバーを立ち上げます。
②VSCodeのテストタブから、E2Eテストのレコードを開始する。

以下のVSCodeのサイドバーのテストのタブから、「Record new」をクリックし、レコードを開始する。

すると、以下のようにブラウザが自動で立ち上がりますので、http://localhost:3000

をURLバーに入力し、アプリケーションのページにアクセスします。



↓

③テストケースに沿って画面を操作

テストケースに沿って画面を操作し、完了後は、以下のボタンをクリックして終了します。
すると、以下のようにテストファイルとテストコードが自動で生成されます。


 テスト実行最後に、自動で生成されたテストを実行していきたいと思います。

ルート階層で、以下のコマンドを実行します。
npx playwright test tests/test-1.spec.ts
成功すると、以下のように表示されます。


 まとめ今回はPlaywriteを使ったE2Eテストについて備忘録程度に書いていきました。

もっと踏み込んだ内容などについては、追記していこうと思います。
はじめに

E2Eテストとは

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

Playwrightについて

インストール

Playwright Test for VSCodeをインストール

テストコードの生成

テストケース

生成手順

テスト実行

まとめ

Discussion
