菜单
UI/E2E test automation with Playwright MCP. Use when the user asks to "test the UI", "automate browser tests", "check the page", "take a screenshot", "run Playwright", "write E2E tests", or anything about browser-based testing.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Testing-grade browser automation via Chrome DevTools Protocol (CDP). Direct access to the browser's DOM, JS runtime, network layer, cookies, computed styles, and console — without any external dependencies. Complements MCP-based tools by enabling arbitrary JS evaluation in page context and deep inspection that screenshot-only tools miss. Use when you need to: run JS in the page, inspect cookies/localStorage, check computed styles, enumerate third-party scripts, emulate devices, analyze network timing, or interact via real mouse and keyboard events.
End-to-end bugfix workflow. Test first, plan, fix, verify. Use when the user says "fix bug", "bugfix", "investigate issue", "fix
Review code for correctness, security, performance, and maintainability. Use when the user asks to "review this code", "check my changes", "review PR", "audit", or "what do you think of this approach".
Gather cross-channel context (local KB, email, Teams chats, optional web) about a person and topic before responding. Use when the user says "what do we know about X", "find prior discussions with Y", "context on this thread", or before drafting any reply where prior history matters.
Disk-first, checkpointed research workflow with three modes — trend research, topic analysis, and fact-checking. Use when the user asks to "research trends", "analyze a topic", "fact-check this", "verify claims", "what's the state of X", or hands you a document to vet.
Git operations, branching, commits, PRs, and release workflows. Use when the user asks to "commit", "create PR", "branch", "merge", "rebase", "cherry-pick", "tag", or manage git history.
| name | playwright-testing |
| description | UI/E2E test automation with Playwright MCP. Use when the user asks to "test the UI", "automate browser tests", "check the page", "take a screenshot", "run Playwright", "write E2E tests", or anything about browser-based testing. |
| license | Apache-2.0 |
| compatibility | Requires Node.js 18+. MCP server installed via setup.yaml. |
| metadata | {"author":"octobots","version":"0.1.0"} |
Browser-based UI and E2E testing using Playwright MCP tools.
browser_navigate → browser_snapshot → interact → browser_wait_for →
browser_snapshot → evidence collection
Always snapshot before interacting — you need element refs to click/type.
browser_navigate(url) → load page
browser_snapshot() → get DOM tree + element refs
browser_take_screenshot() → visual evidence
browser_console_messages() → JS errors, warnings
browser_network_requests() → API calls, status codes
browser_click(element="ref") → click element
browser_type(element="ref", text) → type into input
browser_fill_form(values) → fill multiple fields
browser_select_option(element, value)→ select dropdown option
browser_press_key(key) → keyboard action
browser_hover(element="ref") → hover for tooltips
browser_wait_for(selector, timeout) → wait for element
browser_wait_for(url_pattern) → wait for navigation
navigate → snapshot → verify key elements exist → screenshot
navigate → snapshot → fill_form → click submit →
wait_for(networkidle) → snapshot → verify success state → screenshot
navigate → snapshot → click element → wait_for change →
snapshot → verify new state → console_messages → screenshot
curl API to create data → navigate to page → snapshot →
verify data appears in UI → screenshot
After every significant interaction, collect:
Check console even when the UI looks fine. Silent errors are the worst bugs.
| Situation | Strategy |
|---|---|
| Page load | wait_for(networkidle) |
| Dynamic content | wait_for(selector) |
| Navigation | wait_for(url_pattern) |
| Animation | wait_for(timeout: 1000) — last resort |
Never use fixed waits when a condition-based wait works.
When you find an issue:
## [SEVERITY] Title
Steps: 1. Navigate to... 2. Click... 3. Observe...
Expected: What should happen
Actual: What happens
Evidence: screenshot, console error, network response
Frequency: Always / Intermittent / Once
See references/patterns.md for Page Object Model, fixture strategies, and framework-specific selectors.