MENU
AI開発ツール・プログラミング・エンジニア向け情報を発信
  1. ホーム
  2. 開発ツール
  3. 【2025年版】Playwright-MCP完全ガイド｜面倒なブラウザ操作を自動化する最強ツール

【2025年版】Playwright-MCP完全ガイド｜面倒なブラウザ操作を自動化する最強ツール

開発ツール

「Webサイトのテストを毎回手動でやるのが面倒…」
「データ収集のためにブラウザを何時間も操作している…」
「この作業、自動化できたらいいのに…」

このような悩みを抱えている方は多いです。

私は40代現役Webエンジニアとして、Playwright-MCPを導入したことで、面倒なブラウザ操作を完全に自動化できました。

結論から言うと：

  • セットアップは数分で完了
  • 操作を記録するだけでコードが生成される
  • Cursorと連携すれば、さらに効率アップ

この記事では、Playwright-MCPのセットアップから実践的な使い方まで、実体験をもとに徹底解説します。

目次

この記事でわかること

  • Playwright-MCPとは何か？何ができるのか
  • インストールと設定方法
  • 基本的な使い方（操作記録・スクリプト実行）
  • 実践例：自動ログイン・データ取得
  • Cursorとの連携で効率を最大化する方法

Playwright-MCPとは？

Playwright-MCPは、Microsoftが開発した高機能ブラウザ自動化ライブラリ「Playwright」を、さらに直感的に使えるようにしたツールです。

Playwright-MCPの主な特徴

特徴 説明
簡単なセットアップ 数個のコマンドで準備完了
対話的なコード生成 ブラウザ操作がリアルタイムでコードに変換
複数ページ対応 複数タブをまたいだ操作も簡単
クロスブラウザ対応 Chromium、Firefox、WebKitをサポート

何ができるようになるか

  • ログイン操作の自動化
  • フォーム入力の自動化
  • データ収集（スクレイピング）
  • E2Eテストの作成
  • 定型作業の自動実行

インストールとセットアップ

Playwright-MCPを始めるのは非常に簡単です。

ステップ1：インストール

npm install -D playwright playwright-mcp

ステップ2：初期設定

npx playwright-mcp init

これだけで、基本的な設定は完了です。

ステップ3：ブラウザのインストール

npx playwright install

Chromium、Firefox、WebKitがダウンロードされます（数百MB）。

基本的な使い方

Playwright-MCPの操作は、主に2つのコマンドで行います。

1. codegen：操作を記録してコードを生成

codegenは、Playwright-MCPの最も強力な機能です。

npx playwright-mcp codegen 'https://www.google.com'

このコマンドを実行すると：

  1. 新しいブラウザウィンドウが開く
  2. あなたの操作がすべて記録される
  3. 操作がTypeScriptコードに変換される
  4. コードがクリップボードにコピーされる

プログラミング初心者でも、まるで魔法のように自動化スクリプトが完成します。

2. run：自動化スクリプトを実行

作成したスクリプトは、runコマンドで実行します。

npx playwright-mcp run ./path/to/your/script.spec.ts

記録した操作がブラウザ上で自動的に再現されます。

実践例：自動ログインスクリプト

ここでは、Webサイトへの自動ログインスクリプトを作成してみましょう。

サンプルコード

import { test, expect } from '@playwright/test';

test.describe('自動ログイン', () => {
  test('ログイン成功', async ({ page }) => {
    // ログインページにアクセス
    await page.goto('https://example.com/login');

    // ログイン情報を入力
    await page.getByLabel('メールアドレス').fill('user@example.com');
    await page.getByLabel('パスワード').fill('password123');

    // ログインボタンをクリック
    await page.getByRole('button', { name: 'ログイン' }).click();

    // ログイン後のページにリダイレクトされるのを待つ
    await page.waitForURL('https://example.com/dashboard');

    // ログイン成功の確認
    await expect(page.getByText('ダッシュボード')).toBeVisible();
  });
});

コードの解説

コード 説明
page.goto() URLに移動
page.getByLabel() ラベルで要素を取得
fill() テキストを入力
click() 要素をクリック
waitForURL() URLの遷移を待機
expect().toBeVisible() 要素が表示されていることを確認

実践例：データ取得スクリプト

Webページからデータを取得するスクリプトも簡単に作成できます。

サンプルコード

import { test } from '@playwright/test';

test('商品一覧を取得', async ({ page }) => {
  // 商品一覧ページにアクセス
  await page.goto('https://example.com/products');

  // 商品名をすべて取得
  const productNames = await page.locator('.product-name').allTextContents();

  // 価格をすべて取得
  const productPrices = await page.locator('.product-price').allTextContents();

  // 結果を表示
  console.log('商品一覧:');
  productNames.forEach((name, index) => {
    console.log(`${name}: ${productPrices[index]}`);
  });
});

Cursorとの連携：開発効率を最大化

Playwright-MCPは単体でも強力ですが、CursorのようなAI開発エディタと組み合わせることで、その真価を発揮します。

Cursorで何ができるか

1. コードの自動生成

「このページの見出しを全部取得して」と自然言語で指示するだけで、CursorがPlaywrightコードを生成してくれます。

2. エラーの自動修正

スクリプト実行中にエラーが発生したら、エラーメッセージをCursorに貼り付けるだけで、原因の特定と修正案を提示してくれます。

3. リファクタリング

「この処理を関数にまとめて」と指示するだけで、可読性の高いコードにリファクタリングしてくれます。

おすすめの開発フロー

  1. **Playwright-MCPのcodegen**で操作を記録し、大枠のコードを生成
  2. Cursorで細部の調整や機能追加を実施
  3. テスト実行で動作確認

この「AIペアプログラミング」スタイルは、現代のエンジニアにとって必須スキルと言えます。

よくあるユースケース

ユースケース1：毎日の定型作業

  • 毎朝のレポート取得
  • 勤怠システムへの入力
  • SNSへの定期投稿

ユースケース2：E2Eテスト

  • ログイン機能のテスト
  • フォーム入力のテスト
  • 画面遷移のテスト

ユースケース3：データ収集

  • 競合サイトの価格調査
  • ニュース記事の収集
  • 在庫状況のモニタリング

トラブルシューティング

エラー1：ブラウザが起動しない

原因： ブラウザがインストールされていない

解決方法：

npx playwright install

エラー2：要素が見つからない

原因： セレクタが正しくない、または要素の読み込みが完了していない

解決方法：

  • waitForSelector()で要素の読み込みを待つ
  • codegenで正しいセレクタを再取得

エラー3：タイムアウト

原因： ページの読み込みが遅い

解決方法：

test.setTimeout(60000); // 60秒に延長

Playwright-MCPで変わったこと

Before

  • 手動でブラウザ操作：1日30分
  • 定型作業：毎日2時間
  • テスト作業：リリースごとに3時間

After

  • 手動操作：0分（完全自動化）
  • 定型作業：スクリプト実行で5分
  • テスト作業：自動テストで30分

1日あたり3時間以上の時間を節約できました。

まとめ：今日からできるアクション

Step 1：インストール（5分）

npm install -D playwright playwright-mcp
npx playwright-mcp init
npx playwright install

Step 2：操作を記録（10分）

npx playwright-mcp codegen 'https://対象サイト.com'

Step 3：スクリプトを実行（1分）

npx playwright-mcp run ./script.spec.ts

私の結論

Playwright-MCPは、ブラウザ操作の自動化を劇的に簡単にするツールです。

ポイント：

  • セットアップは数分で完了
  • 操作を記録するだけでコードが生成
  • Cursorとの連携でさらに効率アップ

「面倒な作業」を自動化して、クリエイティブな仕事に集中しましょう。

体系的に学びたい方へ

おすすめ技術書

自動化スクリプトを書く際の基礎知識を身につけたい方には、以下の技術書がおすすめです。


後から見返しても分かりやすい、綺麗なコードを書くための必読書です。


エンジニアとしての考え方を学べる名著。自動化の思想にも通じます。

Tech Creator Hub

より詳しい情報は、Tech Creator Hubをご覧ください。

開発ツール
E2Eテスト MCP Playwright テスト ブラウザ 自動化
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

dddaddyのアバター dddaddy

関連記事

目次