microsoft/playwrightChromium、Firefox、WebKitに対応した単一APIを備えるブラウザ自動化フレームワーク。Webテスト、スクレイピング、スクリーンショット、ネットワーク傍受をサポート。
Playwright は、Web 自動化とテストのためのフレームワークです。単一の API で Chromium、Firefox、WebKit を操作できます。テスト、スクリプト、そして AI エージェントのツールとして利用できます。
ワークフローに合った方法を選択してください:
Playwright Test は、エンドツーエンドテスト用に構築されたフル機能のテストランナーです。Chromium、Firefox、WebKit でテストを実行し、完全なブラウザ分離、自動待機、Web ファーストのアサーションを備えています。
npm init playwright@latest
または手動で追加:
npm i -D @playwright/test
npx playwright install
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
npx playwright test
テストは、設定されたすべてのブラウザで並列実行され、デフォルトではヘッドレスモードで実行されます。各テストは新しいブラウザコンテキストを取得します。ほぼゼロのオーバーヘッドで完全な分離を実現します。
自動待機と Web ファーストのアサーション。 人為的なタイムアウトはありません。Playwright は要素が操作可能になるまで待機し、アサーションは条件が満たされるまで自動的に再試行します。
ロケーター。 ユーザーがページをどのように見ているかを反映した、堅牢なロケーターで要素を検索します:
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')
テストの分離。 各テストは独自のブラウザコンテキストで実行されます。これは新しいブラウザプロファイルと同等です。認証状態を一度保存して、他のテストで再利用します:
// ログイン後に状態を保存
await page.context().storageState({ path: 'auth.json' });
// 他のテストで再利用
test.use({ storageState: 'auth.json' });
トレース。 失敗時に実行トレース、スクリーンショット、ビデオをキャプチャします。トレースビューアーで、すべてのアクション、DOM スナップショット、ネットワークリクエスト、コンソールメッセージを検査します:
// playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry',
},
});
npx playwright show-trace trace.zip
並列実行。 テストはデフォルトで、設定されたすべてのブラウザで並列実行されます。
Playwright CLI は、コーディングエージェント向けに設計されたブラウザ自動化用のコマンドラインインターフェースです。MCP よりもトークン効率に優れています。コマンドは、大きなツールスキーマやアクセシビリティツリーをモデルコンテキストに読み込むことを回避します。
npm install -g @playwright/cli@latest
オプションで、よりリッチなエージェント統合のためのスキルをインストール:
playwright-cli install --skills
コーディングエージェントにタスクを指示します:
playwright-cli を使用して、https://demo.playwright.dev/todomvc の「add todo」フローをテストしてください。
成功したシナリオと失敗したシナリオの両方についてスクリーンショットを撮ってください。
または、コマンドを直接実行:
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot
playwright-cli show を使用して、実行中のすべてのブラウザセッションのライブスクリーンキャストプレビューを備えたビジュアルダッシュボードを開きます。任意のセッションをクリックしてズームインし、リモートコントロールを実行します。
playwright-cli show
Playwright MCP サーバー は、Model Context Protocol を通じて AI エージェントに完全なブラウザ制御を提供します。エージェントは、構造化されたアクセシビリティスナップショットを使用してページと対話します。ビジョンモデルやスクリーンショットは不要です。
MCP クライアント (VS Code、Cursor、Claude Desktop、Windsurf など) に追加:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
VS Code 用のワンクリックインストール:
Claude Code の場合:
claude mcp add playwright npx @playwright/mcp@latest
AI アシスタントに任意の Web ページとの対話を依頼します:
https://demo.playwright.dev/todomvc に移動して、TODO アイテムをいくつか追加してください。
エージェントは、ページを構造化されたアクセシビリティツリーとして認識します:
- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
- checkbox "Toggle Todo" [ref=e10]
- text: "Buy groceries"
e5 や e10 などの要素参照を使用して、クリック、入力、対話を決定的かつ視覚的な曖昧さなく実行します。ツールは、ナビゲーション、フォーム入力、スクリーンショット、ネットワークモッキング、ストレージ管理などをカバーしています。
playwright をライブラリとして使用して、ブラウザ自動化スクリプトを作成できます。Web スクレイピング、PDF 生成、スクリーンショットキャプチャ、テストランナーなしでプログラムによるブラウザ制御が必要なあらゆるワークフローに適しています。
npm i playwright
スクリーンショットを撮る:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
PDF を生成する:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();
モバイルデバイスをエミュレートする:
import { chromium, devices } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();
ネットワークリクエストをインターセプトする:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();
Playwright VS Code 拡張機能 は、テストの実行、デバッグ、コード生成をエディターに直接もたらします。
エディターからワンクリックでテストを実行およびデバッグできます。ブレークポイントを設定し、変数を検査し、ライブブラウザビューでテスト実行をステップ実行できます。
CodeGen でテストを生成。 「Record new」をクリックしてブラウザを開き、アプリを操作しながら Playwright がテストコードを自動生成します。
ロケーターを選択。 ブラウザ内の任意の要素にホバーして、利用可能な最適なロケーターを確認し、クリックしてクリップボードにコピーします。
トレースビューアーの統合。 サイドバーで「Show Trace Viewer」を有効にすると、各テスト実行後に完全な実行トレース (DOM スナップショット、ネットワークリクエスト、コンソールログ、各ステップのスクリーンショット) を取得できます。
すべてのプラットフォームでヘッドレスおよびヘッド付き実行をサポートしています。 1 デフォルトで Chrome for Testing を使用します。
Playwright は Python、.NET、Java でも利用できます。
| 最適な用途 | インストール |
|---|
| Playwright Test | エンドツーエンドテスト | npm init playwright@latest |
| Playwright CLI | コーディングエージェント (Claude Code、Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | AI エージェントと LLM 駆動の自動化 | npx @playwright/mcp@latest |
| Playwright Library | ブラウザ自動化スクリプト | npm i playwright |
| VS Code 拡張機能 | VS Code でのテスト作成とデバッグ | マーケットプレイスからインストール |
| Linux | macOS | Windows |
|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |