diff --git a/.claude/skills/playwright-cli/SKILL.md b/.claude/skills/playwright-cli/SKILL.md new file mode 100644 index 0000000..6c2b6cb --- /dev/null +++ b/.claude/skills/playwright-cli/SKILL.md @@ -0,0 +1,230 @@ +--- +name: playwright-cli +description: Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages. +allowed-tools: Bash(playwright-cli:*) +--- + +# Browser Automation with playwright-cli + +## Quick start + +```bash +# Open a browser through the proxy (proxy must be running) +mise run browser -- https://example.is + +# Open a browser without the proxy (for comparison) +mise run browser-no-proxy -- https://example.is + +# Interact with the proxy session +playwright-cli -s=proxy snapshot +playwright-cli -s=proxy screenshot --filename=tmp/with-proxy.png + +# Interact with the no-proxy session +playwright-cli -s=no-proxy snapshot +playwright-cli -s=no-proxy screenshot --filename=tmp/without-proxy.png +``` + +## Proxy testing workflow + +### Prerequisites + +The proxy must be running with a blocklist: + +```bash +mise run dev -- --blocklist examples/is.rules +``` + +### 1. Open browser sessions + +```bash +# Through the proxy (uses playwright-cli-proxy.json config for proxy + ignoreHTTPSErrors) +mise run browser -- https://example.is + +# Without the proxy (for comparison) +mise run browser-no-proxy -- https://example.is +``` + +### 2. Find rules for the target domain + +```bash +# Element hiding rules (##) +grep "example.is##" examples/is.rules + +# URL blocking rules (||) +grep "||.*example" examples/is.rules + +# Global element hiding rules +grep "^##" examples/is.rules +``` + +### 3. Verify element replacement + +Matched elements are replaced with `` comments in the DOM: + +```bash +playwright-cli -s=proxy eval "() => { + const html = document.documentElement.innerHTML; + const matches = html.match(//g); + return { found: (matches || []).length, replacements: matches || [] }; +}" +``` + +### 4. Verify CSS fallback injection + +Complex selectors fall back to CSS `display: none` injection. Check for injected `