@shadowcoderr/context-graph 0.3.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +448 -88
  2. package/dist/analyzers/a11y-extractor.d.ts +19 -5
  3. package/dist/analyzers/a11y-extractor.d.ts.map +1 -1
  4. package/dist/analyzers/a11y-extractor.js +274 -104
  5. package/dist/analyzers/a11y-extractor.js.map +1 -1
  6. package/dist/analyzers/network-logger.d.ts +20 -2
  7. package/dist/analyzers/network-logger.d.ts.map +1 -1
  8. package/dist/analyzers/network-logger.js +122 -42
  9. package/dist/analyzers/network-logger.js.map +1 -1
  10. package/dist/analyzers/network-patterns.d.ts +73 -0
  11. package/dist/analyzers/network-patterns.d.ts.map +1 -0
  12. package/dist/analyzers/network-patterns.js +316 -0
  13. package/dist/analyzers/network-patterns.js.map +1 -0
  14. package/dist/analyzers/screenshot-capturer.d.ts +73 -0
  15. package/dist/analyzers/screenshot-capturer.d.ts.map +1 -0
  16. package/dist/analyzers/screenshot-capturer.js +190 -0
  17. package/dist/analyzers/screenshot-capturer.js.map +1 -0
  18. package/dist/cli/index.js +17 -7
  19. package/dist/cli/index.js.map +1 -1
  20. package/dist/core/capture-engine.d.ts +30 -25
  21. package/dist/core/capture-engine.d.ts.map +1 -1
  22. package/dist/core/capture-engine.js +290 -276
  23. package/dist/core/capture-engine.js.map +1 -1
  24. package/dist/exporters/ai-context-bundler.d.ts +88 -0
  25. package/dist/exporters/ai-context-bundler.d.ts.map +1 -0
  26. package/dist/exporters/ai-context-bundler.js +380 -0
  27. package/dist/exporters/ai-context-bundler.js.map +1 -0
  28. package/dist/security/redactor.d.ts +16 -0
  29. package/dist/security/redactor.d.ts.map +1 -1
  30. package/dist/security/redactor.js +127 -57
  31. package/dist/security/redactor.js.map +1 -1
  32. package/dist/storage/engine.d.ts +24 -21
  33. package/dist/storage/engine.d.ts.map +1 -1
  34. package/dist/storage/engine.js +210 -176
  35. package/dist/storage/engine.js.map +1 -1
  36. package/dist/storage/manifest.d.ts.map +1 -1
  37. package/dist/storage/manifest.js +4 -3
  38. package/dist/storage/manifest.js.map +1 -1
  39. package/dist/utils/version.d.ts +5 -0
  40. package/dist/utils/version.d.ts.map +1 -0
  41. package/dist/utils/version.js +53 -0
  42. package/dist/utils/version.js.map +1 -0
  43. package/package.json +3 -3
package/README.md CHANGED
@@ -1,49 +1,108 @@
1
+ <div align="center">
2
+
3
+ <br />
4
+
5
+ <img width="80" height="80" src="https://raw.githubusercontent.com/shadowcoderr/ContextGraph/main/.github/assets/logo.svg" alt="ContextGraph logo" onerror="this.style.display='none'" />
6
+
1
7
  # ContextGraph
2
8
 
3
- > **A deterministic "Flight Data Recorder" for web applications** — captures rich, AI-ready context from browser sessions in restricted enterprise environments where MCP is unavailable.
9
+ **The deterministic "Flight Data Recorder" for web applications**
10
+
11
+ *Transform manual browser sessions into structured, AI-ready intelligence — 100% offline, zero telemetry, enterprise-safe*
12
+
13
+ <br />
4
14
 
5
- [![Version](https://img.shields.io/badge/version-0.3.0-blue)](package.json)
6
- [![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-green)](package.json)
7
- [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](tsconfig.json)
8
- [![Playwright](https://img.shields.io/badge/Playwright-1.40%2B-orange)](package.json)
9
- [![License](https://img.shields.io/badge/license-MIT-lightgrey)](LICENSE)
15
+ [![npm version](https://img.shields.io/npm/v/@shadowcoderr/context-graph?style=flat-square&color=0066cc&label=npm)](https://www.npmjs.com/package/@shadowcoderr/context-graph)
16
+ [![Node.js](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org)
17
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
18
+ [![Playwright](https://img.shields.io/badge/Playwright-1.40%2B-2ead33?style=flat-square&logo=playwright&logoColor=white)](https://playwright.dev)
19
+ [![License: MIT](https://img.shields.io/badge/license-MIT-yellow?style=flat-square)](LICENSE)
20
+ [![Zero Telemetry](https://img.shields.io/badge/telemetry-none-red?style=flat-square)](README.md#security-model)
21
+
22
+ <br />
23
+
24
+ ```
25
+ IDE AI Agent ContextGraph Your Browser
26
+ (Copilot/Cursor) ← (Playwright) ← (You Navigate)
27
+ generates tests captures facts visits pages
28
+ ```
29
+
30
+ <br />
31
+
32
+ [**Quick Start**](#-quick-start) • [**Features**](#-key-features) • [**Output**](#-what-you-get) • [**AI Integration**](#-ai-integration) • [**Config**](#-configuration) • [**Docs**](docs/USER_GUIDE.md)
33
+
34
+ <br />
35
+
36
+ </div>
10
37
 
11
38
  ---
12
39
 
13
40
  ## Why ContextGraph?
14
41
 
15
- IDE-based AI agents (Copilot, Cursor, etc.) are blind to your running browser. Without MCP, they cannot see the live DOM, accessibility tree, or real API traffic of the app you are testing. In enterprise environments, MCP and cloud-based recording tools are often blocked by security policy.
42
+ IDE-based AI agents (GitHub Copilot, Cursor, Claude) are **blind to your running browser**. Without MCP, they cannot see the live DOM, accessibility tree, or real API traffic of the application you're testing.
16
43
 
17
- ContextGraph solves this by acting as a **pre-processor** — it bridges the gap between manual exploration and AI-powered test generation using only Playwright, which is already whitelisted on most QA teams' machines.
44
+ In enterprise environments, MCP and cloud-based recording tools are frequently blocked by security policy.
45
+
46
+ **ContextGraph solves this** by acting as a pre-processor — bridging the gap between manual exploration and AI-powered test generation using only Playwright, which is already whitelisted on most QA teams' machines.
18
47
 
19
48
  ```
20
- Your Browser Session
21
-
22
-
23
- ContextGraph ← You are here
24
- (Playwright-native)
25
-
26
-
27
- Structured Output ← DOM, Locators, A11y Tree, Network
28
- (Local Filesystem)
29
-
30
-
31
- AI Agent / LLM ← Receives clean, noise-free context
32
- (Copilot / Cursor / Claude)
33
-
34
-
35
- Generated Tests ← Playwright .spec.ts files
49
+ Your Browser Session → ContextGraph → Structured Output → AI Agent → Generated Tests
50
+ (Playwright) (Local Filesystem) (Copilot) (.spec.ts files)
36
51
  ```
37
52
 
53
+ > **Zero cloud. Zero telemetry. Zero MCP required.** Everything stays inside your enterprise perimeter.
54
+
38
55
  ---
39
56
 
40
- ## Quick Start
57
+ ## Key Features
58
+
59
+ <table>
60
+ <tr>
61
+ <td width="50%">
62
+
63
+ **🎯 Guided Capture**
64
+ Captures only what you navigate — no autonomous crawling, no surprises.
41
65
 
42
- ### Prerequisites
66
+ **🧹 Clean DOM Output**
67
+ Scripts, event handlers, and noise stripped before saving. Shadow DOM included.
43
68
 
44
- - **Node.js** 18.0.0 or higher
45
- - **Microsoft Edge** (installed used as the capture browser)
46
- - **Windows 10/11** (primary support; Linux/macOS in beta)
69
+ **🔑 Smart Locators**
70
+ 5+ selector strategies per element, ranked by resilience (TestID Role Label Text → CSS).
71
+
72
+ **♿ Accessibility Tree**
73
+ Three-strategy extraction: Playwright API → CDP → DOM fallback. Full ARIA/role hierarchy.
74
+
75
+ </td>
76
+ <td width="50%">
77
+
78
+ **🌐 Network Intelligence**
79
+ All HTTP traffic captured. Concurrent request timing fixed via WeakMap. Failed requests tracked.
80
+
81
+ **🔒 Security by Design**
82
+ JWT, Bearer tokens, credit cards, SSNs, API keys, URL query params — all redacted before any disk write.
83
+
84
+ **🤖 AI Context Bundle**
85
+ Export entire session as a single Markdown file, ready to paste into any AI agent.
86
+
87
+ **📊 API Inventory**
88
+ Auto-generates structured API surface documentation with path-parameter normalisation.
89
+
90
+ </td>
91
+ </tr>
92
+ </table>
93
+
94
+ | Feature | Description |
95
+ |---|---|
96
+ | 📸 **Full Page Screenshots** | Automatic per-page + optional per-element captures |
97
+ | 🧩 **Component Registry** | Tracks reusable UI patterns across all captured pages |
98
+ | 🔄 **Change Detection** | Structural content hashing — skips unchanged pages automatically |
99
+ | 📦 **100% Offline** | Zero cloud dependencies, zero telemetry, runs inside enterprise perimeter |
100
+ | 🎭 **Recorder Mode** | Playwright Codegen integration — convert manual walkthroughs to `.spec.ts` |
101
+ | 🩺 **Console Logging** | JS errors, warnings, and uncaught exceptions captured per page |
102
+
103
+ ---
104
+
105
+ ## ⚡ Quick Start
47
106
 
48
107
  ### Install
49
108
 
@@ -55,40 +114,137 @@ Verify:
55
114
 
56
115
  ```bash
57
116
  context-graph --version
58
- # Context Graph v0.3.0
59
117
  ```
60
118
 
61
- ### Capture Your First Page (2 minutes)
119
+ ### Capture Your First Page
62
120
 
63
121
  ```bash
64
- # 1. Start a capture session
122
+ # Start a capture session (browser will open)
65
123
  context-graph --mode browser --url https://your-app.com
66
124
 
67
- # 2. Navigate through the app — every page you visit is captured
68
- # 3. Press Ctrl+C when done
125
+ # Navigate freely — every page you visit is captured automatically
126
+ # Press Ctrl+C when done
127
+ ```
128
+
129
+ ### Generate an AI Context Bundle
69
130
 
70
- # 4. Inspect results
71
- cat context-graph-output/global_manifest.json
131
+ ```bash
132
+ # After capture, bundle everything into one LLM-ready file
133
+ context-graph --export-bundle
134
+
135
+ # → context-graph-output/bundles/ai_context_bundle.md
72
136
  ```
73
137
 
138
+ Paste `ai_context_bundle.md` into Copilot Chat, Cursor, or Claude to immediately generate tests.
139
+
74
140
  ---
75
141
 
76
- ## Key Features
142
+ ## 🗺️ Architecture
77
143
 
78
- | Feature | Description |
144
+ ```
145
+ CLI (Commander.js + Inquirer.js)
146
+ └── RuntimeController
147
+ ├── BrowserAdapter Playwright lifecycle, event hooks
148
+ ├── CaptureEngine
149
+ │ ├── DOMAnalyzer Sanitise + Shadow DOM serialisation
150
+ │ ├── A11yExtractor 3-strategy: Playwright → CDP → DOM
151
+ │ ├── LocatorGenerator Multi-strategy selector ranking
152
+ │ ├── NetworkLogger HTTP interception (WeakMap timing)
153
+ │ ├── ScreenshotCapturer Full-page + element screenshots
154
+ │ └── SecurityRedactor PII / credential / URL param redaction
155
+ ├── NetworkPatternAnalyzer API surface documentation
156
+ ├── AIContextBundler Single-file LLM export
157
+ ├── ComponentsRegistry Cross-page UI pattern tracking
158
+ └── StorageEngine Filesystem persistence + statistics
159
+ ```
160
+
161
+ ---
162
+
163
+ ## 📁 What You Get
164
+
165
+ For each captured page, ContextGraph saves a self-contained directory:
166
+
167
+ ```
168
+ context-graph-output/
169
+ ├── global_manifest.json ← Master index of all captures
170
+ ├── bundles/
171
+ │ └── ai_context_bundle.md ← Ready-to-paste LLM context
172
+ ├── <domain>/
173
+ │ ├── api_inventory.json ← Structured API surface docs
174
+ │ ├── components_registry.json ← Cross-page UI patterns
175
+ │ ├── network/
176
+ │ │ └── traffic_log.jsonl ← HTTP traffic (redacted)
177
+ │ ├── user_interactions.json ← Recorder mode interactions
178
+ │ └── pages/
179
+ │ └── <page-name>/
180
+ │ ├── metadata.json ← URL, title, timing, viewport
181
+ │ ├── DOM ← Beautified, sanitised HTML
182
+ │ ├── a11y_tree.json ← Full ARIA hierarchy
183
+ │ ├── locators.json ← Ranked Playwright selectors ⭐
184
+ │ ├── frames.json ← iframe + Shadow DOM structure
185
+ │ ├── console_errors.json ← JS errors & warnings
186
+ │ ├── screenshot_manifest.json← Screenshot paths + metadata
187
+ │ └── screenshots/
188
+ │ └── screenshot.png ← Full-page capture
189
+ └── scripts/
190
+ └── <domain>.spec.ts ← Recorder mode output
191
+ ```
192
+
193
+ ### File Reference
194
+
195
+ | File | Purpose |
79
196
  |---|---|
80
- | 🎯 **Guided Capture** | Captures only what you navigate no autonomous crawling |
81
- | 🧹 **Clean DOM Output** | Scripts, event handlers, and noise stripped before saving |
82
- | 🔑 **Smart Locators** | 5+ selector strategies per element, ranked by resilience |
83
- | **Accessibility Tree** | Full ARIA/role hierarchy for semantic understanding |
84
- | 🌐 **Network Logging** | All HTTP traffic captured with automatic PII redaction |
85
- | 🔒 **Security by Design** | Credentials, tokens, PII never touch the filesystem |
86
- | 🧩 **Component Registry** | Tracks reusable UI patterns across captured pages |
87
- | 📦 **100% Offline** | Zero cloud dependencies, zero telemetry, runs inside enterprise perimeter |
197
+ | `metadata.json` | URL, page title, timing metrics, performance counters |
198
+ | `DOM` | Sanitised HTML scripts removed, Shadow DOM inlined |
199
+ | `a11y_tree.json` | Full ARIA tree the most semantically dense representation |
200
+ | `locators.json` | 5+ selector strategies per element, ranked by resilience |
201
+ | `api_inventory.json` | All observed API endpoints with normalised path params |
202
+ | `ai_context_bundle.md` | Single-file LLM export of the entire session |
88
203
 
89
204
  ---
90
205
 
91
- ## Operating Modes
206
+ ## 🤖 AI Integration
207
+
208
+ ### The 3-Step Workflow
209
+
210
+ ```bash
211
+ # 1. Capture your application (you drive, ContextGraph records)
212
+ context-graph --mode browser --url https://app.example.com
213
+
214
+ # 2. Bundle everything for your AI agent
215
+ context-graph --export-bundle
216
+
217
+ # 3. Open your AI IDE, paste the bundle, and ask for tests
218
+ ```
219
+
220
+ ### Example Prompt (after pasting the bundle)
221
+
222
+ ```
223
+ I am testing the app shown in this session context.
224
+
225
+ Using ONLY the locators from the "Interactive Elements" tables above,
226
+ generate Playwright TypeScript tests that:
227
+ 1. Navigate to the login page and log in with valid credentials
228
+ 2. Assert the dashboard renders correctly
229
+ 3. Test the shopping cart add/remove flow
230
+ 4. Cover the checkout form submission
231
+
232
+ Use test.describe() groups per page. Include assertions for
233
+ visible elements and navigation outcomes.
234
+ ```
235
+
236
+ ### What to Feed Your AI Agent
237
+
238
+ | File | When to Include |
239
+ |---|---|
240
+ | `ai_context_bundle.md` | **Always** — the complete single-file export |
241
+ | `locators.json` | When you need precise selector details |
242
+ | `api_inventory.json` | When generating API integration tests |
243
+ | `a11y_tree.json` | When generating accessibility tests |
244
+
245
+ ---
246
+
247
+ ## 🚀 Operating Modes
92
248
 
93
249
  ### Browser Mode — Passive Observer
94
250
 
@@ -98,88 +254,292 @@ Best for: understanding app structure, feeding AI with full UI context.
98
254
  context-graph --mode browser --url https://app.example.com
99
255
  ```
100
256
 
257
+ Automatically captures on every page navigation: DOM, A11y tree, smart locators, network traffic, screenshots, and console errors.
258
+
101
259
  ### Recorder Mode — Action Capture
102
260
 
103
261
  Best for: converting manual test walkthroughs into replayable scripts.
104
262
 
105
263
  ```bash
106
264
  context-graph --mode recorder --url https://app.example.com
265
+
266
+ # Optionally replay the recording to capture full artifacts too:
267
+ context-graph --mode recorder --url https://app.example.com --recorder-capture
107
268
  ```
108
269
 
109
270
  ---
110
271
 
111
- ## What You Get
272
+ ## ⚙️ Configuration
273
+
274
+ Create a `context-graph.config.json` file in your project root:
275
+
276
+ ```json
277
+ {
278
+ "browser": {
279
+ "channel": "msedge",
280
+ "headless": false,
281
+ "viewport": { "width": 1920, "height": 1080 },
282
+ "slowMo": 0
283
+ },
284
+ "capture": {
285
+ "screenshots": {
286
+ "enabled": true,
287
+ "fullPage": true,
288
+ "elementTargeting": false
289
+ },
290
+ "network": {
291
+ "enabled": true,
292
+ "captureHeaders": true,
293
+ "captureBody": false
294
+ },
295
+ "accessibility": {
296
+ "enabled": true,
297
+ "includeHidden": false
298
+ },
299
+ "components": {
300
+ "enabled": true,
301
+ "minOccurrences": 1
302
+ },
303
+ "forceCapture": false
304
+ },
305
+ "security": {
306
+ "redactPatterns": ["jwt", "bearer", "creditcard", "ssn", "email", "api_key"],
307
+ "redactHeaders": ["authorization", "cookie", "set-cookie", "x-api-key"],
308
+ "customPatterns": [
309
+ {
310
+ "name": "employee_id",
311
+ "pattern": "EMP-\\d{6}",
312
+ "replacement": "[REDACTED:EMP_ID]",
313
+ "severity": "high"
314
+ }
315
+ ]
316
+ },
317
+ "storage": {
318
+ "outputDir": "./context-graph-output",
319
+ "prettyJson": true
320
+ }
321
+ }
322
+ ```
323
+
324
+ Run with config:
325
+
326
+ ```bash
327
+ context-graph --config ./context-graph.config.json --mode browser
328
+ ```
112
329
 
113
- For each captured page, ContextGraph generates:
330
+ ### Configuration Reference
114
331
 
115
- - **Sanitized DOM** - Clean HTML with scripts removed
116
- - **Accessibility Tree** - Full ARIA hierarchy and semantic structure
117
- - **Smart Locators** - Ranked Playwright selectors (Role → TestID → Label → Text)
118
- - **Network Log** - HTTP traffic with automatic PII redaction
119
- - **Screenshots** - Full-page visual captures
120
- - **Component Registry** - Cross-page UI pattern tracking
332
+ <details>
333
+ <summary><strong>Browser options</strong></summary>
121
334
 
122
- ---
335
+ | Option | Type | Default | Description |
336
+ |---|---|---|---|
337
+ | `channel` | `msedge \| chromium \| firefox` | `msedge` | Browser engine |
338
+ | `headless` | `boolean` | `false` | Run without visible UI |
339
+ | `viewport.width` | `number` | `1920` | Browser width |
340
+ | `viewport.height` | `number` | `1080` | Browser height |
341
+ | `slowMo` | `number` | `0` | Slow motion delay (ms) |
123
342
 
124
- ## Feeding Output to an AI Agent
343
+ </details>
125
344
 
126
- ### What to Give the AI
345
+ <details>
346
+ <summary><strong>Capture options</strong></summary>
127
347
 
128
- For test generation, provide the AI these files from a single captured page:
348
+ | Option | Type | Default | Description |
349
+ |---|---|---|---|
350
+ | `screenshots.enabled` | `boolean` | `true` | Capture full-page screenshots |
351
+ | `screenshots.fullPage` | `boolean` | `true` | Include off-viewport content |
352
+ | `screenshots.elementTargeting` | `boolean` | `false` | Also capture key element screenshots |
353
+ | `network.captureBody` | `boolean` | `false` | Include response body (JSON/text only) |
354
+ | `accessibility.includeHidden` | `boolean` | `false` | Include aria-hidden elements |
355
+ | `forceCapture` | `boolean` | `false` | Re-capture even if content hash matches |
129
356
 
130
- | File | Why it Matters |
131
- |---|---|
132
- | `metadata.json` | URL, page title, timing context |
133
- | `a11y_tree.json` | Semantic structure — what the page *means* |
134
- | `locators.json` | Ready-to-use, ranked Playwright selectors |
135
- | `dom_snapshot.html` | Full structural HTML if deep context is needed |
136
- | `network/traffic_log.jsonl` | What API calls the page makes |
357
+ </details>
358
+
359
+ <details>
360
+ <summary><strong>Security options</strong></summary>
361
+
362
+ **Built-in redaction patterns:** `jwt`, `bearer`, `creditcard`, `ssn`, `email`, `phone_number`, `api_key`, `aws_key`
363
+
364
+ **Always-redacted headers:** `authorization`, `cookie`, `set-cookie`, `x-api-key`, `x-auth-token`, `x-csrf-token`, `x-access-token`, `x-refresh-token`, `proxy-authorization`
365
+
366
+ **URL query parameters:** `token`, `api_key`, `auth`, `secret`, `password`, `session`, `code`, `client_secret`, and more — values are redacted before any disk write.
137
367
 
138
- ### Example Prompt Structure
368
+ </details>
139
369
 
370
+ ---
371
+
372
+ ## 🖥️ CLI Reference
373
+
374
+ ```
375
+ context-graph [startUrl] [options]
376
+
377
+ Options:
378
+ -m, --mode <type> browser | recorder (required)
379
+ -u, --url <url> Starting URL
380
+ -o, --output <path> Output directory [default: ./context-graph-output]
381
+ -c, --config <path> Config file path
382
+ -v, --viewport <WxH> Viewport size [default: 1920x1080]
383
+ --headless Run headless (no visible browser)
384
+ --slow-mo <ms> Slow motion delay in ms
385
+ --no-screenshots Disable screenshot capture
386
+ --no-network Disable network logging
387
+ --recorder-capture (Recorder) Replay script to capture full artifacts
388
+ --export-bundle Generate AI context bundle after capture
389
+ --force-capture Re-capture already-visited pages
390
+ --verbose Enable debug logging
391
+ --version Show version
392
+ --help Show help
140
393
  ```
141
- I am testing the following web page:
142
- URL: https://app.example.com/login
143
394
 
144
- Here is the accessibility tree:
145
- [paste a11y_tree.json]
395
+ ---
146
396
 
147
- Here are the available locators:
148
- [paste locators.json]
397
+ ## 🔒 Security Model
149
398
 
150
- Here is the API traffic observed:
151
- [paste relevant entries from traffic_log.jsonl]
399
+ ContextGraph enforces a multi-layer redaction pipeline — **all redaction happens before any disk write**. There is no "raw then redact" staging.
152
400
 
153
- Generate a Playwright test that:
154
- 1. Navigates to the login page
155
- 2. Enters valid credentials
156
- 3. Asserts the dashboard is shown
157
401
  ```
402
+ Raw Data
403
+ ↓ 1. Header stripping (authorization, cookie, x-api-key, etc.)
404
+ ↓ 2. URL sanitisation (sensitive query params: ?token=, ?api_key=)
405
+ ↓ 3. Pattern matching (JWT, Bearer, credit cards, SSNs, emails, AWS keys)
406
+ ↓ 4. Key-based redaction (object properties with sensitive names)
407
+ ↓ 5. Custom rules (user-defined patterns from config)
408
+
409
+ Redacted Data → Audit Log → Filesystem Write
410
+ ```
411
+
412
+ **Security invariants (hardcoded, cannot be disabled):**
413
+ - `<script>` content is always stripped from DOM snapshots
414
+ - `type="password"` input values are always replaced with `[REDACTED]`
415
+ - `authorization`, `cookie`, and `set-cookie` headers are always removed
416
+ - Zero outbound connections, zero telemetry, zero update checks
417
+
418
+ Every redaction event is logged to `logs/redaction_audit.jsonl` for compliance review.
158
419
 
159
420
  ---
160
421
 
161
- ## Documentation
422
+ ## 🏢 Enterprise STLC Patterns
423
+
424
+ ### Pattern A — AI-Assisted Test Generation
425
+
426
+ ```bash
427
+ context-graph --mode browser --url https://app.example.com
428
+ context-graph --export-bundle
429
+ # → Paste ai_context_bundle.md into Copilot Chat → get .spec.ts tests
430
+ ```
431
+
432
+ ### Pattern B — Regression Detection Between Releases
433
+
434
+ ```bash
435
+ # Capture baseline before release
436
+ context-graph --mode browser --url https://staging.example.com
437
+ mv context-graph-output context-graph-baseline
438
+
439
+ # Deploy release candidate, then capture again
440
+ context-graph --mode browser --url https://staging.example.com
441
+
442
+ # Compare the two captures to find locator drift
443
+ # Elements whose best locator strategy changed = tests likely to break
444
+ ```
445
+
446
+ ### Pattern C — Undocumented App Onboarding
447
+
448
+ ```bash
449
+ # Capture 1–2 hours of navigation through an unfamiliar enterprise app
450
+ context-graph --mode browser --url https://internal-erp.corp.com
451
+
452
+ # Generate API inventory — no Swagger/OpenAPI docs needed
453
+ # api_inventory.json shows every endpoint, method, and status code observed
454
+ ```
455
+
456
+ ### Pattern D — Manual Test Script Conversion
457
+
458
+ ```bash
459
+ # Follow your manual test script step-by-step
460
+ context-graph --mode recorder --url https://app.example.com --recorder-capture
162
461
 
163
- 📖 **[Complete User Guide](docs/USER_GUIDE.md)** - Advanced configuration, CLI reference, troubleshooting, and architecture details.
462
+ # Output: <domain>.spec.ts with your steps as Playwright actions
463
+ # Add assertions, or ask AI to add them given the a11y tree context
464
+ ```
164
465
 
165
466
  ---
166
467
 
167
- ## Installation
468
+ ## 🛠️ Development
168
469
 
169
470
  ```bash
170
- npm install -g @shadowcoderr/context-graph
471
+ # Clone and install
472
+ git clone https://github.com/shadowcoderr/ContextGraph
473
+ cd ContextGraph
474
+ npm install
475
+
476
+ # Build
477
+ npm run build
478
+
479
+ # Run in dev mode
480
+ npm run dev -- --mode browser --url https://example.com
481
+
482
+ # Unit tests (Jest)
483
+ npm test
484
+
485
+ # Integration tests (Playwright)
486
+ npm run test:playwright
487
+
488
+ # Lint
489
+ npm run lint
171
490
  ```
172
491
 
492
+ ### Module Status
493
+
494
+ | Module | Status | Notes |
495
+ |---|---|---|
496
+ | CLI | ✅ Stable | Interactive wizard + full CLI flags |
497
+ | Browser Mode | ✅ Stable | Auto-capture on navigation + SPA history API |
498
+ | Recorder Mode | ✅ Stable | Codegen integration + artifact replay |
499
+ | DOM Analyzer | ✅ Stable | Script removal + Shadow DOM serialisation |
500
+ | A11y Extractor | ✅ Stable | 3-strategy: Playwright → CDP → DOM |
501
+ | Locator Generator | ✅ Stable | 6-strategy ranking + uniqueness checks |
502
+ | Network Logger | ✅ Stable | WeakMap timing, requestfailed, captureBody |
503
+ | Screenshot Capturer | ✅ Stable | Full-page + element-level screenshots |
504
+ | Security Redactor | ✅ Stable | 8 patterns + URL query param redaction |
505
+ | AI Context Bundler | ✅ Stable | Single-file Markdown/JSON LLM export |
506
+ | Network Pattern Analyzer | ✅ Stable | API inventory with path normalisation |
507
+ | Components Registry | ✅ Stable | Cross-page pattern indexing |
508
+ | Shadow DOM Support | 🔄 Partial | Top-level serialisation included |
509
+ | Multi-browser | 🔜 Planned | Edge + Chromium; Firefox beta |
510
+
511
+ ---
512
+
513
+ ## 📖 Documentation
514
+
515
+ Full technical documentation including architecture deep-dive, module reference, all identified issues and their fixes, proposed features, output schema reference, security model, and STLC integration patterns:
516
+
517
+ 📄 **[Complete Technical Documentation](docs/_DOCUMENTATION.md)**
518
+
519
+ 📖 **[User Guide](docs/USER_GUIDE.md)** — Advanced configuration, CLI reference, troubleshooting
520
+
521
+ ---
522
+
523
+ ## 🤝 Contributing & Support
524
+
525
+ 🐛 **[Report Issues](https://github.com/shadowcoderr/ContextGraph/issues)**
526
+
527
+ 💬 **[Discussions](https://github.com/shadowcoderr/ContextGraph/discussions)**
528
+
529
+ 📦 **[npm Package](https://www.npmjs.com/package/@shadowcoderr/context-graph)**
530
+
173
531
  ---
174
532
 
175
- ## License
533
+ ## 📄 License
176
534
 
177
- MIT © Shadow Coderr
535
+ MIT © [Shadow Coderr](https://github.com/shadowcoderr)
178
536
 
179
537
  ---
180
538
 
181
- ## Issues & Support
539
+ <div align="center">
540
+
541
+ **Built for QA engineers who believe AI should work smarter, not just faster.**
182
542
 
183
- 🐛 **[Report Issues](https://github.com/shadowcoderr/ContextGraph/issues)** - Bug reports and feature requests
543
+ *ContextGraph gives your AI the eyes it was missing.*
184
544
 
185
- 💬 **[Discussions](https://github.com/shadowcoderr/ContextGraph/discussions)** - Community support and questions
545
+ </div>
@@ -1,13 +1,27 @@
1
1
  import { Page } from '@playwright/test';
2
2
  import { AccessibilityTree } from '../types/capture';
3
+ /**
4
+ * AccessibilityExtractor — captures the full accessibility tree using three
5
+ * strategies in order of reliability:
6
+ *
7
+ * 1. Playwright's built-in accessibility.snapshot() — the most reliable,
8
+ * cross-browser approach. Configured with interestingOnly: false so every
9
+ * node is returned, not just "interesting" leaf nodes.
10
+ *
11
+ * 2. Chrome DevTools Protocol (CDP) Accessibility.getFullAXTree — lower-level
12
+ * but gives raw browser data when Playwright's API is unavailable.
13
+ *
14
+ * 3. DOM-based construction — pure JavaScript executed inside the page.
15
+ * Works in every environment but misses computed ARIA states.
16
+ */
3
17
  export declare class AccessibilityExtractor {
4
- extract(page: Page, _includeHidden?: boolean): Promise<AccessibilityTree>;
5
- /**
6
- * Transform CDP accessibility tree format to our format
7
- */
18
+ extract(page: Page, includeHidden?: boolean): Promise<AccessibilityTree>;
19
+ private transformPlaywrightSnapshot;
8
20
  private transformCDPSnapshot;
9
21
  /**
10
- * Build accessibility tree from DOM when Playwright accessibility API is unavailable
22
+ * Build an accessibility tree by traversing the live DOM inside the page.
23
+ * This approach works universally but misses computed ARIA states and
24
+ * relationships that only the accessibility engine can resolve.
11
25
  */
12
26
  private buildFromDOM;
13
27
  private transformSnapshot;
@@ -1 +1 @@
1
- {"version":3,"file":"a11y-extractor.d.ts","sourceRoot":"","sources":["../../src/analyzers/a11y-extractor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,qBAAa,sBAAsB;IAC3B,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,cAAc,GAAE,OAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC;IAwCtF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0C5B;;OAEG;YACW,YAAY;IA+C1B,OAAO,CAAC,iBAAiB;CAkB1B"}
1
+ {"version":3,"file":"a11y-extractor.d.ts","sourceRoot":"","sources":["../../src/analyzers/a11y-extractor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;;;;;;;;;GAaG;AACH,qBAAa,sBAAsB;IAC3B,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,GAAE,OAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC;IAoDrF,OAAO,CAAC,2BAA2B;IAyBnC,OAAO,CAAC,oBAAoB;IAsD5B;;;;OAIG;YACW,YAAY;IA0J1B,OAAO,CAAC,iBAAiB;CAsB1B"}