feat(cli): add --ui flag to inspect command for browser-based tree explorer#113
Open
farhanlabib wants to merge 3 commits into
Open
feat(cli): add --ui flag to inspect command for browser-based tree explorer#113farhanlabib wants to merge 3 commits into
farhanlabib wants to merge 3 commits into
Conversation
…ailure Screenshots show what the screen looks like when a test fails, but not why a locator didn't match. The accessibility tree carries that context — element labels, types, visibility flags, and bounds — which is exactly what you need to debug a failing getBy* call. Add saveTreeOnFailure: boolean to MobilewrightConfig. When enabled, the screen fixture calls viewTree() after a failure and attaches the result as view-tree-on-failure (JSON) to the HTML report, next to the existing screenshot. Opt-in, defaults to false, no impact on existing projects.
When writing tests, the main friction is not knowing the exact label, text, or type of an element on screen. The only option was to add screen.viewTree() inside a test and read the console output — which requires running a test just to inspect the UI. The inspect command solves this directly: run it with the app open on the screen you want to target, and it prints the full accessibility tree in the terminal with element types, labels, text, and visibility — no test needed. npx mobilewright inspect Supports --json to output raw ViewNode[] for piping to jq or saving as a snapshot to diff between two app states: npx mobilewright inspect --json | jq '.[] | select(.label != null)' Respects deviceName from config for automatic device resolution, and accepts -d/--device to target a specific device when multiple are connected.
…plorer The terminal tree from inspect is useful for quick lookups but hard to navigate on complex screens with deep hierarchies. When a screen has 100+ nodes, scrolling through a flat terminal dump to find the right element is slow. The --ui flag opens a browser at localhost:9325 with a two-panel UI: the left panel shows the collapsible accessibility tree, the right panel shows the selected node's properties and ready-to-use locator code that can be copied to the clipboard with one click. Auto-refresh polls the device on a configurable interval (1s/2s/5s/10s) so the tree stays live as you navigate the app — no need to re-run the command for each screen. A manual Refresh button is always available when auto-refresh is off.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Depends on
#112 — adds the
inspectcommand this builds on top of.Motivation
The terminal tree from
inspectis useful for quick lookups but hard to navigate on complex screens. A screen with 100+ nodes becomes a long flat list — you scroll, lose your place, and still have to manually type out the locator.viewTree()inside a test has the same problem: it dumps a JSON blob to the console with no structure, no expand/collapse, and no way to copy a locator directly.The
--uiflag replaces that workflow with a browser panel that stays live as you use the app.What changed
Added
--uiflag to theinspectcommand (packages/mobilewright/src/commands/inspect-ui.ts):Left panel — collapsible accessibility tree. Click
▸to expand a node, click the node itself to select it.Right panel — properties of the selected node (type, label, text, bounds, visibility) and ready-to-use locator suggestions with a one-click Copy button.
Auto-refresh — toggle on to poll the device on a configurable interval (1s / 2s / 5s / 10s) so the tree updates live as you navigate the app. A manual Refresh button is always available when auto-refresh is off.
The server keeps a persistent WebSocket connection to mobilecli with automatic reconnect on error, so switching between screens stays fast.
Test plan
npx mobilewright inspect --ui— browser opens atlocalhost:9325, tree renders▸on a node with children — expands; click▾— collapsesscreen.getBy*()callNo regression
npx mobilewright inspect(no flags) — terminal output unchangednpx mobilewright inspect --json— JSON output unchanged