ReddRadar
Agent skill
Playwright
Use MCP Playwright for automated browser testing and web automation.
Install this agent skill to your Project
npx add-skill https://github.com/hivellm/rulebook/tree/main/templates/skills/modules/playwright
SKILL.md
Playwright MCP Instructions
CRITICAL: Use MCP Playwright for automated browser testing and web automation.
Core Operations
Navigation & Screenshots
await playwright.navigate({ url: "https://example.com" });
await playwright.takeScreenshot({ fullPage: true, filename: "page.png" });
Interaction
// Click
await playwright.click({ element: "Submit Button", ref: "button[type='submit']" });
// Type
await playwright.type({ element: "Search", ref: "#search", text: "query" });
// Fill form
await playwright.fillForm({
fields: [
{ name: "Email", type: "textbox", ref: "#email", value: "user@example.com" },
{ name: "Password", type: "textbox", ref: "#password", value: "secret" }
]
});
DOM & Monitoring
// Get accessibility tree
const snapshot = await playwright.snapshot();
// Console errors
const errors = await playwright.getConsoleMessages({ onlyErrors: true });
// Network requests
const requests = await playwright.getNetworkRequests();
Common Patterns
Login Flow
1. navigate to login page
2. fillForm with credentials
3. click submit button
4. waitFor dashboard text
5. verify success via snapshot
Error Detection
const errors = await playwright.getConsoleMessages({ onlyErrors: true });
if (errors.length > 0) {
await playwright.takeScreenshot({ filename: "error-state.png" });
}
Best Practices
✅ DO:
- Wait for specific conditions (not time delays)
- Use descriptive element names
- Handle dialogs (
handleDialog) - Check console errors after actions
- Take screenshots at critical points
❌ DON'T:
- Use hard-coded delays
- Use generic element selectors
- Ignore console errors
- Use relative file paths (uploads)
Configuration
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-playwright"]
}
}
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
hivellm/rulebook
DAG Workflow
Maintain a clean dependency graph (DAG) to prevent circular dependencies and ensure maintainable architecture.
hivellm/rulebook
Documentation Rules
All documentation in English. Root README concise, detailed docs in `/docs`.
hivellm/rulebook
Quality Enforcement
These rules are NON-NEGOTIABLE and MUST be followed without exception.
hivellm/rulebook
Rulebook Task Management
Spec-driven task management for features and breaking changes with OpenSpec-compatible format
hivellm/rulebook
Agent Automation
Mandatory workflow that AI agents MUST execute after EVERY implementation.
hivellm/rulebook
C
Execute these commands after EVERY implementation (see AGENT_AUTOMATION module for full workflow).
Didn't find tool you were looking for?