【E2Eテスト自動化】Playwrightの特徴・導入方法・活用ポイントを解説！

はじめに

はじめまして。株式会社メンバーズの金 柾勲です。

システム開発において、テストは動作確認の重要なプロセスですが、テストケースの作成やリリース前の検証には多くの時間と工数がかかります。

特に、システムやプロセス全体を通して検査やテストを行うE2E（End-to-End）テストとは、システム全体の品質向上とユーザーの安全な体験を保証するためのテスト手法です。
しかし、E2Eテストはテスト環境の準備や人的コストが高く、複数のデバイス（PCのChrome・Safari、モバイルのChrome・Safari）対応が必要という課題もあります。

実際に私が参加したプロジェクトでは、この問題を解決するためE2E自動化ツールのPlaywrightの導入を検討し一部テストの自動化を行いました。今回の記事では現場で行ったPlaywrightの導入と運用経験を元にインストールと使い方、使ってみて考えた長所と短所をお伝えします。

E2Eテストとは？

Playwrightの話をする前にまずはE2Eテストの概念をはっきりしようと思います。

E2EテストはEnd-to-Endテストの略語でその名の通りシステムの端から端までのテスト、
つまりシステムやプロセス全体を通しての検査やテストを指します。

テストピラミッドによるとテストは「ユニットテスト」「インテグレーションテスト」「UIテスト」に分かれます。
E2Eテストはこの中で「UIテスト」と同じ階層となりテスト方法も同じであるため、
同じように使われることが多いですが、目的に違いがあります。

「E2Eテスト」と「UIテスト」はユーザーが実際にシステムを使用する時と同じ振る舞いをし、プログラムの必須機能の正常動作を確認することが同じです。
しかし「UIテスト」はあくまでUIの動作が正常に動いているかを確認するテストでUIの品質確保が目的で、
「E2Eテスト」はシステム全体の連携と機能の正しさを保証するのが目的です。

Playwrightとは？

PlaywrightはMicrosoftが開発した最新のE2Eテスト自動化ツールです。

クロスブラウザ対応（Chrome・Firefox・Safari・Edge）や並列実行による高速テスト、テスト結果の詳細な分析機能が特徴です。

ダウンロード数のトレンドは昔はCypressなどのE2Eテスト自動化ツールより少ないですが、
さすがMicrosoftのツールであるためでしょうか、2024年からダウンロード数が爆発的に上がり今は一位となっています。

インストール方法

PlaywrightはTypeScriptでのテスト記述が一般的であり、npmまたはyarnを使用してインストールします。

※【2025年2月時点】Playwrightの最新バージョンにはNode.js 18以上が必要です。

npm init playwright@latest

Copy

上記のコマンドを叩いてインストールをします。

Initializing project in '.'
Do you want to use TypeScript or JavaScript? · TypeScript
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

Copy

インストールのオプションは上記のように対応しました。
Playwright browserはテストで扱う各環境のブラウザ（Chromium、webkitなど）のことで、インストールに少し時間がかかります。

使い方

Playwrightはテストコードを書いて実行し、書いたテストコードの動作を行うことでE2Eテストを実施します。

まず、実行するテストの設定を「playwright.config.ts」ファイルで書きます。
画像の内容はデフォルトと内容で必要に応じて設定の変更が出来ます。

以下は私の方でプロジェクトでの運用のため実際に修正した設定です。

- use：基本的にテストを行うページの設定などをします。

- timeout：各テストを行う最大時間を設定します。

- expect：確認を取る各expect関数の最大時間を設定します。

- toHaveScreenshot：スクリーンショットで比較を行う時の設定をします。

- projects：テストを行う環境（chromium、webkit、Mobile Chromeなど）の設定をします。

より詳しい内容は下記の公式ドキュメントを参照してください。
設定の公式ドキュメント

テストの設定が終わったらテストコードの作成を行います。
テストは上記の画像通り「test」関数を使って各テストの単位を区別し、中で「expect」関数を使って確認を取るのが基本的なコードの書き方です。

以下は私の方でプロジェクトで実際に使ったテストコードの一部です。

- page.getByText(‘xxx’).click()：’xxx’テキストがある場所を探してクリックします。

- expect(page.getByText('xxx')).toHaveScreenshot()：’xxx’テキストがある場所を探してプロジェクトに格納したスクリーンショットと比べて一致するかを確認します。

- page.mouse.move(xxx, yyy)：画面の座標軸xxx, yyyの位置にマウスを移動します。

より詳しい内容は下記の公式ドキュメントを参照してください。
ページ操作関連の公式ドキュメント

マウス操作関連の公式ドキュメント

npx playwright test

Copy

テストコードの作成後、上記のコマンドを叩くとテストが実行されます。

テスト実施後、自動的にテストの結果レポートが上記のように出ます。
直前に行ったテストのレポートをもう一度見たい場合は、下記のコマンドを叩いてください。

npx playwright show-report

Copy

使い方の補足：VSCodeの拡張機能 - Playwright Test for VSCode

実は、MicrosoftはPlaywrightの公式の拡張機能をVisual Studio Codeで提供しています。

この拡張機能を使うと、playwright.config.tsで設定した内容を元にUI操作でテストの動作設定をしたり、コマンドを叩かずVSCodeの中でテストを直接実行することができます。
公式で提供する拡張機能で使って見たらかなり便利だったため、Visual Studio Codeを使う方だと拡張機能を使うのも良いと思います。

最後に

Playwrightは記述したテストコードで自動実行できるE2Eテストツールです。
これにより、テストに掛かる人的コストの軽減が可能で、効果的に活用すれば大きなメリットがあります。

しかし、他のE2Eテスト自動化ツールと同様に、ツールの学習コストとテストコードの作成コスト、システムの機能変更時のメンテナンスが必要となる点は課題です。

実際に運用して見たところ、システムの特定の画面ではローディングの時間を適切に設定しないと、マウス操作などのテストが正しく動作しないケースがありました。また、「画面に英語の文字が正しく表示されるか」といった自動化が難しい検証項目については、人のてに寄るテストが必要となります。

そのため、Playwrightの導入は、プロジェクトの要件やシステムの特性を踏まえて慎重に判断することが重要です。