-
Notifications
You must be signed in to change notification settings - Fork 2
Uiviewer: 截图和组件树的可视化关联 #7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
growvv
commented
Oct 30, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds a UI Viewer web interface to HapTest, enabling real-time inspection of HarmonyOS UI hierarchies through a browser-based dashboard. The feature includes backend API endpoints, Express server setup, device pooling for connection management, and a frontend interface with Vue.js.
- Adds Express-based web server with REST API for device connectivity, screenshot fetching, and hierarchy inspection
- Implements device pooling to manage persistent connections and automatic cleanup
- Extends CLI with
ui-viewersubcommand to launch the web service - Provides frontend UI with interactive hierarchy tree and screenshot overlay
Reviewed Changes
Copilot reviewed 20 out of 21 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/ui/ui_viewer_server.ts |
Core server implementation with Express routes, device pooling, and session management |
src/ui/hierarchy_builder.ts |
Converts component trees to hierarchical JSON and generates XPath expressions |
src/model/builder/page_builder.ts |
Enhanced layout parsing to support multiple input formats (windows, pages, direct nodes) |
src/device/device.ts |
Adds disconnect/teardown methods and fallback page creation |
src/device/hdc.ts |
Adds listTargets() static method to enumerate connected devices |
src/device/uidriver/*.ts |
Returns DriverContext instead of bare driver; adds cleanup methods |
src/cli/cli.ts |
Adds ui-viewer subcommand with refactored command structure |
test/unit/*.test.ts |
Comprehensive unit tests for server routes and page builder normalization |
res/ui-viewer/** |
Frontend HTML, CSS, and JavaScript for the web interface |
package.json |
Adds Express and type definitions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/model/builder/page_builder.ts
Outdated
| const metaSources = [value?.attributes, value?.metadata, value, ...ancestors].filter(Boolean); | ||
| if (value.attributes && (Array.isArray(value.children) || value.children === undefined)) { | ||
| if (!Array.isArray(value.children)) { | ||
| value.children = Array.isArray(value.children) ? value.children : []; |
Copilot
AI
Oct 30, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same redundancy as line 201. Line 277 checks !Array.isArray(value.children), so the ternary is unnecessary. Simplify to value.children = [];.
| value.children = Array.isArray(value.children) ? value.children : []; | |
| value.children = []; |
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>