Skip to content

feat(browser): Advanced DOM Snapshot Engine — 13-layer pruning pipeline#210

Merged
jackwener merged 1 commit intomainfrom
feat/dom-snapshot-engine
Mar 21, 2026
Merged

feat(browser): Advanced DOM Snapshot Engine — 13-layer pruning pipeline#210
jackwener merged 1 commit intomainfrom
feat/dom-snapshot-engine

Conversation

@jackwener
Copy link
Owner

Summary

Adds an advanced DOM snapshot engine inspired by browser-use's multi-layer pruning, adapted for opencli's Chrome Extension + CDP architecture.

New Features

Feature Description
13-layer pruning pipeline Tag filter → SVG collapse → ad detection → CSS visibility → viewport threshold → paint-order occlusion → Shadow DOM → iframe → BBox dedup → attribute whitelist → table→markdown → serialization → hidden element hints
scrollTo(ref) Scroll to data-opencli-ref elements found in snapshot
getFormState() Extract all form fields as structured JSON with labels
Incremental diff Mark new elements with * prefix across snapshots
Table→Markdown <table> elements serialized as markdown tables
data-opencli-ref Auto-annotate interactive elements for precise targeting
4-layer click/type data-opencli-refdata-ref → CSS selector → index fallback

Files Changed (11)

  • New: src/browser/dom-snapshot.ts (core engine + utilities)
  • New: src/browser/dom-snapshot.test.ts (21 tests)
  • Modified: page.ts, cdp.ts, dom-helpers.ts, index.ts, types.ts
  • Test mocks: 3 files updated for new IPage methods
  • package.json: Split test scripts (unit/e2e/all)

Testing

  • ✅ TypeScript: zero errors
  • ✅ 29 test files, 283 tests, all passing (~1s)

…eline

Core Changes:
- New dom-snapshot.ts: 13-layer LLM-optimized DOM pruning engine
  - Tag filtering, SVG collapse, ad/noise detection
  - CSS visibility, viewport threshold, paint-order occlusion
  - Shadow DOM traversal, same-origin iframe extraction
  - BBox parent-child dedup, attribute whitelist + synthetic attrs
  - Table → markdown serialization
  - Incremental diff (mark new elements with *)
  - data-opencli-ref annotation for precise click/type targeting
  - Hidden interactive element hints (scroll-to-reveal)

New APIs:
- IPage.scrollTo(ref) — scroll to snapshot-identified elements
- IPage.getFormState() — extract all form fields as structured JSON
- scrollToRefJs(), getFormStateJs() — standalone JS generators

Integration:
- Page (daemon) + CDPPage (direct CDP): use new engine as primary
- dom-helpers click/type: 4-layer fallback (data-opencli-ref → data-ref → CSS → index)
- Exports from browser/index.ts barrel

Testing:
- 21 new tests for dom-snapshot engine
- All 283 tests pass (29 files, 1.07s)
- Split test scripts: npm test (unit only), npm run test:all (full)
@jackwener jackwener merged commit d831b04 into main Mar 21, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant