メインコンテンツにスキップ

インストール

はじめに​

Playwright Test は、最新の Web アプリケーション向けのエンドツーエンドテストフレームワークです。テストランナー、アサーション、分離、並列化、豊富なツールをバンドルしています。Playwright は、Windows、Linux、macOS 上で、ローカルまたは CI で、ヘッドレスまたはヘッダ付きで、Chrome (Android) と Mobile Safari のネイティブモバイルエミュレーションを使用して、Chromium、WebKit、Firefox をサポートしています。

学習内容

Playwright のインストール​

以下のいずれかの方法で Playwright をインストールして開始します。

npm、yarn、または pnpm の使用​

以下のコマンドは、新しいプロジェクトを初期化するか、既存のプロジェクトに Playwright を追加します。

npm init playwright@latest

プロンプトが表示されたら、以下を選択/確認します。

  • TypeScript または JavaScript (デフォルト: TypeScript)
  • テストフォルダー名 (デフォルト: tests、または tests が既に存在する場合は e2e)
  • GitHub Actions ワークフローの追加 (CI に推奨)
  • Playwright ブラウザのインストール (デフォルト: はい)

このコマンドは後で再実行できます。既存のテストを上書きすることはありません。

VS Code 拡張機能の使用​

VS Code 拡張機能を使用してテストを作成および実行することもできます。

インストールされるもの​

Playwright は必要なブラウザバイナリをダウンロードし、以下の足場を作成します。

playwright.config.ts         # Test configuration
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # Minimal example test
tests-examples/
  demo-todo-app.spec.ts      # Richer example tests

playwright.config は、ターゲットブラウザ、タイムアウト、リトライ、プロジェクト、レポーターなどの設定を一元化します。既存のプロジェクトでは、依存関係が現在の package.json に追加されます。

tests/ には最小限のスターターテストが含まれています。tests-examples/ には、パターンを探索するためのより豊富なサンプル (例: Todo アプリ) が用意されています。

サンプルテストの実行​

デフォルトでは、テストは Chromium、Firefox、WebKit でヘッドレスかつ並列に実行されます (playwright.config で設定可能)。出力と集計された結果はターミナルに表示されます。

npx playwright test

ヒント

  • ブラウザウィンドウを表示するには、--headed を追加します。
  • 単一のプロジェクト/ブラウザを実行するには、--project=chromium を使用します。
  • 1 つのファイルを実行するには、npx playwright test tests/example.spec.ts を使用します。
  • テスト UI を開くには、--ui を使用します。

フィルタリング、ヘッダ付きモード、シャーディング、リトライの詳細については、テストの実行を参照してください。

HTML テストレポート​

テスト実行後、HTML レポーターは、ブラウザ、合格、失敗、スキップ、不安定なテストなどでフィルタリングできるダッシュボードを提供します。テストをクリックすると、エラー、添付ファイル、ステップを検査できます。失敗が発生した場合にのみ自動的に開きます。以下のコマンドで手動で開きます。

npx playwright show-report

UI モードでのサンプルテストの実行​

ウォッチモード、ライブステップビュー、タイムトラベルデバッグなどを行うには、UI モードでテストを実行します。

npx playwright test --ui

ウォッチフィルター、ステップの詳細、トレース統合の詳細については、UI モードの詳細ガイドを参照してください。

Playwright の更新​

Playwright を更新し、新しいブラウザバイナリとその依存関係をダウンロードします。

npm install -D @playwright/test@latest
npx playwright install --with-deps

インストールされているバージョンを確認します。

npx playwright --version

システム要件​

  • Node.js: 最新の 20.x、22.x、または 24.x。
  • Windows 10 以降、Windows Server 2016 以降、または Windows Subsystem for Linux (WSL)。
  • macOS 14 (Ventura) 以降。
  • Debian 12 / 13、Ubuntu 22.04 / 24.04 (x86-64 または arm64)。

次にすること​