diff --git a/.opencode/skill/playwright-example/SKILL.md b/.opencode/skill/playwright-example/SKILL.md new file mode 100644 index 0000000..6ef0a32 --- /dev/null +++ b/.opencode/skill/playwright-example/SKILL.md @@ -0,0 +1,54 @@ +--- +name: playwright-example +description: Browser automation skill for web testing, scraping, and interaction. Use for end-to-end testing, screenshots, and browser automation tasks. +argument-hint: describe what you want to do (e.g., "take a screenshot of homepage", "test login flow", "fill out a form") +mcp: + playwright: + command: ["npx", "-y", "@playwright/mcp@latest"] +--- + +# Playwright Browser Automation + +This skill provides browser automation capabilities via the Playwright MCP server. + +## Available Operations + +The Playwright MCP provides tools for: + +- **Navigation**: Navigate to URLs, go back/forward, reload pages +- **Screenshots**: Capture full page or element screenshots +- **Interactions**: Click, type, select, hover, and other user interactions +- **Forms**: Fill out forms, submit data, handle file uploads +- **Assertions**: Wait for elements, check visibility, verify content +- **Scraping**: Extract text, attributes, and data from pages + +## Usage Guidelines + +1. **End-to-End Testing**: + - Automate user flows and verify functionality + - Test authentication flows + - Validate form submissions + +2. **Screenshots & Visual Testing**: + - Capture screenshots for documentation + - Compare visual states before/after changes + - Debug UI issues + +3. **Web Scraping**: + - Extract data from web pages + - Navigate through paginated content + - Handle dynamic content loading + +4. **Form Automation**: + - Fill and submit forms + - Handle multi-step wizards + - Test validation behavior + +## Example Tasks + +- "Navigate to the login page and take a screenshot" +- "Fill out the registration form with test data" +- "Click the submit button and wait for the success message" +- "Extract all product names from the catalog page" +- "Test the checkout flow from cart to confirmation" +- "Take a screenshot of the dashboard after logging in" diff --git a/README.md b/README.md index bfcf5c1..581e69c 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,22 @@ Or install it locally: } ``` +## Quick Start + +This repo includes a working example skill. After installing the plugin, try: + +``` +skill(name="playwright-example") +``` + +Then use the embedded MCP: + +``` +skill_mcp(mcp_name="playwright", tool_name="browser_navigate", arguments='{"url": "https://example.com"}') +``` + +See [`.opencode/skill/playwright-example/SKILL.md`](.opencode/skill/playwright-example/SKILL.md) for the full example. + ## Usage ### 1. Create a Skill with Embedded MCP @@ -136,6 +152,38 @@ interface McpServerConfig { } ``` +## Example Skill + +Here's a complete example of a skill with an embedded MCP server (from [`.opencode/skill/playwright-example/SKILL.md`](.opencode/skill/playwright-example/SKILL.md)): + +```markdown +--- +name: playwright-example +description: Browser automation skill for web testing, scraping, and interaction. Use for end-to-end testing, screenshots, and browser automation tasks. +argument-hint: describe what you want to do (e.g., "take a screenshot of homepage", "test login flow", "fill out a form") +mcp: + playwright: + command: ["npx", "-y", "@playwright/mcp@latest"] +--- + +# Playwright Browser Automation + +This skill provides browser automation capabilities via the Playwright MCP server. + +## Available Operations + +- **Navigation**: Navigate to URLs, go back/forward, reload pages +- **Screenshots**: Capture full page or element screenshots +- **Interactions**: Click, type, select, hover, and other user interactions +- **Forms**: Fill out forms, submit data, handle file uploads + +## Example Tasks + +- "Navigate to the login page and take a screenshot" +- "Fill out the registration form with test data" +- "Extract all product names from the catalog page" +``` + ## License MIT