
by Seren
No reviews yetAutomate web browsers using Playwright with stealth features for screenshots, web scraping, form filling, and browser interactions
+35.0%
Task Completion %
AI estimate
Automate web browsers to perform tasks like taking screenshots, filling forms, clicking elements, and extracting data from websites.
Activate this skill when the user asks to:
The Playwright MCP server provides these tools (auto-available when this skill is active):
playwright_navigate - Navigate to a URL
url (string) - The URL to navigate toplaywright_navigate_back - Go back in browser history
playwright_navigate_forward - Go forward in browser history
playwright_click - Click an element on the page
selector (string) - CSS selector for the elementplaywright_fill - Fill a form input field
selector (string), value (string)playwright_select - Select an option from a dropdown
selector (string), value (string)playwright_hover - Hover over an element
selector (string)playwright_press - Press a keyboard key
selector (string), key (string)playwright_screenshot - Capture a screenshot
name (string, optional) - Filename for screenshotplaywright_evaluate - Execute JavaScript in the browser
script (string) - JavaScript code to executeplaywright_extract_content - Extract text content from page
selector (string, optional) - Limit to specific elementWhen invoked, use the Playwright MCP tools to fulfill the user's browser automation request.
User: "Take a screenshot of example.com"
Steps:
1. Use playwright_navigate: { url: "https://example.com" }
2. Wait for page load (automatic)
3. Use playwright_screenshot: { name: "example-screenshot.png" }
4. Return screenshot to user
User: "Go to contact-form.com and fill out the contact form with my email"
Steps:
1. Use playwright_navigate: { url: "https://contact-form.com" }
2. Use playwright_fill: { selector: "#email", value: "user@email.com" }
3. Use playwright_fill: { selector: "#message", value: "Hello!" }
4. Use playwright_click: { selector: "button[type=submit]" }
5. Confirm submission success
User: "Extract all product prices from shop.com/products"
Steps:
1. Use playwright_navigate: { url: "https://shop.com/products" }
2. Use playwright_evaluate with script:
```javascript
Array.from(document.querySelectorAll('.product-price'))
.map(el => el.textContent.trim())
### Example: Multi-Step Workflow
User: "Search for 'playwright tutorial' on Google and screenshot the results"
Steps:
## CSS Selectors Guide
To interact with web elements, you need CSS selectors. Common patterns:
- **By ID**: `#element-id` → `<div id="element-id">`
- **By Class**: `.class-name` → `<div class="class-name">`
- **By Tag**: `button` → `<button>`
- **By Attribute**: `[name="email"]` → `<input name="email">`
- **By Text**: `text=Submit` → Element containing "Submit"
- **Nested**: `form button.submit` → Submit button inside a form
- **Nth Child**: `li:nth-child(2)` → Second list item
## Best Practices
### 1. Always Navigate First
Before interacting with elements, navigate to the page:
playwright_navigate → wait → interact with elements
### 2. Use Specific Selectors
Prefer unique selectors (IDs) over generic ones:
- ✅ Good: `#login-button`
- ❌ Bad: `button` (might match multiple buttons)
### 3. Handle Dynamic Content
For pages with JavaScript rendering:
1. Navigate to page
2. Execute JavaScript to check if content loaded
3. Then interact with elements
### 4. Screenshots for Debugging
If automation fails, take a screenshot to see current page state
### 5. Respect robots.txt and Terms of Service
- Only scrape public data
- Check website's robots.txt
- Avoid overwhelming servers with requests
- Respect rate limits
## Common Use Cases
### 1. Website Monitoring
Check if a website changed:
### 2. Data Collection
Gather information from multiple pages:
### 3. Automated Testing
Test user workflows:
### 4. Form Submission
Auto-fill repetitive forms:
### 5. Content Archiving
Archive web pages:
## Limitations
- **Same-origin only**: Cannot interact with cross-origin iframes
- **Authentication**: May require manual login for protected pages
- **CAPTCHAs**: Cannot solve CAPTCHAs (requires human interaction)
- **Dynamic sites**: Complex SPAs may need custom wait logic
- **Rate limiting**: Some sites may block automated access
## Troubleshooting
### Element Not Found
- Verify selector is correct (use browser DevTools)
- Check if page fully loaded
- Try more specific selector
- Screenshot page to see current state
### Navigation Failed
- Check URL is valid and accessible
- Verify network connection
- Try with different browser headers
### Script Execution Failed
- Verify JavaScript syntax
- Check browser console for errors
- Ensure script doesn't reference undefined variables
## Examples in Chat
Here are examples of what users can ask:
✅ **Simple Tasks:**
- "Screenshot the homepage of example.com"
- "What's the title of the page at mysite.com?"
- "Click the 'Sign Up' button on app.com"
✅ **Data Extraction:**
- "Get all the prices from this product page: [URL]"
- "Extract the main headline from news.com"
- "List all links on the page"
✅ **Workflows:**
- "Search for 'climate change' on Wikipedia and screenshot the article"
- "Go to form.com, fill in the contact form with my info, and submit"
- "Navigate to dashboard.app.com and click on the Settings tab"
✅ **Monitoring:**
- "Check if the price on this product page changed: [URL]"
- "Screenshot the current state of status.service.com"
- "Extract the latest blog post title from blog.com"
## Security & Privacy
- Playwright runs locally on your machine
- No browsing data is sent to external services
- Browser sessions are isolated (no cookies/storage persistence by default)
- Screenshots may contain sensitive information - review before sharing
- Automated form submissions should only be used on sites you own/control
## Learn More
- Playwright Documentation: https://playwright.dev
- Playwright MCP Server: https://github.com/microsoft/playwright-mcp
- CSS Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
---
**Ready to automate?** Tell me what website task you want to accomplish and I'll help you build the automation!
Free
npx skills add serenorg/seren-skillsSelect “Browser Automation” when prompted
Seren
Added March 1, 2026