Playwright testing
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.From its SKILL.md
npx -y skills add arozumenko/wikis --skill playwright-testingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.1 KB, as published. Nobody here has run it
Playwright Testing
Browser-based UI and E2E testing using Playwright MCP tools.
Core Workflow
browser_navigate → browser_snapshot → interact → browser_wait_for →
browser_snapshot → evidence collection
Always snapshot before interacting — you need element refs to click/type.
Quick Reference
Navigate & Inspect
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
Interact
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
Wait & Verify
browser_wait_for(selector, timeout) → wait for element
browser_wait_for(url_pattern) → wait for navigation
Testing Patterns
1. Verify Page Loads
navigate → snapshot → verify key elements exist → screenshot
2. Form Submission
navigate → snapshot → fill_form → click submit →
wait_for(networkidle) → snapshot → verify success state → screenshot
3. Interactive Feature
navigate → snapshot → click element → wait_for change →
snapshot → verify new state → console_messages → screenshot
4. API + UI Verification
curl API to create data → navigate to page → snapshot →
verify data appears in UI → screenshot
Evidence Collection
After every significant interaction, collect:
- Screenshot — visual proof
- Console messages — catch JS errors the UI hides
- Network requests — verify API calls succeeded
Check console even when the UI looks fine. Silent errors are the worst bugs.
Wait Strategies
| 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.
Bug Report Format
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
Details
See references/patterns.md for Page Object Model, fixture strategies, and framework-specific selectors.