はじめに

開発中のWebアプリのテストやデバッグって、本当に大変ですよね。

「あれ、この画面表示されるはずなのに」
「さっきまで動いてたのに」
「ブラウザの開発者ツール見てもよくわからない」
「レスポンシブ対応できているか複数サイズで確認したい」

そんな日々を過ごしていた私ですが、最近CursorのPlaywright MCPを使って、AIに話しかけるだけで画面キャプチャを自動取得する方法を知って、めっちゃ開発効率が上がったのでシェアします。

何がすごいかというと、一切コードを書かずに、AIとの対話だけで画面の挙動確認やキャプチャ取得を実施できるんです！
特にフロントエンド開発をしている方や、テストやデバッグで画面確認を効率化したい方には、きっと役に立つと思います！

Cursor ＋ Playwright MCP で出来ること

  • AIに話しかけるだけで開発中のWebアプリの画面キャプチャを自動取得
  • テスト/デバッグ時に複数のビューポートサイズで自動確認
  • CursorのAI機能で画面の問題点を自動分析
  • 手動でスクリーンショットを撮る手間を解消

Playwright MCPって何？

  • Playwright MCP（Model Context Protocol）は、PlaywrightをCursorのAI機能と直接連携させるための仕組みです。これにより、CursorがPlaywrightを通じて実際のブラウザ操作を行い、その結果を自動で分析できるようになります。
  • 一言で説明すると、Cursorに「スクリーンショット撮って」と言うだけで、実際にブラウザを開いて画面キャプチャしてくれる仕組みです。

そもそもPlaywrightって何？

  • Microsoftが開発したWebアプリケーションのテストを自動化するためのオープンソースのNode.jsライブラリです。

Playwrightは、Microsoftが開発したWebブラウザ自動化ツールです。
Chrome、Firefox、Safari等の複数ブラウザをJavaScript/Python/C#等で自動操作でき、クリックやテキスト入力などのユーザー操作を再現できます。
E2Eテストやウェブスクレイピングに広く使われ、ヘッドレスモード（画面表示なし）での高速実行も可能です。

では、さっそく動かしてみましょう。

導入手順

1. 必要な準備

  • まずは、Node.jsがインストールされていることを確認してください。
node --version
npm --version

2. CursorにPlaywright MCPを追加

  • 続いて、Cursorで以下の手順を実行して、Playwright MCPを追加してください。

１. 「Cursor Settings」⚙️ を開きます。
２. 「MCP & Integrations」 → 「＋New MCP Server」をクリックします。
３. 開かれた mcp.json に以下の設定を追加します。

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

４. 設定を保存して、Cursorを再起動します。
５. これでCursorへのPlaywright MCPの設定は完了です。

3. 確認用アプリを準備

  • Playwright MCPの動作を確認するためのアプリを準備します。
    • MDNが公開しているReact製のTODOアプリを使用します。
    • https://github.com/mdn/todo-react

１.　GitHubから「Todo-React」アプリをCloneします。

git clone https://github.com/mdn/todo-react.git

２. アプリフォルダに移動します。

cd todo-react

３. 必要なパッケージをインストールします。

npm install

４. 開発サーバーを起動します。

npm run dev

５. ポート3000番で開発サーバーが起動します。

4. 動作確認

  • Cursorのチャット欄に以下のように入力してみてください。

Playwrightを使って、http://localhost:3000 のスクリーンショットを撮ってください。
ブラウザサイズは1024×768にして、screenshotsディレクトリに保存してください。

  • これだけで、Cursorが自動的にブラウザを開き、指定したサイズでスクリーンショットを撮影してくれます！

具体的な使い方

基本的なスクリーンショット取得

  • まずは基本的なスクリーンショット取得の指示の出し方です。

localhost:3000のトップページのスクリーンショットを撮ってください

  • Cursorが以下の処理を自動で行います。
  1. ブラウザを起動
  2. 指定URLに移動
  3. ページの読み込み完了を待機
  4. スクリーンショットを撮影
  5. ファイルを適切な場所に保存

複数の画面サイズで確認

  • 複数の画面サイズでスクリーンショットを撮ることで、レスポンシブ対応の画面確認も簡単に実施することが出来ます。

開発中のWebアプリ（http://localhost:3000）を以下のサイズでスクリーンショットを撮ってください。
– デスクトップ: 1920×1080
– タブレット: 768×1024
– モバイル: 375×667
それぞれPNG形式で、タイムスタンプ付きのファイル名で保存してください。

特定のページやフォーム状態での確認

  • 開くページを指定したり、実行して欲しい操作を記載することで、Cursorが実際にその操作をしてスクリーンショットを取得してくれます。

「http://localhost:3000/contact」にアクセスして、以下の操作をしてからスクリーンショットを撮ってください。
1. 名前フィールドに「テストユーザー」を入力
2. メールフィールドに「test@example.com」を入力
3. メッセージフィールドに「テストメッセージ」を入力
4. その状態でスクリーンショットを撮影

ページ間の遷移テスト

  • 画面を順番に遷移させて、各ページのスクリーンショットを取得させることも可能です。

開発中アプリで以下の流れをテストして、各ステップでスクリーンショットを撮ってください。
1. http://localhost:3000 （トップページ）
2. ログインリンクをクリック
3. ログイン後のダッシュボード
ブラウザサイズは1024×768で統一してください。

CursorでPlaywrightを利用する最大のメリット

  • Cursor ＋ Playwright MCPを利用するメリットは、単純なスクリーンショット取得だけではありません。撮影したスクリーンショットをCursorに自動分析させることが可能です。

UI/UXの問題点検出

  • Cursorが取得したスクリーンショットを分析して、具体的な改善提案をしてくれます。

開発中のWebアプリ(http://localhost:3000)のスクリーンショットを撮って、以下の観点で問題がないかチェックしてください。
– ボタンやリンクが適切に配置されているか
– テキストの可読性に問題がないか
– レイアウトが崩れていないか
– 色のコントラストが十分か

デザイン一貫性のチェック

  • 各ページのスクリーンショットを分析して、デザインの一貫性のチェックを実施してもらうことも可能です。

開発中のWebアプリ(http://localhost:3000)にアクセスし、メニューのホームページ、ログインページ、ダッシュボードのスクリーンショットを撮って、デザインの一貫性をチェックしてください。
特に以下を確認してください。
– ヘッダー/フッターの統一性
– ボタンのデザイン統一
– フォントや色の使用一貫性

アクセシビリティの確認

  • Webアプリケーションのアクセシビリティの確認させることも可能です。

開発中のWebアプリ(http://localhost:3000)にアクセスし、スクリーンショットを撮って、アクセシビリティの観点から問題がないか確認してください。
– ラベルとフィールドの関連性
– フォーカス状態の視認性
– エラーメッセージの表示

  • 自動的に処理を進めてアクセスビリティチェックを実施してくれます。

  • チェック完了後にアクセシビリティ評価を教えてくれます。

実際の開発現場での活用例

バグ発生時の再現確認

  • バグ報告を受けた時の確認対応での使用。

バグ報告「モバイル表示でメニューが崩れています」
モバイルサイズ（375×667）でメインページのスクリーンショットを撮って、
メニュー部分に問題がないか確認してください。

定期的な品質チェック

  • リリース後の正常稼働確認での使用。

リリース後の品質チェックとして、以下のページを3つのデバイスサイズでスクリーンショットお願いします。
– トップページ
– 商品一覧ページ
– 購入フォームページ
何か問題があれば指摘してください。

デザインとの比較

  • デザインデータと実装画面の比較確認での使用。（ワークスペースにデザインデータを事前に保存しておく）

デザイン適用確認として実装した画面のスクリーンショットを撮って、
Figmaのデザインと比較して相違点があれば教えてください。

その他TIPS

基本的な使い方

基本的な指示から少し工夫した指示までを記載します。

# シンプルなスクリーンショット
localhost:3000のスクリーンショットをお願いします

# フルページスクリーンショット
ページ全体をスクロール込みでスクリーンショットしてください

# 特定の要素のみ
ヘッダー部分だけのスクリーンショットをお願いします

# 複数タブでの確認
新しいタブでlocalhost:3000/adminを開いて、両方のタブでスクリーンショットを撮ってください

# 時間をおいた確認
ページを開いて5秒待ってからスクリーンショットしてください（アニメーション完了後）

# エラー状態の確認
存在しないページ（localhost:3000/notfound）にアクセスして、エラーページのスクリーンショットをお願いします

セキュリティ面での配慮

  • 本番環境やセキュアな情報を含むページでは使用に注意してください。

パスワードやAPIキーが表示される可能性があるページは避けてスクリーンショットしてください

パフォーマンスへの配慮

  • 大量のスクリーンショットを一度に取得する場合は、適度な間隔を空けることを指示しましょう。

10ページのスクリーンショットを撮りますが、各ページ間に2秒の待機時間を入れてください

ファイル管理の指定

  • ファイルの保管場所、ファイル名を明示的に指示することでファイル命名規則に従わせることができます。

スクリーンショットは日付とページ名が分かるファイル名で、screenshotsフォルダ内の今日の日付フォルダに保存してください

まとめ

コードを一切書かずに、Cursorとの会話だけで簡単に画面テストができるのは本当に革命的です。特にフロントエンド開発をしている方には、デバッグ効率がかなり向上しますのでぜひ試してみてください。

私が使ってみてもっとも便利に感じるのは、CursorのAI機能との連携です。
単純に画面キャプチャを取るだけでなく、AIがその画像を分析してUIの改善提案やチェックまで自動的にしてくれるのが本当に便利です。

まずは、皆さんも「Cursor ＋ Playwright MCP」を一度動かして経験してみてください。
アイデア次第でもっと便利に使える仕組みになると思います。