Skip to content

Commit c623406

Browse files
sergeibbbsergeibbb
committed
Adds inspect-live skill and e2e-dev-inspect script for UI inspection with Playwright
(gitkraken/vscode-gitlens-private#78)
1 parent e6c6f1a commit c623406

3 files changed

Lines changed: 735 additions & 13 deletions

File tree

‎.claude/skills/inspect-live/SKILL.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
name: inspect-live
3+
description: Launch VS Code with GitLens via Playwright and inspect the running extension — read UI text, check feature flags, read logs, take screenshots
4+
---
5+
6+
# /inspect-live — Live Extension Inspection
7+
8+
Launch a real VS Code instance with GitLens loaded, then inspect UI elements, read logs, interact with views, and evaluate runtime values — all programmatically via Playwright.
9+
10+
## The Script
11+
12+
`scripts/e2e-dev-inspect.mjs` — a general-purpose CLI that supports ordered, repeatable actions.
13+
14+
### Two Modes
15+
16+
| Mode | Flag | ExtensionMode | `container.debugging` | `gitkraken.env` | `evaluate()` |
17+
| --------------------- | ------------------ | ------------- | --------------------- | --------------- | ------------ |
18+
| Development (default) | _(none)_ | Development | `true` | ✅ respected | ❌ |
19+
| Test | `--with-evaluator` | Test | `false` | ❌ ignored | ✅ |
20+
21+
Use **Development mode** when you need `gitkraken.env` (e.g. testing feature flags against dev API).
22+
Use **Test mode** when you need `evaluate()` to inspect runtime values (e.g. `vscode.env.machineId`).
23+
24+
## Common Recipes
25+
26+
### Inspect any view's DOM content
27+
28+
```bash
29+
node scripts/e2e-dev-inspect.mjs --command gitlens.showWelcomeView --query-frame h1
30+
```
31+
32+
The `--query-frame` action searches all frames (including nested webview iframes) for matching elements and prints their text content.
33+
34+
### Get the full accessibility tree of a view
35+
36+
```bash
37+
node scripts/e2e-dev-inspect.mjs --command gitlens.showHomeView --aria
38+
```
39+
40+
### Inspect a specific DOM element
41+
42+
```bash
43+
node scripts/e2e-dev-inspect.mjs --command gitlens.showWelcomeView --aria-selector "[class*='header']"
44+
```
45+
46+
### Click something, then inspect the result
47+
48+
```bash
49+
node scripts/e2e-dev-inspect.mjs \
50+
--command gitlens.showHomeView \
51+
--click-frame "button.start-work" \
52+
--pause 2000 \
53+
--query-frame ".dialog-content h2"
54+
```
55+
56+
### Read runtime values (requires --with-evaluator)
57+
58+
```bash
59+
node scripts/e2e-dev-inspect.mjs --with-evaluator \
60+
--eval "vscode.env.machineId" \
61+
--eval "vscode.version" \
62+
--eval "vscode.env.appName"
63+
```
64+
65+
### Check feature flag behavior with dev environment
66+
67+
```bash
68+
node scripts/e2e-dev-inspect.mjs --env dev \
69+
--command gitlens.showWelcomeView \
70+
--query-frame h1 \
71+
--logs FeatureFlagService
72+
```
73+
74+
### Search extension logs for any pattern
75+
76+
```bash
77+
node scripts/e2e-dev-inspect.mjs --logs "error"
78+
node scripts/e2e-dev-inspect.mjs --env dev --logs ConfigCat
79+
```
80+
81+
### Take a screenshot
82+
83+
```bash
84+
node scripts/e2e-dev-inspect.mjs --command gitlens.showGraphView --screenshot /tmp/graph.png
85+
```
86+
87+
### Keep VS Code open for manual interaction
88+
89+
```bash
90+
node scripts/e2e-dev-inspect.mjs --env dev --keep-open
91+
```
92+
93+
### Add custom settings
94+
95+
```bash
96+
node scripts/e2e-dev-inspect.mjs \
97+
--setting "gitlens.currentLine.enabled=true" \
98+
--setting "gitlens.hovers.currentLine.over=line" \
99+
--command gitlens.showWelcomeView --aria
100+
```
101+
102+
## How AI Agents Should Use This
103+
104+
1. **Build the extension first**: `pnpm run build:extension`
105+
2. **Run the script** with appropriate actions — all output goes to stdout as structured text
106+
3. **Parse the output**:
107+
- `>>> query-frame: h1` → followed by element text content
108+
- `>>> aria` → YAML-like accessibility tree with roles, names, states
109+
- `>>> eval:` → followed by `Result: <JSON>`
110+
- `>>> logs` → followed by matching log lines
111+
112+
### Choosing the right action
113+
114+
| I want to... | Action |
115+
| ------------------------------------ | -------------------------------- |
116+
| Read text from a webview | `--query-frame <selector>` |
117+
| See all UI elements and their states | `--aria` |
118+
| Find a specific element | `--aria-selector <css>` |
119+
| Read text from the main VS Code UI | `--query <selector>` |
120+
| Click a button/link in a webview | `--click-frame <selector>` |
121+
| Click in the main VS Code UI | `--click <selector>` |
122+
| Read a runtime value | `--with-evaluator --eval "expr"` |
123+
| Execute a VS Code command | `--command <id>` |
124+
| Check extension logs | `--logs <pattern>` |
125+
126+
## All Options
127+
128+
| Flag | Description |
129+
| ----------------------- | ------------------------------------------- |
130+
| `--env <env>` | Set `gitkraken.env` (e.g. `dev`, `staging`) |
131+
| `--with-evaluator` | Enable HTTP evaluator bridge (Test mode) |
132+
| `--keep-open` | Keep VS Code running (Ctrl+C to stop) |
133+
| `--setting <key=value>` | Custom VS Code setting (repeatable) |
134+
| `--wait <ms>` | Default wait between actions (default 3000) |
135+
| `--workspace <path>` | Path to open as workspace |
136+
| `--vscode-path <path>` | Path to VS Code Electron binary |
137+
| `--command <cmd>` | Execute VS Code command |
138+
| `--aria` | Print full window aria snapshot |
139+
| `--aria-selector <sel>` | Print aria snapshot of specific element |
140+
| `--query <sel>` | Print textContent matching selector |
141+
| `--query-frame <sel>` | Search all frames for selector |
142+
| `--click <sel>` | Click element |
143+
| `--click-frame <sel>` | Click inside webview iframe |
144+
| `--screenshot <path>` | Save screenshot |
145+
| `--logs [pattern]` | Search extension logs |
146+
| `--eval <code>` | Evaluate JS in extension host |
147+
| `--pause <ms>` | Wait specified duration |

‎AGENTS.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -813,19 +813,20 @@ Reference examples and critical rules for common tasks.
813813

814814
Skills provide detailed, step-by-step workflows for common tasks. Invoke with `/{skill-name}`.
815815

816-
| Skill | Purpose |
817-
| ------------------ | --------------------------------------------------------- |
818-
| `/investigate` | Structured bug investigation with root cause analysis |
819-
| `/analyze` | Deep design/implementation analysis, devil's advocate |
820-
| `/review` | Code review against standards + impact completeness audit |
821-
| `/commit` | Git commit with GitLens conventions |
822-
| `/create-issue` | Create GitHub issues from code changes |
823-
| `/audit-commits` | Audit commit range for issues and CHANGELOG entries |
824-
| `/add-command` | Scaffold a new VS Code command |
825-
| `/add-webview` | Scaffold a new webview with IPC, Lit app, registration |
826-
| `/add-test` | Generate unit or E2E test files |
827-
| `/add-icon` | Add icon to GL Icons font |
828-
| `/add-ai-provider` | Add a new AI provider integration |
816+
| Skill | Purpose |
817+
| ------------------ | ---------------------------------------------------------- |
818+
| `/investigate` | Structured bug investigation with root cause analysis |
819+
| `/analyze` | Deep design/implementation analysis, devil's advocate |
820+
| `/review` | Code review against standards + impact completeness audit |
821+
| `/commit` | Git commit with GitLens conventions |
822+
| `/create-issue` | Create GitHub issues from code changes |
823+
| `/audit-commits` | Audit commit range for issues and CHANGELOG entries |
824+
| `/add-command` | Scaffold a new VS Code command |
825+
| `/add-webview` | Scaffold a new webview with IPC, Lit app, registration |
826+
| `/add-test` | Generate unit or E2E test files |
827+
| `/add-icon` | Add icon to GL Icons font |
828+
| `/add-ai-provider` | Add a new AI provider integration |
829+
| `/inspect-live` | Launch VS Code with GitLens via Playwright inspect UI/logs |
829830

830831
### Canonical Examples
831832

0 commit comments

Comments
 (0)