インストール
はじめに
Playwright Testは、エンドツーエンドテストのニーズに合わせて特別に作成されました。Playwrightは、Chromium、WebKit、Firefoxを含むすべての最新レンダリングエンジンをサポートしています。Windows、Linux、macOS上で、ローカルまたはCI上で、ヘッドレスまたはヘッド付きで、Google Chrome for AndroidおよびMobile Safariのネイティブモバイルエミュレーションを使用してテストを実行できます。
学習内容
Playwrightのインストール
npm、yarn、またはpnpmを使用してPlaywrightをインストールすることから始めましょう。または、VS Code拡張機能を使用してテストを開始および実行することもできます。
- npm
- yarn
- pnpm
npm init playwright@latest
yarn create playwright
pnpm create playwright
インストールコマンドを実行し、以下の項目を選択して始めましょう
- TypeScriptまたはJavaScriptを選択(デフォルトはTypeScript)
- テストフォルダーの名前(デフォルトは
tests
、プロジェクトにtests
フォルダーが既に存在する場合はe2e
) - CIで簡単にテストを実行するためのGitHub Actionsワークフローを追加
- Playwrightブラウザをインストール(デフォルトはtrue)
インストールされるもの
Playwrightは必要なブラウザをダウンロードし、以下のファイルを作成します。
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
playwright.configは、Playwrightの設定を追加する場所であり、Playwrightを実行したいブラウザの変更なども含まれます。既存のプロジェクト内でテストを実行している場合、依存関係は直接package.json
に追加されます。
tests
フォルダーには、テストを開始するのに役立つ基本的なサンプルテストが含まれています。より詳細な例については、TODOアプリをテストするために書かれたテストが含まれているtests-examples
フォルダーを確認してください。
サンプルテストの実行
デフォルトでは、テストはChromium、Firefox、WebKitの3つのブラウザすべてで、3つのワーカーを使用して実行されます。これはplaywright.configファイルで設定できます。テストはヘッドレスモードで実行されるため、テスト実行時にブラウザは開きません。テスト結果とテストログはターミナルに表示されます。
- npm
- yarn
- pnpm
npx playwright test
yarn playwright test
pnpm exec playwright test
ヘッド付きモードでのテスト実行、複数のテスト実行、特定のテスト実行など、テスト実行の詳細については、テストの実行に関するドキュメントを参照してください。
HTMLテストレポート
テストが完了すると、HTMLレポートが生成され、ブラウザ、合格したテスト、失敗したテスト、スキップされたテスト、不安定なテストでレポートをフィルタリングできる完全なテストレポートが表示されます。各テストをクリックして、テストのエラーや各ステップを確認できます。デフォルトでは、一部のテストが失敗した場合、HTMLレポートは自動的に開かれます。
- npm
- yarn
- pnpm
npx playwright show-report
yarn playwright show-report
pnpm exec playwright show-report
UIモードでのサンプルテストの実行
タイムトラベルデバッグ、ウォッチモードなど、より良い開発者エクスペリエンスのためにUIモードでテストを実行しましょう。
- npm
- yarn
- pnpm
npx playwright test --ui
yarn playwright test --ui
pnpm exec playwright test --ui
UIモードの機能の詳細については、UIモードの詳細ガイドを参照してください。
Playwrightの更新
Playwrightを最新バージョンに更新するには、次のコマンドを実行します
- npm
- yarn
- pnpm
npm install -D @playwright/test@latest
# Also download new browser binaries and their dependencies:
npx playwright install --with-deps
yarn add --dev @playwright/test@latest
# Also download new browser binaries and their dependencies:
yarn playwright install --with-deps
pnpm install --save-dev @playwright/test@latest
# Also download new browser binaries and their dependencies:
pnpm exec playwright install --with-deps
次のコマンドを実行することで、常にPlaywrightのバージョンを確認できます
- npm
- yarn
- pnpm
npx playwright --version
yarn playwright --version
pnpm exec playwright --version
システム要件
- Node.js 18、20、または22の最新バージョン。
- Windows 10以降、Windows Server 2016以降、またはWindows Subsystem for Linux (WSL)。
- macOS 14 Ventura以降。
- Debian 12、Ubuntu 22.04、Ubuntu 24.04 (x86-64およびarm64アーキテクチャ)。