browser-max-automation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser Max Automation

浏览器最大化自动化

Browser automation via Playwright MCP.

通过Playwright MCP实现浏览器自动化。

When to Use

适用场景

Browser automation, Playwright, web testing, screenshot
Automating browser-based workflows or QA checks
Verifying UI states, DOM changes, or visual regressions
Filling forms, clicking elements, or capturing screenshots

浏览器自动化、Playwright、Web测试、截图
自动化基于浏览器的工作流或QA检查
验证UI状态、DOM变化或视觉回归
表单填写、元素点击或截图捕获

セットアップ（初回確認）

设置（首次确认）

このスキルを使う前に、以下を確認してください：

使用本技能前，请确认以下内容：

1. ブラウザの選択

1. 浏览器选择

どのブラウザを使いますか？

選択肢	説明
Edge	Windows標準、企業環境向け
Chrome	汎用、拡張機能が豊富

你要使用哪种浏览器？

选项	说明
Edge	Windows系统自带，适合企业环境
Chrome	通用型，扩展功能丰富

2. 接続モードの選択

2. 连接模式选择

モード	説明	メリット	デメリット
新規ブラウザ	Playwrightが新しいブラウザを起動	設定が簡単、安定	別ウィンドウが開く
既存ブラウザ (CDP)	今開いているブラウザを操作	普段のブラウザをそのまま使える	事前にデバッグモード起動が必要

模式	说明	优点	缺点
新浏览器	Playwright启动新的浏览器	设置简单、稳定	会打开新窗口
现有浏览器（CDP）	操作当前已打开的浏览器	可直接使用日常所用的浏览器	需要提前启动调试模式

設定A: 新規ブラウザモード（推奨）

设置A：新浏览器模式（推荐）

mcp.json

に以下を設定：

json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--browser", "msedge"],
      "type": "stdio"
    }
  }
}

--browser
の値:
msedge
(Edge) /
chrome
(Chrome) /
firefox
(Firefox)

在

mcp.json

中添加以下配置：

json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--browser", "msedge"],
      "type": "stdio"
    }
  }
}

--browser
的取值：
msedge
（Edge）/
chrome
（Chrome）/
firefox
（Firefox）

設定B: 既存ブラウザモード (CDP接続)

设置B：现有浏览器模式（CDP连接）

Step 1: ブラウザをデバッグモードで起動

步骤1：以调试模式启动浏览器

すべての対象ブラウザを閉じてから実行：

powershell

undefined

请关闭所有目标浏览器后执行：

powershell

undefined

Edge の場合

Edge 浏览器

Start-Process "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -ArgumentList "--remote-debugging-port=9222"

Chrome の場合

Chrome 浏览器

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" -ArgumentList "--remote-debugging-port=9222"

undefined

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" -ArgumentList "--remote-debugging-port=9222"

undefined

Step 2: mcp.json を設定

步骤2：配置mcp.json

json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"],
      "type": "stdio"
    }
  }
}

json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"],
      "type": "stdio"
    }
  }
}

Step 3: VS Codeをリロード

步骤3：重新加载VS Code

Ctrl+Shift+P

→

Developer: Reload Window

Ctrl+Shift+P

→

Developer: Reload Window

💡 Tips

💡 小贴士

ショートカット作成を推奨:
```
msedge.exe --remote-debugging-port=9222
```
CDPポート確認:
```
http://localhost:9222/json/version
```

建议创建快捷方式：
```
msedge.exe --remote-debugging-port=9222
```
确认CDP端口：
```
http://localhost:9222/json/version
```

Quick Reference

快速参考

Command	Purpose
`browser_navigate`	Open URL
`browser_snapshot`	Get element refs (accessibility tree)
`browser_click`	Click element by ref
`browser_type`	Input text
`browser_take_screenshot`	Capture screen
`browser_wait_for`	Wait for text/time
`browser_run_code`	Execute JavaScript

命令	用途
`browser_navigate`	打开URL
`browser_snapshot`	获取元素引用（无障碍树）
`browser_click`	通过引用点击元素
`browser_type`	输入文本
`browser_take_screenshot`	捕获屏幕
`browser_wait_for`	等待文本/时间
`browser_run_code`	执行JavaScript

Basic Workflow

基础工作流

1. browser_navigate(url)
2. browser_snapshot → get ref
3. browser_click/type(ref)
4. browser_snapshot → verify

1. browser_navigate(url)
2. browser_snapshot → 获取引用
3. browser_click/type(ref)
4. browser_snapshot → 验证

Advanced

进阶用法

iframe Operations

iframe操作

javascript

async (page) => {
  const frame1 = page.locator('iframe[name="Content"]').contentFrame();
  const frame2 = frame1.locator('iframe[title="Player"]').contentFrame();
  await frame2.getByRole("radio", { name: "Option A" }).click({ force: true });
  return "Selected";
};

javascript

async (page) => {
  const frame1 = page.locator('iframe[name="Content"]').contentFrame();
  const frame2 = frame1.locator('iframe[title="Player"]').contentFrame();
  await frame2.getByRole("radio", { name: "Option A" }).click({ force: true });
  return "Selected";
};

force: true

Use when element is covered by another (e.g., SVG overlay):

javascript

await element.click({ force: true });

当元素被其他内容覆盖时使用（例如SVG遮罩）：

javascript

await element.click({ force: true });

When browser_run_code is disabled

当browser_run_code被禁用时

Use snapshot + click instead:

browser_snapshot → get ref → browser_click(ref)

使用快照+点击替代：

browser_snapshot → 获取引用 → browser_click(ref)

Done Criteria

完成标准

MCP server configured in
```
mcp.json
```
Browser navigation successful
Target action (click/type/screenshot) completed

在
```
mcp.json
```
中配置好MCP服务器
浏览器导航成功
完成目标操作（点击/输入/截图）

Reference

参考

Type	Use Case	Selection
`radio`	Single choice	One only
`checkbox`	Multiple choice	0 to many

类型	使用场景	选择规则
`radio`	单选	仅选一个
`checkbox`	多选	可选0到多个