Skip to content

Commit 98f884b

Browse files
marcomaesclaude
andcommitted
feat: add mobilewright inspect command with browser-based element inspector
Adds a new `@mobilewright/inspector` workspace package and a `mobilewright inspect` CLI subcommand that opens a browser-based element inspector for connected devices. The inspector shows a live screenshot on the left and an annotated element list on the right. Each element is annotated with the best mobilewright locator (testId > role > label > text), mirroring the priority order of @mobilewright/core's query engine. Clicking a locator highlights its bounding box on the screenshot; clicking a box selects the matching row. Duplicate locators get a "dup" badge. Architecture: - packages/inspector: standalone Express server, plain HTML/CSS/JS frontend (no build step), locator derivation pure function, DeviceManager with injected launchers (DIP) - packages/mobilewright: inspect CLI command injects ios/android launchers into start() to avoid a circular dependency; open is an explicit dependency here Hardening and review fixes: - Logs to stderr so the URL line on stdout is uncluttered - Port validated as integer in [0, 65535] - Node 18 compatible server close (no Symbol.asyncDispose) - 4-arg Express error handler returns JSON on unexpected throws - escQ escapes backslashes in addition to single quotes - open() wrapped in try/catch so headless environments print URL and continue - device.screenSize() replaces PNG IHDR heuristic for correct iPad support - 404 check in select route matches by id AND platform - Test files excluded from tsconfig (not shipped in dist) - Stale screenshot cleared when active device disconnects - aria-label on device picker and interval selects; vis-btn aria-label kept in sync - Passes ESLint @stylistic/semi throughout - 83 tests (@playwright/test): locator derivation, DeviceManager, HTTP routes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 8f7b44c commit 98f884b

20 files changed

Lines changed: 3344 additions & 16 deletions

README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,19 @@ ID Name Platform Type
482482
5A5FCFCA-27EC-4D1B-B412-BAE629154EE0 iPhone 17 Pro ios simulator booted
483483
```
484484

485+
### `mobilewright inspect`
486+
487+
Open the Mobilewright Inspector — a browser-based UI showing a live screenshot of your connected device alongside every element and its best locator.
488+
489+
```bash
490+
npx mobilewright inspect
491+
npx mobilewright inspect --port 4621 # use a specific port (default: 4621)
492+
```
493+
494+
The Inspector opens automatically in your browser. Select a device from the picker at the top, then click **Refresh** or enable **Auto refresh**. Click any row in the element list to highlight its bounding box on the screenshot. Elements that share a locator with another element get a `dup` badge.
495+
496+
Locator priority matches what mobilewright uses: `getByTestId` > `getByRole` > `getByLabel` > `getByText`.
497+
485498
### `mobilewright screenshot`
486499

487500
Capture a screenshot of a connected device. Auto-starts mobilecli if it isn't running.

0 commit comments

Comments
 (0)