@shadowcoderr/context-graph 0.3.3 → 0.3.5

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