UI Tree Inspector
The UI Tree Inspector is a recording-time panel that shows exactly which on-screen elements VibeView resolves when it attaches selectors to your recorded actions. Use it when a recorded selector looks wrong, when an element isn’t being picked up, or when you want to confirm the tree your test will run against matches what’s on screen right now.
Opening the inspector
The Inspect tree button appears in the recording toolbar while a recording session is active. Click it to dock the panel on the right side of the device. Closing the panel — or stopping the recording — unsubscribes from updates.
The inspector is only available during recording. Outside of recording, replay, and AI agent runs the system does not request UI trees, so there would be nothing to show.
Reading the badge
The badge at the top of the panel tells you how fresh the tree backing recording enrichment is:
- Fresh (green) — a current tree is available. Tap-enrichment will use it. When the snapshot came from a fast, reduced source, the badge reads Fresh — partial: the tree is current but may omit some nodes or labels, and a manual refresh fetches a richer one.
- Stale (amber) — your last action invalidated the tree and a fresh one hasn’t landed yet. Enrichment that runs in this window may pick the wrong element.
- Refreshing (blue) — you clicked Refresh and a fresh tree is being fetched from the device.
- Empty (gray) — no snapshot has been captured yet; the panel shows “No snapshot yet”.
The diagnostic line below shows the snapshot’s element count, its age, and what produced it (an idle settle, an AI tree request, or a manual refresh).
Bidirectional highlighting
- Hover a tree node — a bounding-box overlay draws on the device stream at that node’s position, so you can confirm what the node represents.
- Tap on the device — the element the system resolved (the one your recorded step will use) pulse-highlights in the tree and scrolls into view. If no element resolved, a “No element matched this tap” line appears for that moment.
Manual refresh
If you suspect the cached tree is wrong (the system thinks the screen settled but it hasn’t, or an animation finished after settle), click the ↻ button. This invalidates the cache and fetches a fresh tree from the device. The badge transitions Refreshing → Fresh when the new tree lands.
Manual refresh is the safe escape hatch — it never breaks the recording, and the resulting snapshot is marked as manually refreshed so you can tell it apart from automatic ones.
Pruned vs. raw view
Toggle between Pruned (default) and Raw in the controls row. Pruned hides elements with no text, no identifier, and no size so you can scan the tree faster; element matching for recorded actions still considers the full snapshot. Raw shows every element returned by the device, including non-interactive containers.
Platform notes
- iOS — full field set:
text,accessibilityId,className,rect, plusplaceholderandvaluewhere applicable. - Android — the device’s accessibility tree may not carry every field. Missing fields render as
—. The inspector still functions; you may just have less detail to filter by. - TV devices — the inspector also works during Apple TV, Android TV, and Roku (beta) recordings, showing the elements your d-pad navigation moves focus between.
When this is the wrong tool
The inspector is observational. It does not change idle detection, fix bad selectors, or rewrite recorded steps. If you find that taps consistently enrich wrong, the inspector helps you describe the problem precisely — fixing it is a separate change to the cache or idle logic.