注目キーワード

PlaywrightでWebテストを自動化する｜インストールから実践まで解説

  • 2026.06.12
       
PlaywrightでWebテストを自動化する｜インストールから実践まで解説

アプリケーション開発において、動作テストは必須作業の１つとなります。
その上で、開発効率や品質の向上を図るためには、手動テストだけでなく自動テストの導入が欠かせません。

近年では、ReactやNext.jsなどの普及により、JavaScriptを多用した動的な画面を正確にテストできるツールが求められています。
その中の代表的なものの１つに、Playwrightというツールがあります。

今回の記事では、Playwrightの基本から、Next.jsでのE2Eテスト、Pythonスクレイピング、MCP連携まで幅広く解説していきたいと思います。

目次

Playwrightとは

Playwrightは、Microsoftが開発しているオープンソースの自動化フレームワークです。
Chrome系ブラウザだけでなくFirefoxやSafari系ブラウザにも対応しており、E2E（End to End）テストやWebスクレイピングの自動操作ツールの作成など、幅広い用途で利用されています。
さらに、2025年以降はAIエージェント向けのMCP（Model Context Protocol）との連携にも注目が集まっており、AIがブラウザを操作するための基盤技術としても活用され始めています。

Playwrightの主な特徴として、上述した3種類のブラウザエンジンを単一APIで操作できる点が挙げられます。
例えば、

  • ボタンをクリックする
  • フォームへ入力する
  • スクロールする
  • スクリーンショットを撮る
  • PDFを生成する
  • ファイルをダウンロードする

など、ブラウザでよく行われる操作をコードから実行することができます。
また、TypeScriptやJavaScriptだけでなく、Python・Java・C# にも対応しているため、既存プロジェクトへ導入しやすいのも特徴の１つです。

Playwrightと他ツール（Cypress/Selenium）の違いと選定基準

ブラウザ制御プロトコルの違いがもたらす実行速度と並列処理能力の差

代表的な自動化ツールの中に、同じくオープンソースである Selenium と Cypressがあります。
それぞれの特徴とPlaywrightとの違いについて確認してみましょう。

【Selenium】

Seleniumは、WebDriverという標準プロトコルを利用しています。
以下のように複数の通信を経由するため、比較的オーバーヘッドが大きい点が挙げられます。

テストコード
↓
WebDriver
↓
ブラウザ

一方Playwrightは、以下の構成で直接通信するため、高速に動作するのが特徴です。

テストコード
↓
ブラウザプロトコル
↓
ブラウザ

また、Playwright Testには標準で並列実行機能があるため、以下のように複数のワーカープロセスで同時実行することも可能です。

npx playwright test --workers=4

【Cypress】

Cypressは、ブラウザ内部でJavaScriptを実行する方式を採用しています。
デバッグ性に優れる一方、複数タブや複数ブラウザの扱いには制約がかかります。

一方、Playwrightは複数ページや複数ブラウザも自然に扱うことが可能です。

プロジェクトの言語スタックや目的に応じたツールの選び方

プロジェクトの環境や目的に応じたおすすめツールの一例は以下のとおりです。

  • 既存のJava資産を活かしたい … Selenium
  • React中心に開発 … Cypress
  • Next.jsを使用 … Playwright
  • Pythonスクレイピング … Playwright
  • AIエージェント連携 … Playwright

現在では、新規プロジェクトを始める場合にPlaywrightを第一候補にするケースが増えています。

Playwright CLIによる初期セットアップとテストコードの自動生成

パッケージの導入と環境に応じたブラウザのインストール手順

Node.js環境の場合、以下のコマンドを実行してインストールできます。

npm init playwright@latest

コマンド実行後、対話形式で以下の項目を質問されるので、任意の内容で設定してください。

  • TypeScript かJavaScriptの選択
  • テストフォルダ名
  • GitHub Actions workflowの追加の有無
  • ブラウザインストールの有無

既存プロジェクトの場合は、以下のコマンドでもインストール可能です。

# 既存プロジェクトでのインストール
npm install -D @playwright/test

# ブラウザのインストール
npx playwright install

Pythonの場合は、以下のコマンドで実行できます。

Python
# playwrightのインストール
pip install playwright

# ブラウザのインストール
playwright install

codegenコマンドを用いたTypeScript/Pythonへの操作記録とコード出力

Playwrightの便利機能の１つに、codegenがあります。
codegenは、ブラウザで行われた操作を自動で記録し、それを元にテストコードを生成してくれる機能のことを言います。

以下のコマンドを実行することで、codegenを使用できます。

npx playwright codegen <URL>

記録時は、以下のようなブラウザ操作を自動で記録します。

  • クリック
  • ボタン押下
  • テキスト入力
  • ページ遷移

以下は、実際に生成されるコードの一例です。

await page.goto("https://example.com");

await page.get_by_label("移動").click();

await page.get_by_label("検索").fill("playwright");

変換可能な言語は以下の通りとなります。

  • TypeScript
  • JavaScript
  • Python
  • Java
  • C#

テストの雛形作成や、スクレイピング開発の効率化などに役立つ便利な機能です。

Playwrightを用いたNext.jsのE2EテストとPythonスクレイピング

Next.js（App Router）環境におけるUIテストの書き方

playwrightでは、下記のコマンドを実行することで UI Mode を立ち上げることができます。

npx playwright test --ui

UI Modeが起動すると、Playwrightの全てのテストファイルのリストが表示され、下記の単位でテストを実行することができます。

  • 全テストファイル
  • 単一テストファイル
  • テストグループ
  • 単一テスト

各テストは、以下の構文で定義可能です。

test("内容説明", async ({ page }) => {...})
test("ログイン", async ({ page }) => {
  await page.goto("https://example.com");

  await page.getByRole("button", {
    name: "Login",
  }).click();

  await expect(page).toHaveURL("/login");
});

Playwrightでは、Locatorと呼ばれる要素を取得するための仕組みが用意されています。
以下のように、様々な条件に合わせた取得方法で、要素の取得が可能です。

  • getByRole() … ロールによる検索
  • getByText() … テキストによる検索
  • getByLabel() … ラベルテキストによる検索
  • getByPlaceholder() … プレースホルダーによる検索
  • getByAltText() … 代替テキストによる検索
  • getByTitle() … タイトル属性による検索
  • getByTestId() … テストIDによる検索

Pythonで動的Webサイトからデータを抜くスクレイピングの実践

以下は、Pythonで記述する場合のサンプルコードです。

Python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:

    browser = p.chromium.launch()

    page = browser.new_page()

    page.goto("https://example.com")

    print(page.title())

    browser.close()

Pythonの場合も、page.locator() や page.text_content() などの Locatorで要素を取得できます。

Playwright MCPが実現するAIエージェントへのブラウザ操作移譲

Model Context Protocol（MCP）の仕組みとメリット

MCPとは、AIと外部ツールを安全に接続するための共通規格(プロトコル)のことを言います。
Playwright MCPの場合、ページ遷移やクリック、フォーム入力といったブラウザ操作をAIに自律的に実行させることができます。

また、手動で実行したテストを元に、AIでテストコードを自動生成するといった活用方法もあります。
これにより、作業効率を大幅に向上させることができます。

人間が書くコードから「AIが自律して動く世界」への変化

従来の開発では、実行したい操作をコードで細かく記述する必要がありました。

一方、MCPを活用した場合、「管理画面へログインして注文一覧を取得して」 などといった内容を指示するだけで、AIがブラウザ操作を行ってくれる世界が現実になりつつあります。
今後は、テストの自動生成や業務の自動化など、様々な場面へと利用範囲が拡大すると考えられています。

Playwright MCPサーバーの動かし方とClaude連携の手順

Playwright MCPは、主に以下のMCP対応クライアントと連携可能です。

  • VS Code
  • Cursor
  • Windsurf
  • Claude Code
  • Claude Desktop

今回は上記の中から、Claude Desktopとの連携方法について紹介します。

Claude Desktopとの繋ぎ方と安全に動かすための注意点

Claude Desktopと連携する場合は、まず以下の手順で claude_desktop_config.json ファイルを開きます。

  1. Claude Desktopの設定ウィンドウを開く
  2. 開発者タブに移動する
  3. 構成を編集 (Edit Config) ボタンをクリックする

上記の手順を行い、config.jsonファイルが無事に開かれたら、以下の内容を記述します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Claude Desktopを再起動して設定を反映させた後、設定ウィンドウの開発者タブにplaywrightが追加されていれば設定完了です。

実際にMCPを動かす際は、主に以下のセキュリティ面における対策が重要となります。

  • 信頼できるサイトのみ操作する
  • 認証情報をハードコードしない
  • 権限を最小限にする
  • AIへ機密情報を不用意に渡さない

また、本番環境への自動操作を行なう場合は、十分な検証を行った上で導入するよう注意しましょう。

まとめ

Playwrightは、E2Eテストからスクレイピングまで幅広く活用できる便利なツールです。
また、自動化ツールとしてだけでなく、AIのブラウザ操作基盤としても重要性を増していく技術の一つとも言えるでしょう。

     

Otherカテゴリの最新記事