playwright
Browser automation for testing, screenshots, and web interaction. Use when navigating pages, clicking elements, filling forms, taking screenshots, or automating browser tasks.
When & Why to Use This Skill
This Claude skill leverages the Playwright framework to provide comprehensive browser automation capabilities, including seamless navigation, UI interaction, and visual verification. It solves the complexity of interacting with dynamic, JavaScript-heavy websites by allowing the AI to programmatically click, type, and extract data from the accessibility tree, making it an essential tool for automated testing and web-based workflows.
Use Cases
- Automated Testing and QA: Execute end-to-end testing suites to verify web application functionality, UI responsiveness, and cross-browser compatibility.
- Web Interaction and Form Filling: Automate repetitive tasks such as logging into portals, submitting multi-step forms, and navigating complex web interfaces.
- Visual Regression and Monitoring: Capture full-page or element-specific screenshots to monitor UI changes, document bugs, or archive web content.
- Dynamic Data Extraction: Access and retrieve information from modern web applications that require user interaction or JavaScript execution to display content.
| name | playwright |
|---|---|
| description | Browser automation for testing, screenshots, and web interaction. Use when navigating pages, clicking elements, filling forms, taking screenshots, or automating browser tasks. |
| version | '1' |
Playwright
Tools
| Category | Tools |
|---|---|
| Navigate | browser_navigate, browser_navigate_back, browser_tabs, browser_close |
| Observe | browser_snapshot (accessibility tree), browser_take_screenshot (visual) |
| Interact | browser_click, browser_hover, browser_type, browser_fill_form, browser_select_option, browser_press_key, browser_drag, browser_file_upload |
| Control | browser_resize, browser_wait_for, browser_handle_dialog |
| Debug | browser_evaluate (run JS), browser_run_code, browser_console_messages, browser_network_requests |
| Setup | browser_install (if browser missing) |
All tools prefixed with mcp__playwright__.
Workflows
Interact: browser_navigate → browser_snapshot (get ref values) → use ref in browser_click/browser_type
Screenshot: browser_navigate → browser_take_screenshot (opts: element, fullPage)
Forms: browser_navigate → browser_snapshot → browser_fill_form with field refs
Key Concepts
- Snapshot: Accessibility tree—use for actions/element discovery; returns
refvalues - Screenshot: Visual only—use for verification
- Element refs: Always get via
browser_snapshot; pass to interaction tools withelementdescription
Tips
- Always
browser_snapshotbefore interacting browser_wait_forfor dynamic contentbrowser_evaluateruns JS in page context- Form field types: textbox, checkbox, radio, combobox, slider