browser-automation_skill

Overview

This skill provides practical guidance for effective browser automation using the dev-browser plugin. It focuses on reliable patterns for navigation, DOM inspection, interactions, waiting, and verification so you can test local development, debug UI changes, and automate repetitive flows. The advice emphasizes structured snapshots, element refs, and explicit waits to reduce flakiness.

How this skill works

The skill describes how to drive a persistent browser session: navigate, capture DOM snapshots, identify element refs, perform interactions (click, type, fill), and verify outcomes. It recommends using structured snapshots over screenshots when possible, combining both for visual debugging, and using explicit wait patterns after actions that trigger loads. It also explains tools for debugging like console messages and network request inspection.

When to use it

• Testing localhost or staging during development
• Verifying UI changes after code updates
• Debugging visual regressions or broken user flows
• Automating repetitive browser tasks or small data extraction
• Validating agent-generated content or customer deployments in a browser

Best practices

• Use persistent page sessions for multi-step workflows to keep state across steps
• Prefer DOM snapshots and element refs from snapshots instead of brittle CSS selectors
• Always add explicit waits after navigation or actions that trigger loading
• Use browser_fill_form for multi-field inputs and browser_wait_for to verify success messages
• Capture final snapshot/screenshot and check console/network for errors before reporting results

Example use cases

• Test a login flow on localhost: navigate, snapshot, fill form, click submit, wait for dashboard, verify snapshot
• Verify a UI fix: navigate to the affected page, reproduce the flow, snapshot before/after, and confirm expected element changes
• Debug a broken checkout flow: record console messages and network requests, step through interactions, and capture evidence
• Automate a repeatable task like exporting a report: navigate, fill options, trigger export, and confirm success