tomevault-io Playwright Chrome Browser
This skill enables browser automation capabilities through the Playwright MCP server for Claude Code.
Prerequisites
Crewly auto-configures the Playwright MCP server when browser automation is enabled in Settings (enableBrowserAutomation: true). The .mcp.json file is generated automatically during agent startup.
For manual installation:
npx @playwright/mcp@latest
Capabilities
When this skill is enabled, agents can:
- Navigate to web pages
- Take screenshots of pages or specific elements
- Fill out forms and input fields
- Click buttons and links
- Extract text content from pages
- Wait for elements to appear
- Handle multiple browser tabs
- Execute in headless mode (no visible browser window)
Usage
The browser automation tools are available through MCP (Model Context Protocol) when the Playwright MCP server is configured in Claude Code.
Available Tools
mcp__playwright__browser_navigate- Navigate to a URLmcp__playwright__browser_screenshot- Take a screenshotmcp__playwright__browser_click- Click on an elementmcp__playwright__browser_fill- Fill an input fieldmcp__playwright__browser_select- Select from dropdownmcp__playwright__browser_hover- Hover over an elementmcp__playwright__browser_evaluate- Execute JavaScript on the pagemcp__playwright__browser_console_messages- Get console messagesmcp__playwright__browser_network_requests- Monitor network activitymcp__playwright__browser_tab_list- List open tabsmcp__playwright__browser_tab_new- Open a new tabmcp__playwright__browser_tab_select- Switch between tabsmcp__playwright__browser_tab_close- Close a tabmcp__playwright__browser_close- Close the browser
Comparison with Chrome Browser Skill
| Feature | Playwright MCP | Chrome Extension |
|---|---|---|
| Installation | MCP server install | Chrome extension |
| Browser visibility | Headless (invisible) | Visible browser |
| Speed | Faster (no rendering) | Real browser speed |
| Reliability | Very stable | Depends on extension |
| Use case | Testing, scraping | Interactive automation |
Best Practices
- Always take screenshots after navigation to verify page state
- Use specific selectors - prefer IDs and data-testid attributes
- Wait for elements before interacting with them
- Handle errors gracefully - pages may load slowly or fail
- Close browser when done to free resources
Example Workflow
1. Navigate to the target URL
2. Wait for page to load
3. Take a screenshot to verify state
4. Interact with elements (click, fill, select)
5. Take another screenshot to verify result
6. Extract needed data
7. Close the browser
Troubleshooting
MCP Server Not Found
If you get an error about the MCP server not being available:
- Verify
enableBrowserAutomationistruein Crewly Settings - Check that
.mcp.jsonexists in the project root with aplaywrightentry - Restart the agent session to regenerate MCP config
- Manual fallback:
npx @playwright/mcp@latest
Element Not Found
- Ensure the page has fully loaded before interacting
- Verify the selector is correct using browser dev tools
- Try alternative selectors (text content, aria labels)
Screenshot Failures
- Ensure the browser has navigated to a page first
- Check that the element exists if taking element screenshot
- Verify sufficient disk space for screenshot storage
Source: stevehuang0115/crewly — distributed by TomeVault.