Browser Edge Cases

When browser automation fails on real-world sites, this SOP walks you through a systematic debugging process instead of guessing. It covers the usual suspects: nested scroll containers on LinkedIn, React synthetic events that ignore CDP clicks, Shadow DOM components, and SPA hydration delays that make snapshots stale. The pattern library gives you detection snippets and fallback strategies for each case, like finding the actual scrollable div instead of scrolling the viewport, or adding timeouts to snapshots before they hang on huge DOMs. Most useful when you've confirmed the browser tool works on example.com but breaks on the site you actually need to automate.

GitHub stars: 10.5K
last updated: May 29, 2026

View on GitHub

Install

$ npx -y skills add aden-hive/hive --skill browser-edge-cases --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

# 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

SKILL.md on GitHub