mcp-browser

Automate browser navigation, element interaction, and accessibility snapshotting for web testing.

1|Updated Sep 12, 2025

Search Tags:#accessibility #web-testing #browser-automation #form-filling #console-logs #ui-interaction #element-ref

Ready to run

npx skills add https://github.com/JimmyTranDev/dotfiles --skill mcp-browser

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mcp-browser
Source: https://github.com/JimmyTranDev/dotfiles/tree/main/src/opencode/skills/mcp-browser
Command: npx skills add https://github.com/JimmyTranDev/dotfiles --skill mcp-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web applications often require repetitive browser interactions for testing and accessibility verification. This Skill provides a structured approach to navigate web pages, snapshot accessibility trees, interact with elements, fill forms, simulate keyboard input, and inspect console logs to diagnose issues quickly.

Core Features & Use Cases

Navigate to URLs and traverse pages using a defined sequence of actions.
Capture accessibility snapshots to identify element roles, names, and refs for reliable interactions.
Interact with elements by clicking, typing, hovering, and selecting options; inspect results via snapshots and logs.
Use for automated UI testing, accessibility audits, debugging form workflows, and reproducing user scenarios across web apps.

Quick Start

Navigate to a target URL, snapshot the accessibility tree, then interact with elements using refs to complete your task.

Frequently Asked Questions about mcp-browser

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate web navigation and capture accessibility snapshots for UI testing?▼

Automate web navigation by directing the browser to a target URL, capturing an accessibility snapshot to identify element roles and refs, and then executing explicit interaction sequences like clicking or typing. This enforces deterministic workflows for reliable UI testing and debugging.

What is an accessibility snapshot and how does it help with browser automation?▼

An accessibility snapshot captures the accessibility tree of a web page, exposing element roles, names, and refs. It maps UI elements for reliable targeting during browser automation, ensuring that clicks, typing, and form interactions hit the correct elements.

How do I fill forms and simulate keyboard input during web testing?▼

Fill forms and simulate keyboard input by capturing an accessibility snapshot first, then using the extracted element refs to target input fields. You execute explicit action sequences to type text, select options, and simulate keyboard events for deterministic form workflows.

Can I inspect console logs to debug issues during automated browser interactions?▼

Yes, you can inspect console logs to debug issues during automated browser interactions. The Skill captures console and log output alongside accessibility snapshots and UI interactions, allowing you to diagnose problems quickly while executing action sequences.

Do I need to take an accessibility snapshot before interacting with elements on a web page?▼

Yes, taking an accessibility snapshot before interacting with elements is required. The Skill enforces deterministic workflows by requiring snapshots before interactions, ensuring you have explicit element refs for accurate targeting during clicking, typing, and hovering actions.

What are the limitations of using accessibility snapshots for web testing?▼

Accessibility snapshots require explicit element refs for targeting and enforce strict sequential workflows, meaning you cannot interact with elements before capturing a snapshot. This structured approach ensures deterministic web testing but requires navigating pages step by step.