Agent skill

Browser Automation Edge Cases

by aden-hive in aden-hive/hive

Step-by-step procedure for debugging browser automation failures on complex sites such as LinkedIn, Twitter/X, single-page apps and Shadow DOM pages.

MITAuto-check passedProductivity & Automation

Install Browser Automation Edge Cases

skills CLI
$ npx skills add aden-hive/hive --skill browser-edge-cases -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install aden-hive/hive browser-edge-cases --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/aden-hive/hive.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/browser-edge-cases .claude/skills/browser-edge-cases && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
browser-edge-cases
GitHub stars
11k
Token cost
~1.8k tokens
SKILL.md length
378 words
Files
12 (incl. scripts)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Step-by-step procedure for debugging browser automation failures on complex sites such as LinkedIn, Twitter/X, single-page apps and Shadow DOM pages.

  • Works in 4 steps: Reproduce & Isolate → Analyze Root Cause → Implement Multi-Layer Fix → …
  • Debugging a browser tool that scrolls, clicks or types with no effect on a site
  • SKILL.md covers When to Use This Skill, SOP: Debugging Browser Tool…, Pattern Library and Quick Reference, plus 1 more section
  • Runs Python scripts from its folder; reaches linkedin.com

What it does

This is a standard operating procedure for debugging browser automation failures on complex websites. It targets symptoms such as a scroll that reports success while the page does not move, a click that triggers nothing, typed text that disappears, a snapshot that hangs or returns stale content, and navigation that loads the wrong page. Sites named include LinkedIn, Twitter/X, single-page apps and pages with Shadow DOM.

The procedure runs in four phases: reproduce and isolate with a minimal test case, first on a simple site to confirm the tool works and then on the failing one; analyze the cause by checking the console, the HTML and the snapshot against a symptom table (nested scroll container, covered element, autocomplete or React input handling, huge DOM, SPA hydration); implement a fix with fallback methods and timeouts; and verify against both sites, recording the result in `registry.md`. A pattern library starts with nested scrollable containers, and bundled Python scripts cover cases such as Twitter scroll, modals, covered elements, Shadow DOM and autocomplete.

When your agent uses it

  • Debugging a browser tool that scrolls, clicks or types with no effect on a site
  • Fixing snapshots that hang or go stale on a huge or hydrating page
  • Handling Shadow DOM, contenteditable fields or autocomplete inputs

Example prompts

  • “browser_interact scroll succeeds on LinkedIn but the feed never moves. Find out why and add a fallback.”
  • “Typing into the compose box on X clears the text. Reproduce it on a simple site first.”
  • “The snapshot of this page hangs. Check for a huge DOM and add a timeout.”

Requirements

  • Python, to run the bundled test scripts
  • The browser tools these scripts call, such as browser_interact and browser_snapshot

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Reproduce & Isolate
  2. Analyze Root Cause
  3. Implement Multi-Layer Fix
  4. Verify Fix

What it can do on your machine

Read from SKILL.md and the folder at commit 6193aea. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 10 files in scripts/ (Python), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • linkedin.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Browser Automation Edge Cases loads about 1.8k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 378 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from aden-hive/hive at commit 6193aea, republished under its MIT licence (© aden-hive). 378 words, ~1,758 tokens.

Download SKILL.mdSave it as .claude/skills/browser-edge-cases/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.
name
browser-edge-cases
description
SOP for debugging browser automation failures on complex websites. Use when browser tools fail on specific sites like LinkedIn, Twitter/X, SPAs, or sites with Shadow DOM.
license
MIT

Browser Tool Edge Cases

Standard Operating Procedure for debugging and fixing browser automation failures on complex websites.

When to Use This Skill

  • browser_interact(action="scroll") succeeds but page doesn't move
  • browser_interact(action="left_click") succeeds but no action triggered
  • browser_interact(action="type") text disappears or doesn't work
  • browser_snapshot hangs or returns stale content
  • browser_navigate loads wrong content

SOP: Debugging Browser Tool Failures

Phase 1: Reproduce & Isolate
1. Create minimal test case demonstrating failure
2. Test against simple site (example.com) to verify tool works
3. Test against problematic site to confirm issue

Quick isolation test:

python
# Test 1: Does the tool work at all?
await browser_navigate(tab_id, "https://example.com")
result = await browser_interact(action="scroll", tab_id=tab_id, scroll_direction="down", scroll_amount=100)
# Should work on simple sites

# Test 2: Does it fail on the problematic site?
await browser_navigate(tab_id, "https://linkedin.com/feed")
result = await browser_interact(action="scroll", tab_id=tab_id, scroll_direction="down", scroll_amount=100)
# If this fails but example.com works → site-specific edge case
Phase 2: Analyze Root Cause

Step 2a: Check console for errors

python
console = await browser_console(tab_id)
# Look for: CSP violations, React errors, JavaScript exceptions

Step 2b: Inspect DOM structure

python
html = await browser_html(tab_id)
snapshot = await browser_snapshot(tab_id)
# Look for:
# - Nested scrollable divs (overflow: scroll/auto)
# - Shadow DOM roots
# - iframes
# - Custom widgets

Step 2c: Identify the pattern

SymptomLikely CauseCheck
Scroll doesn't moveNested scroll containerLook for overflow: scroll divs
Click no effectElement coveredCheck getBoundingClientRect vs viewport
Type clearsAutocomplete/ReactCheck for event listeners on input; try a type action with no selector
Snapshot hangsHuge DOMCheck node count in snapshot
Snapshot staleSPA hydrationWait after navigation
Phase 3: Implement Multi-Layer Fix

Pattern: Always have fallbacks

python
async def robust_operation(tab_id):
    # Method 1: Primary approach
    try:
        result = await primary_method(tab_id)
        if verify_success(result):
            return result
    except Exception:
        pass

    # Method 2: CDP fallback
    try:
        result = await cdp_fallback(tab_id)
        if verify_success(result):
            return result
    except Exception:
        pass

    # Method 3: JavaScript fallback
    return await javascript_fallback(tab_id)

Pattern: Always add timeouts

python
# Bad - can hang forever
result = await browser_snapshot(tab_id)

# Good - fails fast with useful error
try:
    result = await browser_snapshot(tab_id, timeout_s=10.0)
except asyncio.TimeoutError:
    # Handle timeout gracefully
    result = await fallback_snapshot(tab_id)
Phase 4: Verify Fix
1. Run against problematic site → should work
2. Run against simple site → should still work (regression check)
3. Document in registry.md

Pattern Library

P1: Nested Scrollable Containers

Sites: LinkedIn, Twitter/X, any SPA with scrollable feeds

Detection:

javascript
// Find largest scrollable container
const candidates = [];
document.querySelectorAll('*').forEach(el => {
    const style = getComputedStyle(el);
    if (style.overflow.includes('scroll') || style.overflow.includes('auto')) {
        const rect = el.getBoundingClientRect();
        if (rect.width > 100 && rect.height > 100) {
            candidates.push({el, area: rect.width * rect.height});
        }
    }
});
candidates.sort((a, b) => b.area - a.area);
return candidates[0]?.el;

Fix: Dispatch scroll events at container's center, not viewport center.

P2: Element Covered by Overlay

Sites: Modals, tooltips, SPAs with loading overlays

Detection:

javascript
const rect = element.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const topElement = document.elementFromPoint(centerX, centerY);
return topElement === element || element.contains(topElement);

Fix: Wait for overlay to disappear, or use JavaScript click.

P3: React Synthetic Events

Sites: React SPAs, modern web apps

Detection: If CDP click doesn't trigger handler but manual click works.

Fix: Use JavaScript click as primary:

javascript
element.click();
Show full SKILL.md (147 more words)Show less
P4: Huge DOM / Accessibility Tree

Sites: LinkedIn, Facebook, Twitter (feeds with 1000s of nodes)

Detection:

javascript
document.querySelectorAll('*').length > 5000

Fix:

  1. Add timeout to snapshot operation
  2. Truncate tree at 2000 nodes
  3. Fall back to DOM-based snapshot if accessibility tree too large
P5: SPA Hydration Delay

Sites: React, Vue, Angular SPAs after navigation

Detection:

javascript
// Check if React app has hydrated
document.querySelector('[data-reactroot]') ||
document.querySelector('[data-reactid]')

Fix: Wait for specific selector after navigation:

python
await browser_navigate(tab_id, url, wait_until="load")
await browser_interact(action="wait", tab_id=tab_id, wait_for_selector='[data-testid="content"]', timeout_ms=5000)
P6: Shadow DOM

Sites: Components using Shadow DOM, Lit elements

Detection:

javascript
document.querySelectorAll('*').some(el => el.shadowRoot)

Fix: Pierce shadow root:

javascript
function queryShadow(selector) {
    const parts = selector.split('>>>');
    let node = document;
    for (const part of parts) {
        if (node.shadowRoot) {
            node = node.shadowRoot.querySelector(part.trim());
        } else {
            node = node.querySelector(part.trim());
        }
    }
    return node;
}

Quick Reference

IssuePrimary FixFallback
Scroll not workingFind scrollable containerMouse wheel at container center
Click no effectJavaScript click()CDP mouse events
Type clearsuse_insert_text=False (per-keystroke)Use a type action (Input.insertText)
Snapshot hangsAdd timeout_sDOM snapshot fallback
Stale contentWait for selectorIncrease wait_until timeout
Shadow DOMPierce selectorJavaScript traversal

References

© aden-hive, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 11 other files (scripts) in .claude/skills/browser-edge-cases of aden-hive/hive.

  • SKILL.md
  • registry.md
  • scripts/test_02_twitter_scroll.py
  • scripts/test_03_modal_scroll.py
  • scripts/test_04_element_covered.py
  • scripts/test_06_shadow_dom.py
  • scripts/test_07_contenteditable.py
  • scripts/test_08_autocomplete.py
  • scripts/test_10_huge_dom.py
  • scripts/test_13_spa_navigation.py
  • scripts/test_15_screenshot.py
  • scripts/test_case.py

Open the folder on GitHubat commit 6193aea

Compare with similar skills

Browser Automation Edge Cases next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Browser Automation Edge Cases compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Automation Edge Cases this skilladen-hive/hive11k—~1.8kAutomated safety check: PassMIT
AI Search Hubminsight-ai-info/AI-Search-Hub1.3k—~1.3kAutomated safety check: PassNone
Browser Tools981377660LMT/algorithm-study2771 repos~1.3kAutomated safety check: PassNone
Chrome Cdpaiguicai/MCP-Gateway158—~2.1kAutomated safety check: PassMIT
Anti Detect Browserantibrow/anti-detect-browser-skills17—~9.8kAutomated safety check: WarnMIT
Browser Harness Agentloomlinora-u/AgentLoom168—~1.3kAutomated safety check: PassNone

Similar skills

  • AI Search Hub

    minsight-ai-info/AI-Search-Hub

    Run the AI Search Hub browser automation scripts for Yuanbao, LongCat, Doubao, Qwen, Gemini, Grok, and MiniMax.

    1.3k GitHub stars~1.3k tokensUpdated 5 mo ago
    Productivity & AutomationAuto-check passed
  • Browser Tools

    981377660LMT/algorithm-study

    Interactive browser automation via Chrome DevTools Protocol.

    277 GitHub starsUsed in 1 repo~1.3k tokens
    Productivity & AutomationAuto-check passed
  • Chrome Cdp

    aiguicai/MCP-Gateway

    Browser automation and debugging through bundled Chrome DevTools Protocol.

    158 GitHub stars~2.1k tokensUpdated 4 mo ago
    Productivity & AutomationAuto-check passed
  • Anti Detect Browser

    antibrow/anti-detect-browser-skills

    Drive Chromium from standard Playwright APIs with a real-device fingerprint applied in the kernel, one persistent isolated profile per identity, and a per-profile proxy whose exit IP sets timezone…

    17 GitHub stars~9.8k tokensUpdated 1 mo ago
    Testing & QAAuto-check: warnings
  • Browser Harness Agentloom

    linora-u/AgentLoom

    A skill your agent uses when working on AgentLoom browser-harness integration or debugging applications/browserharnessprobe: creating or updating the probe Application, installing the external…

    168 GitHub stars~1.3k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Website Browsing Skills Index

    browsing-skills/browsing-skills

    Umbrella skill for a library of website-specific browsing skills. Use when the user's request targets one of these specific websites: <!-- DOMAINS:START…

    117 GitHub stars~1.6k tokensUpdated 4 mo ago
    Productivity & AutomationAuto-check passed

Questions about Browser Automation Edge Cases

What does Browser Automation Edge Cases do?

Step-by-step procedure for debugging browser automation failures on complex sites such as LinkedIn, Twitter/X, single-page apps and Shadow DOM pages. This is a standard operating procedure for debugging browser automation failures on complex websites. It targets symptoms such as a scroll that reports success while the page does not move, a click that triggers nothing, typed text that disappears, a snapshot that hangs or returns stale content, and navigation that loads the wrong page.

When should I use Browser Automation Edge Cases?

Browser Automation Edge Cases fits situations like: debugging a browser tool that scrolls, clicks or types with no effect on a site; fixing snapshots that hang or go stale on a huge or hydrating page; handling Shadow DOM, contenteditable fields or autocomplete inputs.

How do I install Browser Automation Edge Cases in Claude Code?

Run `npx skills add aden-hive/hive --skill browser-edge-cases -a claude-code`. Or copy the skill folder (.claude/skills/browser-edge-cases in aden-hive/hive) into .claude/skills/browser-edge-cases in your project. Claude Code loads it when a task matches its description.

How do I install Browser Automation Edge Cases in Codex?

Run `npx skills add aden-hive/hive --skill browser-edge-cases -a codex`. Or copy the skill folder (.claude/skills/browser-edge-cases in aden-hive/hive) into .agents/skills/browser-edge-cases in your project. Codex loads it when a task matches its description.

Can I use Browser Automation Edge Cases in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aden-hive/hive --skill browser-edge-cases -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-edge-cases, .gemini/skills/browser-edge-cases, .github/skills/browser-edge-cases and .opencode/skills/browser-edge-cases in your project.

What does Browser Automation Edge Cases need to run?

Going by SKILL.md and its folder, Browser Automation Edge Cases needs Python for the scripts in its folder. Our summary lists: Python, to run the bundled test scripts; The browser tools these scripts call, such as browser_interact and browser_snapshot.

Does Browser Automation Edge Cases access the network?

SKILL.md names 1 domain. In commands or code: linkedin.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Browser Automation Edge Cases safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Browser Automation Edge Cases use?

Browser Automation Edge Cases is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Browser Automation Edge Cases use?

About 1.8k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Browser Automation Edge Cases?

Skills that share tags, products or a category with Browser Automation Edge Cases: AI Search Hub (minsight-ai-info/AI-Search-Hub, 1.3k stars), Browser Tools (981377660LMT/algorithm-study, 277 stars), Chrome Cdp (aiguicai/MCP-Gateway, 158 stars) and Anti Detect Browser (antibrow/anti-detect-browser-skills, 17 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Automation Edge Cases?

aden-hive (a GitHub organization) maintains it in aden-hive/hive, which has 11,085 GitHub stars. The repository was last updated on October 9, 2026.

Source: aden-hive/hive on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.