ChromeDevTools / ChromeDevTools/chrome-devtools-mcp
[Enhancement] Robust Snapshot Architecture: Dual-Source Accessibility, Defensive Href Extraction & Download Link Detection
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 52.3k
- Forks
- 4.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 83
Description
Related Issues
- #363 - Accessibility tree/element(s) snapshot
- #284 - Download folder configuration for automation
- Puppeteer #6311 - URL attribute for links
Problem Statement
While working on browser automation for AI agents, we identified several reliability gaps in snapshot/extraction that affect real-world usage:
- Href extraction edge cases - Some dynamically-rendered links or SPAs don't expose
hrefreliably through the accessibility tree alone - No proactive download identification - Agents must parse snapshot text manually to find downloadable files
- Single-source accessibility - Relying solely on Puppeteer's snapshot can miss semantics (as discussed in #363)
- Snapshot fragility - Individual element failures can break the entire snapshot
Proposed Improvements
We've implemented and deployed (Azure production) solutions for these:
1. Dual-Fallback Href Extraction
// Runtime.callFunctionOn with fallback
return this.href || this.getAttribute('href') || '';
This handles edge cases where the standard property read fails (related to Puppeteer #6311 discussion).
2. Explicit downloadLinks Field
interface SnapshotResult {
// ... existing fields
downloadLinks: Array<{
url: string;
filename: string;
extension: string;
}>;
}
Automatically identifies downloadable files by extension (.csv, .xlsx, .zip, .pdf, .json, etc.). Agents no longer need to parse text manually.
3. Dual-Source Accessibility Tree
| Source | Purpose |
|---|---|
Puppeteer page.accessibility.snapshot() |
Semantic structure |
CDP backendNodeId |
Precise DOM element mapping |
This addresses the gaps @BogdanCerovac identified in #363 - combining semantic accessibility with precise DOM mapping.
4. Resilient Error Handling
// Continue on individual element failures
for (const node of nodes) {
try {
await extractNodeData(node);
} catch (e) {
console.warn(`Skipping node: ${e.message}`);
continue; // Don't fail entire snapshot
}
}
Implementation
We have a working implementation deployed in production. Happy to:
- Submit a PR with these improvements
- Provide more technical details on any specific aspect
- Discuss alternative approaches
Questions for Maintainers
- Would you prefer these as separate PRs or one consolidated change?
- For
downloadLinks- should this be opt-in via a parameter or always included? - Any concerns about the dual-source approach adding complexity?
/cc @OrKoN
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the snapshot/extraction entry point described in the issue and the related discussions in #363, #284, and Puppeteer #6311. Before coding, get maintainer agreement on whether the href fallback, downloadLinks field, dual-source accessibility tree, and resilient errors should be separate changes; done requires an agreed scope and a reviewed implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100