Agent skill
browser
Opens browser at URL for E2E testing via playwright-cli. Provides CLI commands for navigation, screenshots, and interaction. Triggers on keywords: browser, open browser, playwright browser, e2e browser
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/browser-waterplanai-agentic-config
SKILL.md
Browser Command
Open browser for E2E testing using playwright-cli.
Target URL: $ARGUMENTS
If no URL provided, default to: http://localhost:${DEFAULT_PORT:-5173}/
Pre-Flight Checks
- Verify playwright-cli Installed
- Run:
playwright-cli --help - If not available: STOP with error "playwright-cli not installed. Run: npm install -g @playwright/cli@latest && playwright-cli install-browser"
- Run:
Execution
-
Navigate to URL
bashplaywright-cli open "${URL:-http://localhost:${DEFAULT_PORT:-5173}/}" -
Verify Page Load
bashplaywright-cli snapshotReport page title and URL from snapshot output.
-
Report Status
- Confirm browser is open and ready
- Display current page title
- Display current URL
Available CLI Commands
After opening browser, these commands are available via Bash:
playwright-cli goto <url>- Navigate to URLplaywright-cli snapshot- Capture accessibility snapshotplaywright-cli click "<selector>"- Click elementplaywright-cli fill "<selector>" "<text>"- Fill input fieldplaywright-cli type "<text>"- Type textplaywright-cli screenshot- Take PNG screenshotplaywright-cli close- Close browser sessionplaywright-cli video-start/video-stop- Record video
Notes
- Video recording is explicit: use
playwright-cli video-startbefore the flow andvideo-stopafter - Configure output via
playwright-cli.jsonin project root - Use
--headedflag for visible browser window:playwright-cli --headed open <url> - Port can be configured via DEFAULT_PORT environment variable
- Sessions persist across commands: use
playwright-cli -s=<name>for named sessions
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?