mcp-playwright

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

MCP Skill: Playwright MCP (UI Verification)

MCP技能：Playwright MCP（UI验证）

Scope

适用范围

Use the MCP server configured as

microsoft/playwright-mcp

.vscode/mcp.json

to run browser automation tasks (navigation, screenshots, DOM checks) during debugging and validation.

使用在

.vscode/mcp.json

中配置为

microsoft/playwright-mcp

的MCP服务器，在调试和验证阶段运行浏览器自动化任务（导航、截图、DOM检查）。

Preconditions

前置条件

Ensure

.vscode/mcp.json

contains

microsoft/playwright-mcp

Ensure the app is running (typically
```
pnpm run start
```
) if you are testing locally.

确保

.vscode/mcp.json

文件中包含

microsoft/playwright-mcp

配置。

如果进行本地测试，请确保应用处于运行状态（通常执行
```
pnpm run start
```
）。

Operating Rules

操作规则

Prefer resilient selectors:
```
data-testid
```
, ARIA roles/labels.
Avoid brittle CSS selectors and deep DOM coupling.
Capture evidence for regressions: screenshots + console errors.

优先使用可靠的选择器：
```
data-testid
```
、ARIA角色/标签。
避免使用脆弱的CSS选择器和深度DOM耦合。
为回归问题留存证据：截图 + 控制台错误信息。

Typical Workflows

典型工作流程

Smoke check a route

Navigate to a URL and assert primary heading/landmark is visible.

Regression capture

Take before/after screenshots for a single screen change.

Console hygiene

Collect browser console errors/warnings for a page.

Accessibility spot-check

Verify keyboard focus order for critical controls.

路由冒烟测试

导航至指定URL，断言主标题/地标元素可见。

回归捕获

针对单个界面变更，截取变更前后的截图。

控制台整洁性检查

收集页面的浏览器控制台错误/警告信息。

可访问性抽查

验证关键控件的键盘焦点顺序。

Prompt Templates

提示模板

"Open <url> and verify <expected UI>. Collect console errors and take a full-page screenshot."
"Run a quick flow: <steps>. Use role-based selectors and fail fast with screenshots on error."

"打开<url>并验证<预期UI>。收集控制台错误并截取全页截图。"
"运行快速流程：<步骤>。使用基于角色的选择器，出错时立即终止并截取截图。"