Agent Skills
› NeverSight/learn-skills.dev
› mcp-playwright
mcp-playwright
GitHub利用 Playwright MCP 服务器进行浏览器自动化，用于 Angular UI 的调试、验证、截图及控制台日志收集。适用于超越单元测试的 UI 行为检查，支持烟雾测试、回归捕获和可访问性抽查。
Trigger Scenarios
需要验证 Angular UI 组件或页面行为时
调试前端问题时需获取浏览器控制台日志或截图证据
执行端到端回归测试以捕获视觉差异
检查关键控件的可访问性和键盘焦点顺序
Install
npx skills add NeverSight/learn-skills.dev --skill mcp-playwright -g -y
SKILL.md
Frontmatter
{
"name": "mcp-playwright",
"description": "Use the Playwright MCP server (@playwright\/mcp) for browser-driven verification, screenshots, console logs, and UI flow validation; use when debugging or validating Angular UI behavior beyond unit tests."
}
MCP Skill: Playwright MCP (UI Verification)
Scope
Use the MCP server configured as microsoft/playwright-mcp in .vscode/mcp.json to run browser automation tasks (navigation, screenshots, DOM checks) during debugging and validation.
Preconditions
- Ensure
.vscode/mcp.jsoncontainsmicrosoft/playwright-mcp. - Ensure the app is running (typically
pnpm run start) if you are testing locally.
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.
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.
Prompt Templates
- "Open
and verify <expected UI>. Collect console errors and take a full-page screenshot." - "Run a quick flow:
. Use role-based selectors and fail fast with screenshots on error."
Related Repo Guidance
- See
.github/skills/e2e-playwrightfor test organization and selector rules.
Version History
- e0220ca Current 2026-07-05 21:26
