---
title: PlaywrightMCP_ゼロから入門_Udemy講座
tags:  #playwrightmcp  
author: [Yukiko](https://docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4JMY1MN6JW.jpg?width=480
description: PlaywrightMCP_ゼロから入門_Udemy講座 by Yukiko
published: October 24, 26
canonical: https://docswell.com/s/yukiko_it/Z9NY49-2026-10-24-145518
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4JMY1MN6JW.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PJR9LVDN79.jpg)

講座の全体像：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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PEXQWZ18JX.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/3EK9V82LED.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L73WM24675.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/87DK6ZQMJG.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VJPKYDLQE8.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/2EVVG1QPEQ.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/57GL82WQEL.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4EQY9P3WJP.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/KJ4WXY1171.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LE1YN6G57G.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GEWG4WKWJ2.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/47ZL25Z2J3.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YJ6WV986JV.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GJ5MDN95J4.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LE3WM2Y5E5.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/8EDK6Z5Y7G.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/V7PKYDG2J8.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/2JVVG16XJQ.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/5EGL82NRJL.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4JQY9PQY7P.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/K74WXYNZE1.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LJ1YN65DEG.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GJWG4W5872.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4EZL25N973.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/Y76WV98D7V.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/G75MDN9874.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/9J29852VER.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/DEY46KYQJM.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/VJNYZRP278.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/YE9PZM3DJ3.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/GE8D1LM5ED.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/LELMQL337R.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/4JMY1MDMJW.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/PJR9LV4L79.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/PEXQWZZ6JX.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/3EK9V88GED.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/L73WM22575.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/87DK6ZZYJG.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/VJPKYDD2E8.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/2EVVG11XEQ.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/57GL822REL.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/4EQY9PPYJP.jpg)

付録：講座で使うプロンプト集
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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/KJ4WXYYZ71.jpg)

付録：確認クイズ（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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/LE1YN66D7G.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/GEWG4WW8J2.jpg)

講師用：レクチャー一覧（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