PlaywrightMCP_ゼロから入門_Udemy講座

Udemy 講座 ｜ 0から入門 http://localhost:8080 Playwright MCP ゼロから入門 VS Code × Claude Code で、ブラウザ操作を AI に任せ る うさうさ研修工房 ｜ うさうさ先生 「注文して、結果を教えて」

講座の全体像：9セクション・約2時間20分 0 はじめに 1 約8分 3 Playwright MCP をつなぐ テストコードに残す 約17分 2 約24分 4 約18分 6 Playwright MCP を理解する はじめての操作 約20分 5 約20分 7 安全に使う・困ったとき 約10分 環境構築 実践ハンズオン 約22分 8 まとめ 約3分 緑のセクションは手を動かすハンズオン Playwright MCP ゼロから入門 ｜ うさうさ研修工房 2

SECTION 0 はじめに この講座のゴールと進め方 0-1 この講座で作るもの 約3分 0-2 対象・前提・費用 約3分 0-3 進め方と教材のダウンロード 約2分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 3

Lecture 0-1 この講座で作るもの あなた → Claude Code 操作させる 1 開く・入力する・選ぶ・押す を日本語で頼める 「ラーメン店の注文フォームで、みそラーメンを味玉付き で注文して。表示されたメッセージが正しいか確かめて」 バグを見つけさせる 2 http://localhost:8080 動かないボタンの原因を、ブラウザのエラーから調べさせる テストに残す 3 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 AI の操作を Playwright のテストコードにして、何度でも実行 する 4

Lecture 0-2 対象・前提・費用 こんな人におすすめ • 画面の確認作業を毎回手でやっている • Claude Code を入れたが MCP はまだ • テスト自動化に興味はあるがコードが不安 前提 • Windows 10/11 または Mac • ファイル操作・コピー＆ペーストができる • プログラミング経験は不要（HTML が読めると◎） 使うもの 費用 VS Code 無料 Node.js 無料 Playwright MCP 無料（オープンソース） Playwright Test 無料（オープンソース） Claude Code 有料：Pro / Max / Team / Enterprise また は Console Claude Code は claude.ai の無料プランでは使えません。料金は公式ページで最新を 確認してください。 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 5

Lecture 0-3 進め方と教材のダウンロード 1 2 3 見る まねる 確かめる 動画で操作の流れをつ かむ 一時停止して、同じ操作 を自分の PC で 同じ結果が出たら次 へ。違ったら Q&A へ ダウンロード教材 index.html 練習ページ（ラーメン店の注文フォーム） prompts.txt 講座で使うプロンプト集 order.spec.ts テストコードの見本 うさうさ先生との約束 練習は自分のパソコンの練習ページで行います。他社のサイトや本番のサービスで、いきなり試さないでください。 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 6

SECTION 1 Playwright MCP を理解する なぜ使うのか → 何なのか → どう動くのか 1-1 なぜ画面確認を自動化したいのか 約4分 1-2 MCP とは：4段で理解する 約6分 1-3 Playwright と Playwright MCP 約5分 1-4 画面を「構造」で読むしくみ 約5分 1-5 できること・苦手なこと 約4分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 7

Lecture 1-1 なぜ画面確認を自動化したいのか これまで：手作業の確認 これから：AI に頼む 毎回同じ入力 日本語で頼む 名前・メニュー・チェック…を手で何度も 「みそラーメンを注文して確かめて」 見落とし 同じ手順で何度でも 疲れてくると確認が雑になる 直した後の再確認もすぐ 記録が残らない 操作がコードで残る 「確認しました」の中身があいまい AI が実行した Playwright のコードが毎回表示される Playwright MCP ゼロから入門 ｜ うさうさ研修工房 8

Lecture 1-2 MCP とは：4段で理解する 定義 AI アプリと外部の道具（ブラウザ・ファイル・サービス）をつなぐための共通ルール。Model Context Protocol の略 例え ラーメン店の「共通の注文票」。書き方が決まっているから、どの厨房スタッフにも同じ形で頼める 詳細 道具を提供する側＝MCP サーバー（今回は Playwright MCP） 道具を使う側＝MCP クライアント（今回は Claude Code） 一言 MCP は、AI が道具に出す「共通の注文票」 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 9

Lecture 1-2 うさうさラーメン店で例えると お客さん 店長 注文票 厨房スタッフ あなた Claude Code MCP Playwright MCP 日本語で注文 注文を分解して 段取りを決める 決まった書式で 道具に依頼 ブラウザを 実際に操作 ポイント 注文票の書き方が共通なので、厨房スタッフ（MCP サーバー）を増やしても、店長（Claude Code）の頼み方は同じ。ブラウザ以外にも GitHub・データベースなどの MCP サーバーがある。 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 10

Lecture 1-3 Playwright と Playwright MCP のちがい Playwright（Playwright Test） Playwright MCP 正体 ブラウザ自動操作のライブラリ（Microsoft 製） Playwright を AI が使えるようにした MCP サーバー 操作を決めるのは 人（コードに書く） AI（日本語の依頼から判断） 書き方 TypeScript / Python などのコード 日本語のお願い 毎回同じ動き ◎ 同じコードは同じ動き △ AI の判断で少し変わる 向いている場面 毎日の自動テスト・CI 調べる・試す・テストの下書き この講座の作戦：MCP で「試す」→ Playwright Test で「残す」（セクション6） Playwright MCP ゼロから入門 ｜ うさうさ研修工房 11

Lecture 1-4 画面を「構造」で読むしくみ（スナップショット） http://localhost:8080 AI が受け取る部品の一覧（イメージ） 見出し うさうさラーメン店 注文フォーム 入力欄 お名前 選択リスト ラーメン チェックボックス 人が見る画面 味玉トッピング ボタン 注文する ボタン クーポンを使う スクショ（写真） 人が見るため。重い・位置がずれやすい スナップショット（構造） AI が操作するため。軽い・役割と名前で正確 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 12

Lecture 1-5 できること・苦手なこと できること 苦手・やらせないこと 開く・戻る browser_navigate 押す・入力・選ぶ browser_click / type / select_option まとめて入力 browser_fill_form 待つ browser_wait_for 画面を読む・撮る browser_snapshot / take_screenshot エラー・通信を見る browser_console_messages / network_requests タブ・画面サイズ browser_tabs / resize Playwright MCP ゼロから入門 ｜ うさうさ研修工房 • CAPTCHA など「人間か確認」の突破（やらせない） • ログイン・決済などの本番操作（人がやる） • 毎回まったく同じ動きの保証 → テストコードに残す • 大量・高速の繰り返し → テストコードの出番 • 見た目の微妙なズレの判定 13

SECTION 2 環境構築 VS Code・Node.js・Claude Code を入れる（Windows / Mac） 2-1 全体像と必要なもの 約3分 2-2 VS Code・Node.js・Git を入れる 約6分 2-3 Claude Code を入れてログイン 約6分 2-4 VS Code 拡張機能「Claude Code」 約5分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 14

Lecture 2-1 全体像と必要なもの 必要なもの チェックリスト あなたのパソコン（Windows / Mac） VS Code VS Code Claude Code 1.94 以上 編集と会話の画面 拡張機能「Claude Code」 店長役 MCP クライアント Node.js 18 以上（LTS 版がおすすめ） Git for Windows Windows のみ・推奨 ブラウザ Playwright MCP Chrome または Edge 練習ページを表示 厨房スタッフ役 Node.js（npx）で起動 Claude Code 有料プランのアカウント ブラウザ Chrome（Windows は Edge でも可） Playwright MCP ゼロから入門 ｜ うさうさ研修工房 15

Lecture 2-2 VS Code・Node.js・Git を入れる Windows（PowerShell） winget install Microsoft.VisualStudioCode winget install OpenJS.NodeJS.LTS winget install Git.Git Mac（ターミナル） brew install --cask visual-studio-code brew install node # Git は xcode-select --install でも可 入ったか確認（ターミナルを開き直してから） node -v npx -v # v18 以上なら OK Playwright MCP ゼロから入門 ｜ うさうさ研修工房 つまずきポイント • 「node が見つからない」→ ターミナルや VS Code を開き直す • winget / brew が無い → 公式サイトからダウンロードで OK 16

Lecture 2-3 Claude Code を入れてログイン Windows（PowerShell） irm https://claude.ai/install.ps1 | iex 確認とログイン claude --version claude # 初回はブラウザでログイン うまくいかないときは、ターミナルを開き直してから claude --version Mac（ターミナル） curl -fsSL https://claude.ai/install.sh | bash ログインに使えるアカウント • Pro / Max • Team / Enterprise の席 • Console（API の従量課金） claude.ai の無料プランでは使えません Windows は Git for Windows を入れておくと、Claude Code が Bash を使えます （無ければ PowerShell を使用） Playwright MCP ゼロから入門 ｜ うさうさ研修工房 17

Lecture 2-4 VS Code 拡張機能「Claude Code」 拡張機能を開く 1 Ctrl+Shift+X（Mac は Cmd+Shift+X） 「Claude Code」を入れる 2 提供元 Anthropic のものを選んでインストール Spark アイコンをクリック 3 パネルでできること • 変更の差分を見てから承認できる • 選択したコードを @メンションで渡す（Alt+K / Mac は Option+K） • /mcp で MCP サーバーを確認・管理 • /plan で計画を立ててから実行 • 会話の履歴・複数タブ ファイルを開くとエディタ右上に表示される サインイン 4 2-3 と同じアカウントでログイン Playwright MCP ゼロから入門 ｜ うさうさ研修工房 必要：VS Code 1.94 以上 18

SECTION 3 Playwright MCP をつなぐ Claude Code に「厨房スタッフ」を雇う 3-1 claude mcp add で追加する 約5分 3-2 つながったか確認する 約3分 3-3 スコープと .mcp.json 約5分 3-4 よく使うオプション 約5分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 19

Lecture 3-1 claude mcp add で追加する Windows（PowerShell） claude mcp add playwright -- cmd /c npx -y @playwright/mcp@latest Mac（ターミナル） claude mcp add playwright -- npx -y @playwright/mcp@latest playwright 登録する名前（自由に決められる） -- cmd /c Windows で npx を動かすための包 み @playwright/mcp@latest Playwright MCP ゼロから入門 ｜ うさうさ研修工房 ここから後ろが起動コマンド Microsoft 公式のパッケージ・最新 版 20

Lecture 3-2 つながったか確認する ターミナルで確認 claude mcp list claude mcp get playwright claude mcp remove playwright Claude Code パネルで確認 /mcp # 削除 playwright … Connected なら成功 Connected にならないとき • Windows で cmd /c を付け忘れていないか確認し、remove → add し直す • add の後に始めた会話から使える。新しい会話を開く／VS Code で「Developer: Reload Window」 • node -v が通るか（Node.js 18 以上）を確認する Playwright MCP ゼロから入門 ｜ うさうさ研修工房 21

Lecture 3-3

スコープと .mcp.json
スコープ

使える範囲

保存先・使いどころ

local（既定）

自分だけ・このプロジェクト

まず試すとき。講座はこれ

project

このプロジェクトの全員

.mcp.json に保存。Git でチームに共有

user

自分の全プロジェクト

どこでも使いたい道具

チームで共有する例
claude mcp add playwright --scope project \
-- npx -y @playwright/mcp@latest
# Windows は npx の前に cmd /c

Playwright MCP ゼロから入門 ｜ うさうさ研修工房

.mcp.json の中身（Mac の例）
{ "mcpServers": {
"playwright": { "command": "npx",
"args": ["-y", "@playwright/mcp@latest"] }
} }

22

Lecture 3-4 よく使うオプション オプション 何が変わる 使いどころ --browser msedge Edge で動かす（既定は Chrome） Windows に最初から入っている --headless 画面を出さずに動かす 動きを見なくてよいとき --isolated プロファイルをディスクに残さない 毎回まっさらな状態で確認 --viewport-size 1280x720 画面サイズを決める スクショの大きさをそろえる --device "iPhone 15" スマホとして表示する スマホ画面の確認 --output-dir ./out スクショ等の保存先 保存場所をまとめる --caps pdf PDF 保存の道具を追加 ページを PDF で残す 例（Windows） claude mcp add playwright -- cmd /c npx -y @playwright/mcp@latest --browser msedge Playwright MCP ゼロから入門 ｜ うさうさ研修工房 23

SECTION 4 はじめての操作 練習ページを開いて、AI と一緒に画面を読む 4-1 練習ページを用意する 約5分 4-2 最初の一言「開いて」 約5分 4-3 スナップショットを読む 約5分 4-4 承認画面と許可ルール 約5分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 24

Lecture 4-1 練習ページを用意する 1 フォルダを作り index.html を置く http://localhost:8080 mkdir pw-course cd pw-course code . 2 練習ページを配信する（開いたままにする） npx http-server -p 8080 -c-1 3 ブラウザで http://localhost:8080 を開く file:// は既定でブロックされるため、http で配信する Playwright MCP ゼロから入門 ｜ うさうさ研修工房 25

Lecture 4-2 最初の一言「開いて」 実際の実行結果（抜粋） あなた → Claude Code 「Playwright MCP で http://localhost:8080 を開いて、この ページに何があるか教えて」 1 承認を求められる browser_navigate を使ってよいか確認 2 ブラウザが開く Chrome（または Edge）に練習ページ ### Ran Playwright code await page.goto('http://localhost:8080'); ### Page - Page URL: http://localhost:8080/ - Page Title: うさうさラーメン店 実行した Playwright のコードが毎回表示される → セクション6 でテストに使う 3 部品を読む スナップショットで入力欄やボタンを把握 4 日本語で報告 「名前の入力欄、ラーメンの選択…があ ります」 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 26

Lecture 4-3 スナップショットを読む browser_snapshot の結果（実物） - heading "うさうさラーメン店 注文フォーム" [ref=e2] - textbox "お名前" [ref=e4] - combobox "ラーメン" [ref=e6]: - option "選んでください" [selected] - option "しょうゆ" - option "みそ" - option "しお" - checkbox "味玉トッピング" [ref=e8] - button "注文する" [ref=e9] - button "クーポンを使う" [ref=e10] 役割 textbox / button など部品の種類 名前 「お名前」「注文する」などのラベル ref e4・e9 など。AI はこの番号で操作す る ラベルが付いた部品ほど AI も見つけやすい Playwright MCP ゼロから入門 ｜ うさうさ研修工房 27

Lecture 4-4

承認画面と許可ルール
承認画面で見るところ
•

どの道具か（browser_click など）

•

どこに対してか（URL・ボタン名）

•

想定どおりなら許可、違えば断って指示し直す

.claude/settings.json の例
{
"permissions": {
"allow": [
"mcp__playwright__browser_snapshot",
"mcp__playwright__browser_take_screenshot",
"mcp__playwright__browser_console_messages"
]
}
}

おすすめの分け方
読むだけ（snapshot・screenshot・console）→ 許可
押す・入力する（click・type）→ 最初は毎回確認

Playwright MCP ゼロから入門 ｜ うさうさ研修工房

mcp__サーバー名__道具名 で指定。mcp__playwright__* はその全道具

28

SECTION 5 実践ハンズオン 入力・検証・バグ調査・スマホ確認 5-1 フォームに入力して送信する 約6分 5-2 結果を検証させる 約5分 5-3 バグを探させる 約6分 5-4 スマホ幅で確認・スクショ 約5分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 29

Lecture 5-1

フォームに入力して送信する
実際に実行されたコード（Ran Playwright code）

あなた → Claude Code

「お名前に「うさうさ」、ラーメンは「みそ」、味玉トッピングに
チェックを入れて「注文する」を押して。表示されたメッセージ
を教えて」

1

browser_type

お名前に入力

2

browser_select_option

みそを選ぶ

await page.getByRole('textbox',
{ name: 'お名前' }).fill('うさうさ');
await page.getByLabel('ラーメン …')
.selectOption('みそ');
await page.getByRole('checkbox',
{ name: '味玉トッピング' }).click();
await page.getByRole('button',
{ name: '注文する' }).click();

表示されたメッセージ

3

browser_click

味玉にチェック

うさうささん、みそラーメン（味玉）を承りました
4

browser_click

Playwright MCP ゼロから入門 ｜ うさうさ研修工房

注文するを押す

30

Lecture 5-2 結果を検証させる http://localhost:8080 あなた → Claude Code 「期待する表示は「うさうささん、みそラーメン（味玉）を承りました」で す。一致したか ○/× で報告して。次に、何も入力せずに「注文する」 を押した場合も試して、表示を教えて」 パターン 期待する表示 全部入力 うさうささん、みそラーメン（味玉）を承りました ○ 未入力 未入力の項目があります ○ Playwright MCP ゼロから入門 ｜ うさうさ研修工房 結果 期待値を先に書く ＝ テストの考え方 31

Lecture 5-3 バグを探させる（コンソールエラー） browser_console_messages の結果（実物） あなた → Claude Code 「「クーポンを使う」を押して、何も起きない原因をブラウザのコ ンソールから調べて。直し方の案を出して。まだ直さないで」 Total messages: 1 (Errors: 1, Warnings: 0) ReferenceError: applyCoupon is not defined at HTMLButtonElement.<anonymous> (http://localhost:8080/:48:7) 調べる → 直す → 確かめる のループ 1 調べる 2 案を出す 3 直す 4 確かめる 押して、コンソールを読む まだ直さない。理由を理解す る 「案1で直して」と頼む もう一度開いて押してもらう Playwright MCP ゼロから入門 ｜ うさうさ研修工房 32

Lecture 5-4 スマホ幅で確認・スクリーンショット あなた → Claude Code 「画面を幅375・高さ812にして、ページ全体のスクリーンショットを撮っ て。はみ出している部品がないかも見て」 1 browser_resize 画面サイズを変える 2 browser_take_screenshot スクリーンショットを撮る 幅 375px 保存先と後片付け # .gitignore に追加 → .playwright-mcp/ Playwright MCP ゼロから入門 ｜ うさうさ研修工房 33

SECTION 6 テストコードに残す AI で「試す」→ Playwright Test で「残す」 6-1 なぜコードに残すのか 約4分 6-2 Playwright Test を準備する 約5分 6-3 Claude にテストを書かせて実行 約8分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 34

Lecture 6-1 なぜコードに残すのか AI に毎回操作させる テストコードで実行 速さ AI が考える分ゆっくり 数秒で終わる 利用量 毎回 Claude を使う Claude を使わない 毎回同じ動き △ 少し変わることがある ◎ 同じ 得意なこと 初めての画面を調べる・原因調査 毎日の確認・変更後の確認 AI で試す Playwright MCP ゼロから入門 ｜ うさうさ研修工房 コードに残す コードで毎回実行 壊れたら AI で調べる 35

Lecture 6-2 Playwright Test を準備する 練習フォルダで実行 VS Code 拡張機能 npm init playwright@latest Playwright Test for VS Code 提供元：Microsoft（無料） 質問への答え（迷ったら既定のまま Enter） • 言語：TypeScript • テストの置き場所：tests • ブラウザをインストール：Yes • テストの横の ▶ で1件ずつ実行 • ブラウザを表示しながら実行 • 失敗した行がすぐ分かる よく使うコマンド npx playwright test npx playwright show-report Playwright MCP ゼロから入門 ｜ うさうさ研修工房 # 実行 # 結果を見る npx playwright test --ui でも画面から実行できる 36

Lecture 6-3

Claude にテストを書かせて実行する
tests/order.spec.ts（生成例・動作確認済み）
あなた → Claude Code
import { test, expect } from '@playwright/test';

「さっきの注文の流れを Playwright Test のテスト
にして tests/order.spec.ts に保存して。成功と未
入力の2パターンで、表示されるメッセージを検証
して」

実行して確認
npx playwright test

test('みそラーメン（味玉）を注文できる ', async ({ page }) => {
await page.goto('http://localhost:8080');
await page.getByRole('textbox', { name: ' お名前' }).fill(' うさうさ');
await page.getByLabel(' ラーメン').selectOption(' みそ');
await page.getByRole('checkbox', { name: ' 味玉トッピング ' }).check();
await page.getByRole('button', { name: ' 注文する' }).click();
await expect(page.locator('#result'))
.toHaveText(' うさうささん、みそラーメン（味玉）を承りました ');
});
test('未入力だと注意が出る ', async ({ page }) => {
await page.goto('http://localhost:8080');
await page.getByRole('button', { name: ' 注文する' }).click();
await expect(page.locator('#result')).toHaveText(' 未入力の項目があります ');
});

2 passed なら成功

Playwright MCP ゼロから入門 ｜ うさうさ研修工房

37

SECTION 7 安全に使う・困ったとき AI にブラウザを任せるときのルールとトラブル対応 7-1 安全に使うための4つのルール 約5分 7-2 トラブルシューティング 約5分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 38

Lecture 7-1 安全に使うための4つのルール 1 操作先を限定する 自分のサイト・許可されたサイトだけ。他社サイトの自動操作 は利用規約を確認する 3 機密を入れない 顧客データ・社外秘を会話に入れない。会社の生成 AI の ルールに従う Playwright MCP ゼロから入門 ｜ うさうさ研修工房 2 ログイン・決済は人がやる パスワードやカード情報を AI に渡さない。検証は専用のテス ト用アカウントで 4 承認を読んでから許可 どの道具で、どこに何をするかを確認。検証用は --isolated でまっさらに 39

Lecture 7-2 トラブルシューティング 症状 よくある原因 対処 /mcp で Failed・一覧に出ない Windows で cmd /c が無い remove → cmd /c 付きで add し直す 道具が使えない add の前に始めた会話 新しい会話を開く／Reload Window ブラウザが見つからない Chrome が入っていない Chrome を入れる、または --browser msedge localhost を開けない http-server が止まっている ターミナルで起動したままにする file:// を開けない 既定でブロックされている http-server で配信して http で開く 直したのに表示が古い ブラウザのキャッシュ -c-1 を付けて配信する npx が失敗する 社内プロキシ 情報システム部門に確認（--proxy-server もある） Playwright MCP ゼロから入門 ｜ うさうさ研修工房 40

SECTION 8 まとめ できるようになったことと、次の一歩 8-1 振り返りと次の一歩 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 約3分 41

Lecture 8-1 振り返りと次の一歩 到達チェック 次の一歩 自分のページで MCP を自分の言葉で説明できる 1 業務のテスト環境で、いつもの確認を頼んでみる Claude Code に Playwright MCP を追加できる 毎日自動で スナップショットの役割・名前・ref が読める 2 テストコードを GitHub Actions などで定期実行 入力・検証・バグ調査を日本語で頼める 道具を増やす 許可ルールで安全に使い分けられる 3 GitHub など、ほかの MCP サーバーも組み合わせる AI の操作をテストコードに残して実行できる Playwright MCP ゼロから入門 ｜ うさうさ研修工房 42

おつかれさまでした 質問は Q&A へ。レビューで感想を聞かせてもらえるとうれしいです。 面白きこともなき世を面白く うさうさ研修工房 ｜ うさうさ先生

付録：講座で使うプロンプト集 4-2 Playwright MCP で http://localhost:8080 を開いて、このページに何があるか教えて 5-1 お名前に「うさうさ」、ラーメンは「みそ」、味玉トッピングにチェックを入れて「注文する」を押して。表示されたメッセージを教えて 5-2 期待する表示は「うさうささん、みそラーメン（味玉）を承りました」です。一致したか ○/× で報告して。未入力で押した場合も試して 5-3 「クーポンを使う」を押して、何も起きない原因をブラウザのコンソールから調べて。直し方の案を出して。まだ直さないで 5-4 画面を幅375・高さ812にして、ページ全体のスクリーンショットを撮って。はみ出している部品がないかも見て 6-3 さっきの注文の流れを Playwright Test のテストにして tests/order.spec.ts に保存して。成功と未入力の2パターンで検証して Playwright MCP ゼロから入門 ｜ うさうさ研修工房 44

付録：確認クイズ（Udemy のクイズ用） No 問題 正解 1 MCP をひと言でいうと？ AI アプリと外部の道具をつなぐ共通ルール 2 Playwright MCP が画面を AI に渡す主な形式は？ アクセシビリティのスナップショット（構造） 3 Windows で npx の MCP を追加するときに付けるものは？ cmd /c 4 チームで MCP 設定を共有するスコープと保存ファイルは？ project ／ .mcp.json 5 スナップショットの「e9」のような番号を何という？ ref（AI はこれで操作する） 6 Playwright MCP が既定で開けない URL は？ file://（http で配信する） 7 読むだけの道具を許可する設定ファイルは？ .claude/settings.json の permissions.allow 8 毎日くり返す確認に向いているのは？ テストコード（Playwright Test） Playwright MCP ゼロから入門 ｜ うさうさ研修工房 45

講師用：Udemy 公開前チェックリスト Udemy の公開条件（有料講座） 動画の合計 30分以上（本講座は約2時間20分） レクチャー 5本以上（本講座は30本） HD 画質（720p または 1080p） 収録のコツ • 1080p で録画。VS Code とブラウザは拡大表示（125〜150%） • 通知をオフにし、メールアドレスやアカウント名を映さない • AI の応答は毎回変わる。台本どおりでなくてよいと字幕で補 足 • 1レクチャー＝1テーマ・5〜8分 • 各レクチャーの最後に「できたこと」を一言で確認 音声は両チャンネル・映像と同期 ランディングページ：説明文 200 語以上、講座画像、受講対象、 講師プロフィールと写真 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 46

講師用：レクチャー一覧（Udemy カリキュラム入力用） No レクチャー 0-1 この講座で作るもの 0-2 分 No レクチャー 分 3 3-4 よく使うオプション 5 対象・前提・費用 3 4-1 練習ページを用意する 5 0-3 進め方と教材のダウンロード 2 4-2 最初の一言「開いて」 5 1-1 なぜ画面確認を自動化したいのか 4 4-3 スナップショットを読む 5 1-2 MCP とは：4段で理解する 6 4-4 承認画面と許可ルール 5 1-3 Playwright と Playwright MCP 5 5-1 フォームに入力して送信する 6 1-4 画面を「構造」で読むしくみ 5 5-2 結果を検証させる 5 1-5 できること・苦手なこと 4 5-3 バグを探させる 6 2-1 全体像と必要なもの 3 5-4 スマホ幅で確認・スクショ 5 2-2 VS Code・Node.js・Git を入れる 6 6-1 なぜコードに残すのか 4 2-3 Claude Code を入れてログイン 6 6-2 Playwright Test を準備する 5 2-4 VS Code 拡張機能「Claude Code」 5 6-3 Claude にテストを書かせて実行 8 3-1 claude mcp add で追加する 5 7-1 安全に使うための4つのルール 5 3-2 つながったか確認する 3 7-2 トラブルシューティング 5 3-3 スコープと .mcp.json 5 8-1 振り返りと次の一歩 3 合計 30 レクチャー・約 2 時間 22 分 Playwright MCP ゼロから入門 ｜ うさうさ研修工房 47