@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.
- package/README.md +439 -88
- package/dist/analyzers/a11y-extractor.d.ts +19 -5
- package/dist/analyzers/a11y-extractor.d.ts.map +1 -1
- package/dist/analyzers/a11y-extractor.js +274 -104
- package/dist/analyzers/a11y-extractor.js.map +1 -1
- package/dist/analyzers/network-logger.d.ts +20 -2
- package/dist/analyzers/network-logger.d.ts.map +1 -1
- package/dist/analyzers/network-logger.js +122 -42
- package/dist/analyzers/network-logger.js.map +1 -1
- package/dist/analyzers/network-patterns.d.ts +73 -0
- package/dist/analyzers/network-patterns.d.ts.map +1 -0
- package/dist/analyzers/network-patterns.js +316 -0
- package/dist/analyzers/network-patterns.js.map +1 -0
- package/dist/analyzers/page-notifier.d.ts +40 -0
- package/dist/analyzers/page-notifier.d.ts.map +1 -0
- package/dist/analyzers/page-notifier.js +198 -0
- package/dist/analyzers/page-notifier.js.map +1 -0
- package/dist/analyzers/screenshot-capturer.d.ts +73 -0
- package/dist/analyzers/screenshot-capturer.d.ts.map +1 -0
- package/dist/analyzers/screenshot-capturer.js +190 -0
- package/dist/analyzers/screenshot-capturer.js.map +1 -0
- package/dist/cli/index.js +15 -6
- package/dist/cli/index.js.map +1 -1
- package/dist/config/defaults.d.ts.map +1 -1
- package/dist/config/defaults.js +3 -1
- package/dist/config/defaults.js.map +1 -1
- package/dist/config/schema.d.ts +8 -3
- package/dist/config/schema.d.ts.map +1 -1
- package/dist/config/schema.js +7 -2
- package/dist/config/schema.js.map +1 -1
- package/dist/core/browser-adapter.d.ts.map +1 -1
- package/dist/core/browser-adapter.js +0 -2
- package/dist/core/browser-adapter.js.map +1 -1
- package/dist/core/capture-engine.d.ts +30 -25
- package/dist/core/capture-engine.d.ts.map +1 -1
- package/dist/core/capture-engine.js +290 -276
- package/dist/core/capture-engine.js.map +1 -1
- package/dist/core/runtime.d.ts +1 -0
- package/dist/core/runtime.d.ts.map +1 -1
- package/dist/core/runtime.js +21 -0
- package/dist/core/runtime.js.map +1 -1
- package/dist/exporters/ai-context-bundler.d.ts +88 -0
- package/dist/exporters/ai-context-bundler.d.ts.map +1 -0
- package/dist/exporters/ai-context-bundler.js +380 -0
- package/dist/exporters/ai-context-bundler.js.map +1 -0
- package/dist/security/redactor.d.ts +16 -0
- package/dist/security/redactor.d.ts.map +1 -1
- package/dist/security/redactor.js +127 -57
- package/dist/security/redactor.js.map +1 -1
- package/dist/storage/engine.d.ts +24 -21
- package/dist/storage/engine.d.ts.map +1 -1
- package/dist/storage/engine.js +208 -175
- package/dist/storage/engine.js.map +1 -1
- package/dist/types/config.d.ts +4 -1
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/notifications.d.ts +37 -0
- package/dist/types/notifications.d.ts.map +1 -0
- package/dist/types/notifications.js +4 -0
- package/dist/types/notifications.js.map +1 -0
- 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
|
-
|
|
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
|
+
[](https://www.npmjs.com/package/@shadowcoderr/context-graph)
|
|
16
|
+
[](https://nodejs.org)
|
|
17
|
+
[](https://www.typescriptlang.org)
|
|
18
|
+
[](https://playwright.dev)
|
|
19
|
+
[](LICENSE)
|
|
20
|
+
[](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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
[](package.json)
|
|
9
|
-
[](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,
|
|
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
|
|
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
|
-
##
|
|
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
|
-
|
|
63
|
+
**♿ Accessibility Tree**
|
|
64
|
+
Three-strategy extraction: Playwright API → CDP → DOM fallback. Full ARIA/role hierarchy.
|
|
43
65
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
|
110
|
+
### Capture Your First Page
|
|
62
111
|
|
|
63
112
|
```bash
|
|
64
|
-
#
|
|
113
|
+
# Start a capture session (browser will open)
|
|
65
114
|
context-graph --mode browser --url https://your-app.com
|
|
66
115
|
|
|
67
|
-
#
|
|
68
|
-
#
|
|
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
|
-
#
|
|
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
|
-
##
|
|
133
|
+
## 🗺️ Architecture
|
|
77
134
|
|
|
78
|
-
|
|
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
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
315
|
+
Run with config:
|
|
114
316
|
|
|
115
|
-
|
|
116
|
-
-
|
|
117
|
-
|
|
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
|
-
|
|
323
|
+
<details>
|
|
324
|
+
<summary><strong>Browser options</strong></summary>
|
|
125
325
|
|
|
126
|
-
|
|
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
|
-
|
|
334
|
+
</details>
|
|
129
335
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
|
134
|
-
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
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
|
-
|
|
361
|
+
---
|
|
362
|
+
|
|
363
|
+
## 🖥️ CLI Reference
|
|
139
364
|
|
|
140
365
|
```
|
|
141
|
-
|
|
142
|
-
|
|
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
|
-
|
|
145
|
-
[paste a11y_tree.json]
|
|
386
|
+
---
|
|
146
387
|
|
|
147
|
-
|
|
148
|
-
[paste locators.json]
|
|
388
|
+
## 🔒 Security Model
|
|
149
389
|
|
|
150
|
-
|
|
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
|
-
##
|
|
413
|
+
## 🏢 Enterprise STLC Patterns
|
|
414
|
+
|
|
415
|
+
### Pattern A — AI-Assisted Test Generation
|
|
162
416
|
|
|
163
|
-
|
|
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
|
-
##
|
|
459
|
+
## 🛠️ Development
|
|
168
460
|
|
|
169
461
|
```bash
|
|
170
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
510
|
+
📖 **[User Guide](docs/USER_GUIDE.md)** — Advanced configuration, CLI reference, troubleshooting
|
|
178
511
|
|
|
179
512
|
---
|
|
180
513
|
|
|
181
|
-
##
|
|
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
|
-
|
|
534
|
+
*ContextGraph gives your AI the eyes it was missing.*
|
|
184
535
|
|
|
185
|
-
|
|
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,
|
|
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
|
|
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;
|
|
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"}
|