browser-element-inspection

Inspect DOM element attributes, live state, and ARIA roles in an embedded browser.

38|6|Updated Aug 14, 2026
One-click install
npx skills add https://github.com/7757/Fan-Browser-Agent --skill browser-element-inspection-7757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-element-inspection
Source: https://github.com/7757/Fan-Browser-Agent/tree/main/skills/browser/browser-element-inspection
Command: npx skills add https://github.com/7757/Fan-Browser-Agent --skill browser-element-inspection-7757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Guessing an element's state from rendered text leads to wrong-target clicks and false success conclusions. This Skill reads the real DOM and accessibility state of page elements — attribute values, checked/disabled status, ARIA roles — without modifying the page. ## Core Features & Use Cases - Indexed Element Inspection: Use browser_element with info, attribute, or evaluate operations to read any property of an indexed element, such as this.checked or this.value. - CSS-Based DOM Queries: Use browser_find_elements to locate elements by selector and return their attributes, even for hidden or non-interactive nodes. - Page-Wide Computation: Run browser_evaluate or browser_evaluate_js to compute values across the DOM, and enrich observations with includeAccessibility for ARIA roles and backend-node detail. - Use Case: Before submitting a form, verify that a checkbox is actually checked, read the href of a download link, and confirm a button's ARIA role — all without clicking anything. ## Quick Start Inspect the element at index 5 and tell me its href attribute and whether it is currently disabled.

Frequently Asked Questions about browser-element-inspection

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

FAQPage Schema
How do I read an element's attributes in a browser automation agent?▼

Use browser_element with operation="attribute" and the attribute name to read one attribute of an indexed element, or browser_find_elements with a CSS selector and an attributes list to read attributes from multiple elements at once.

How to check if a checkbox is checked or a button is disabled in the DOM?▼

Call browser_element with operation="evaluate" and an arrow function like () => this.checked or () => this.disabled. This reads the live DOM state directly instead of inferring it from rendered text, which can be misleading.

What is the difference between browser_evaluate and browser_evaluate_js?▼

browser_evaluate runs a single arrow function with optional args and returns its value, suiting one-liner computations. browser_evaluate_js runs arbitrary browser JavaScript or an IIFE for richer extraction, with max_chars to cap large outputs.

Can browser_evaluate read cross-origin iframes or closed shadow roots?▼

No. Both evaluate tools are bound by the same-origin policy, so they cannot read cross-origin iframes or closed shadow roots. Those reads return nothing or throw; use iframe and shadow DOM specific handling instead.

How do I get an element's ARIA role and accessible name?▼

Run browser_observe with includeAccessibility=true to add the CDP Accessibility tree with roles and accessible names. For a single element, use browser_element evaluate with () => this.getAttribute('role') to read its explicit role attribute.

Why does browser_element fail after the page changes?▼

browser_element uses the index from the latest observation, so a stale index points to the wrong element or nothing after page updates. Re-observe the page to get fresh indices before inspecting elements again.