adspecs 0.1.19 → 0.1.21
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/.adspecs/feature.json +16 -16
- package/.adspecs/feature.yml +28 -28
- package/.adspecs/paths.json +17 -17
- package/.adspecs/templates/04-/345/211/215/347/253/257/345/212/237/350/203/275/350/256/276/350/256/241/346/250/241/346/235/277.md +1 -1
- package/.adspecs/templates/05-/345/220/216/347/253/257/344/273/273/345/212/241/346/270/205/345/215/225/346/250/241/346/235/277.md +613 -724
- package/.adspecs/templates/05b-/345/211/215/347/253/257/344/273/273/345/212/241/346/270/205/345/215/225/346/250/241/346/235/277.md +51 -51
- package/.claude-plugin/marketplace.json +23 -23
- package/.claude-plugin/plugin.json +18 -18
- package/.qoder-plugin/plugin.json +31 -31
- package/CLAUDE.md +1 -5
- package/INSTALL.md +3 -3
- package/README.md +395 -395
- package/bin/adspecs.js +129 -129
- package/hooks/commit-queue.js +245 -245
- package/hooks/hooks.json +63 -63
- package/hooks/session-start.js +44 -44
- package/hooks/wiki-queue.js +127 -127
- package/package.json +61 -61
- package/references/ant6-front-standard/index.md +99 -99
- package/references/antd-front-demo/public/mockServiceWorker.js +361 -361
- package/references/ecp-end-standard/index.md +63 -63
- package/references/python-end-standard/01-Python/345/220/216/347/253/257/347/274/226/347/240/201/350/247/204/350/214/203.md +372 -372
- package/references/python-end-standard/02-/346/225/260/346/215/256/345/272/223/350/256/276/350/256/241/344/270/216/344/275/277/347/224/250/350/247/204/350/214/203.md +226 -226
- package/references/python-end-standard/03-Celery/345/274/202/346/255/245/344/273/273/345/212/241/350/247/204/350/214/203.md +237 -237
- package/references/python-end-standard/04-Redis/344/275/277/347/224/250/350/247/204/350/214/203.md +231 -231
- package/scripts/postinstall.js +107 -107
- package/scripts/sync-version.js +105 -105
- package/skills/.claude/.wiki-update-queue +26 -26
- package/skills/adspecs-constitution/SKILL.md +157 -0
- package/skills/adspecs-export-word/SKILL.md +498 -498
- package/skills/adspecs-export-word/references/md-to-docx.js +862 -862
- package/skills/adspecs-export-word/references/package-lock.json +220 -220
- package/skills/adspecs-export-word/references/package.json +10 -10
- package/skills/adspecs-front-prototype/SKILL.md +405 -405
- package/skills/adspecs-front-spec/SKILL.md +4 -4
- package/skills/adspecs-front-tasks/SKILL.md +213 -173
- package/skills/adspecs-plan/SKILL.md +59 -69
- package/skills/adspecs-prd/SKILL.md +13 -5
- package/skills/adspecs-prd-to-demo/SKILL.md +532 -0
- package/skills/adspecs-tasks/SKILL.md +175 -204
- package/skills/adspecs-update-status/SKILL.md +382 -382
- package/skills/adspecs-utest/SKILL.md +107 -116
- package/skills/grill-me/SKILL.md +7 -0
- package/skills/grill-me/agents/openai.yaml +5 -0
- package/skills/playwright-cli/SKILL.md +420 -0
- package/skills/playwright-cli/references/element-attributes.md +23 -0
- package/skills/playwright-cli/references/playwright-tests.md +39 -0
- package/skills/playwright-cli/references/request-mocking.md +87 -0
- package/skills/playwright-cli/references/running-code.md +241 -0
- package/skills/playwright-cli/references/session-management.md +225 -0
- package/skills/playwright-cli/references/storage-state.md +275 -0
- package/skills/playwright-cli/references/test-generation.md +433 -0
- package/skills/playwright-cli/references/tracing.md +139 -0
- package/skills/playwright-cli/references/video-recording.md +143 -0
- package/skills/playwright-trace/SKILL.md +171 -0
- package/skills/project-init/SKILL.md +93 -22
- package/skills/project-init/references/front-demo/.claude/settings.local.json +9 -0
- package/skills/wiki-update/SKILL.md +232 -232
- package/src/commands/doctor.js +197 -197
- package/src/commands/init.js +83 -83
- package/src/commands/plugin.js +165 -165
- package/src/commands/update.js +87 -87
- package/src/lib/area-scanner.js +129 -129
- package/src/lib/copier.js +104 -104
- package/src/lib/dir-utils.js +161 -133
- package/src/lib/json-merge.js +114 -114
- package/src/lib/paths-defaults.js +37 -37
- package/src/lib/prompts.js +428 -347
- package/src/lib/readme-gen.js +143 -143
- package/src/lib/report.js +338 -327
- package/src/lib/scaffolder.js +551 -518
- package/src/lib/short-name.js +36 -36
- package/src/utils.js +80 -80
- package/references/antd-front-demo/.env +0 -15
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# Tracing
|
|
2
|
+
|
|
3
|
+
Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs.
|
|
4
|
+
|
|
5
|
+
## Basic Usage
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# Start trace recording
|
|
9
|
+
playwright-cli tracing-start
|
|
10
|
+
|
|
11
|
+
# Perform actions
|
|
12
|
+
playwright-cli open https://example.com
|
|
13
|
+
playwright-cli click e1
|
|
14
|
+
playwright-cli fill e2 "test"
|
|
15
|
+
|
|
16
|
+
# Stop trace recording
|
|
17
|
+
playwright-cli tracing-stop
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Trace Output Files
|
|
21
|
+
|
|
22
|
+
When you start tracing, Playwright creates a `traces/` directory with several files:
|
|
23
|
+
|
|
24
|
+
### `trace-{timestamp}.trace`
|
|
25
|
+
|
|
26
|
+
**Action log** - The main trace file containing:
|
|
27
|
+
- Every action performed (clicks, fills, navigations)
|
|
28
|
+
- DOM snapshots before and after each action
|
|
29
|
+
- Screenshots at each step
|
|
30
|
+
- Timing information
|
|
31
|
+
- Console messages
|
|
32
|
+
- Source locations
|
|
33
|
+
|
|
34
|
+
### `trace-{timestamp}.network`
|
|
35
|
+
|
|
36
|
+
**Network log** - Complete network activity:
|
|
37
|
+
- All HTTP requests and responses
|
|
38
|
+
- Request headers and bodies
|
|
39
|
+
- Response headers and bodies
|
|
40
|
+
- Timing (DNS, connect, TLS, TTFB, download)
|
|
41
|
+
- Resource sizes
|
|
42
|
+
- Failed requests and errors
|
|
43
|
+
|
|
44
|
+
### `resources/`
|
|
45
|
+
|
|
46
|
+
**Resources directory** - Cached resources:
|
|
47
|
+
- Images, fonts, stylesheets, scripts
|
|
48
|
+
- Response bodies for replay
|
|
49
|
+
- Assets needed to reconstruct page state
|
|
50
|
+
|
|
51
|
+
## What Traces Capture
|
|
52
|
+
|
|
53
|
+
| Category | Details |
|
|
54
|
+
|----------|---------|
|
|
55
|
+
| **Actions** | Clicks, fills, hovers, keyboard input, navigations |
|
|
56
|
+
| **DOM** | Full DOM snapshot before/after each action |
|
|
57
|
+
| **Screenshots** | Visual state at each step |
|
|
58
|
+
| **Network** | All requests, responses, headers, bodies, timing |
|
|
59
|
+
| **Console** | All console.log, warn, error messages |
|
|
60
|
+
| **Timing** | Precise timing for each operation |
|
|
61
|
+
|
|
62
|
+
## Use Cases
|
|
63
|
+
|
|
64
|
+
### Debugging Failed Actions
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
playwright-cli tracing-start
|
|
68
|
+
playwright-cli open https://app.example.com
|
|
69
|
+
|
|
70
|
+
# This click fails - why?
|
|
71
|
+
playwright-cli click e5
|
|
72
|
+
|
|
73
|
+
playwright-cli tracing-stop
|
|
74
|
+
# Open trace to see DOM state when click was attempted
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Analyzing Performance
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
playwright-cli tracing-start
|
|
81
|
+
playwright-cli open https://slow-site.com
|
|
82
|
+
playwright-cli tracing-stop
|
|
83
|
+
|
|
84
|
+
# View network waterfall to identify slow resources
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Capturing Evidence
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
# Record a complete user flow for documentation
|
|
91
|
+
playwright-cli tracing-start
|
|
92
|
+
|
|
93
|
+
playwright-cli open https://app.example.com/checkout
|
|
94
|
+
playwright-cli fill e1 "4111111111111111"
|
|
95
|
+
playwright-cli fill e2 "12/25"
|
|
96
|
+
playwright-cli fill e3 "123"
|
|
97
|
+
playwright-cli click e4
|
|
98
|
+
|
|
99
|
+
playwright-cli tracing-stop
|
|
100
|
+
# Trace shows exact sequence of events
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Trace vs Video vs Screenshot
|
|
104
|
+
|
|
105
|
+
| Feature | Trace | Video | Screenshot |
|
|
106
|
+
|---------|-------|-------|------------|
|
|
107
|
+
| **Format** | .trace file | .webm video | .png/.jpeg image |
|
|
108
|
+
| **DOM inspection** | Yes | No | No |
|
|
109
|
+
| **Network details** | Yes | No | No |
|
|
110
|
+
| **Step-by-step replay** | Yes | Continuous | Single frame |
|
|
111
|
+
| **File size** | Medium | Large | Small |
|
|
112
|
+
| **Best for** | Debugging | Demos | Quick capture |
|
|
113
|
+
|
|
114
|
+
## Best Practices
|
|
115
|
+
|
|
116
|
+
### 1. Start Tracing Before the Problem
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
# Trace the entire flow, not just the failing step
|
|
120
|
+
playwright-cli tracing-start
|
|
121
|
+
playwright-cli open https://example.com
|
|
122
|
+
# ... all steps leading to the issue ...
|
|
123
|
+
playwright-cli tracing-stop
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### 2. Clean Up Old Traces
|
|
127
|
+
|
|
128
|
+
Traces can consume significant disk space:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
# Remove traces older than 7 days
|
|
132
|
+
find .playwright-cli/traces -mtime +7 -delete
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Limitations
|
|
136
|
+
|
|
137
|
+
- Traces add overhead to automation
|
|
138
|
+
- Large traces can consume significant disk space
|
|
139
|
+
- Some dynamic content may not replay perfectly
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# Video Recording
|
|
2
|
+
|
|
3
|
+
Capture browser automation sessions as video for debugging, documentation, or verification. Produces WebM (VP8/VP9 codec).
|
|
4
|
+
|
|
5
|
+
## Basic Recording
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# Open browser first
|
|
9
|
+
playwright-cli open
|
|
10
|
+
|
|
11
|
+
# Start recording
|
|
12
|
+
playwright-cli video-start demo.webm
|
|
13
|
+
|
|
14
|
+
# Add a chapter marker for section transitions
|
|
15
|
+
playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000
|
|
16
|
+
|
|
17
|
+
# Navigate and perform actions
|
|
18
|
+
playwright-cli goto https://example.com
|
|
19
|
+
playwright-cli snapshot
|
|
20
|
+
playwright-cli click e1
|
|
21
|
+
|
|
22
|
+
# Add another chapter
|
|
23
|
+
playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000
|
|
24
|
+
playwright-cli fill e2 "test input"
|
|
25
|
+
|
|
26
|
+
# Stop and save
|
|
27
|
+
playwright-cli video-stop
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Best Practices
|
|
31
|
+
|
|
32
|
+
### 1. Use Descriptive Filenames
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
# Include context in filename
|
|
36
|
+
playwright-cli video-start recordings/login-flow-2024-01-15.webm
|
|
37
|
+
playwright-cli video-start recordings/checkout-test-run-42.webm
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2. Record entire hero scripts.
|
|
41
|
+
|
|
42
|
+
When recording a video for the user or as a proof of work, it is best to create a code snippet and execute it with run-code.
|
|
43
|
+
It allows inserting appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that.
|
|
44
|
+
|
|
45
|
+
1) Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight.
|
|
46
|
+
2) Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses.
|
|
47
|
+
3) Use playwright-cli run-code --filename your-script.js
|
|
48
|
+
|
|
49
|
+
**Important**: Overlays are `pointer-events: none` — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page.
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
async page => {
|
|
53
|
+
await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
|
|
54
|
+
await page.goto('https://demo.playwright.dev/todomvc');
|
|
55
|
+
|
|
56
|
+
// Show a chapter card — blurs the page and shows a dialog.
|
|
57
|
+
// Blocks until duration expires, then auto-removes.
|
|
58
|
+
// Use this for simple use cases, but always feel free to hand-craft your own beautiful
|
|
59
|
+
// overlay via await page.screencast.showOverlay().
|
|
60
|
+
await page.screencast.showChapter('Adding Todo Items', {
|
|
61
|
+
description: 'We will add several items to the todo list.',
|
|
62
|
+
duration: 2000,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Perform action
|
|
66
|
+
await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 });
|
|
67
|
+
await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
|
|
68
|
+
await page.waitForTimeout(1000);
|
|
69
|
+
|
|
70
|
+
// Show next chapter
|
|
71
|
+
await page.screencast.showChapter('Verifying Results', {
|
|
72
|
+
description: 'Checking the item appeared in the list.',
|
|
73
|
+
duration: 2000,
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// Add a sticky annotation that stays while you perform actions.
|
|
77
|
+
// Overlays are pointer-events: none, so they won't block clicks.
|
|
78
|
+
const annotation = await page.screencast.showOverlay(`
|
|
79
|
+
<div style="position: absolute; top: 8px; right: 8px;
|
|
80
|
+
padding: 6px 12px; background: rgba(0,0,0,0.7);
|
|
81
|
+
border-radius: 8px; font-size: 13px; color: white;">
|
|
82
|
+
✓ Item added successfully
|
|
83
|
+
</div>
|
|
84
|
+
`);
|
|
85
|
+
|
|
86
|
+
// Perform more actions while the annotation is visible
|
|
87
|
+
await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 });
|
|
88
|
+
await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
|
|
89
|
+
await page.waitForTimeout(1500);
|
|
90
|
+
|
|
91
|
+
// Remove the annotation when done
|
|
92
|
+
await annotation.dispose();
|
|
93
|
+
|
|
94
|
+
// You can also highlight relevant locators and provide contextual annotations.
|
|
95
|
+
const bounds = await page.getByText('Walk the dog').boundingBox();
|
|
96
|
+
await page.screencast.showOverlay(`
|
|
97
|
+
<div style="position: absolute;
|
|
98
|
+
top: ${bounds.y}px;
|
|
99
|
+
left: ${bounds.x}px;
|
|
100
|
+
width: ${bounds.width}px;
|
|
101
|
+
height: ${bounds.height}px;
|
|
102
|
+
border: 1px solid red;">
|
|
103
|
+
</div>
|
|
104
|
+
<div style="position: absolute;
|
|
105
|
+
top: ${bounds.y + bounds.height + 5}px;
|
|
106
|
+
left: ${bounds.x + bounds.width / 2}px;
|
|
107
|
+
transform: translateX(-50%);
|
|
108
|
+
padding: 6px;
|
|
109
|
+
background: #808080;
|
|
110
|
+
border-radius: 10px;
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
color: white;">Check it out, it is right above this text
|
|
113
|
+
</div>
|
|
114
|
+
`, { duration: 2000 });
|
|
115
|
+
|
|
116
|
+
await page.screencast.stop();
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Embrace creativity, overlays are powerful.
|
|
121
|
+
|
|
122
|
+
### Overlay API Summary
|
|
123
|
+
|
|
124
|
+
| Method | Use Case |
|
|
125
|
+
|--------|----------|
|
|
126
|
+
| `page.screencast.showChapter(title, { description?, duration?, styleSheet? })` | Full-screen chapter card with blurred backdrop — ideal for section transitions |
|
|
127
|
+
| `page.screencast.showOverlay(html, { duration? })` | Custom HTML overlay — use for callouts, labels, highlights |
|
|
128
|
+
| `disposable.dispose()` | Remove a sticky overlay added without duration |
|
|
129
|
+
| `page.screencast.hideOverlays()` / `page.screencast.showOverlays()` | Temporarily hide/show all overlays |
|
|
130
|
+
|
|
131
|
+
## Tracing vs Video
|
|
132
|
+
|
|
133
|
+
| Feature | Video | Tracing |
|
|
134
|
+
|---------|-------|---------|
|
|
135
|
+
| Output | WebM file | Trace file (viewable in Trace Viewer) |
|
|
136
|
+
| Shows | Visual recording | DOM snapshots, network, console, actions |
|
|
137
|
+
| Use case | Demos, documentation | Debugging, analysis |
|
|
138
|
+
| Size | Larger | Smaller |
|
|
139
|
+
|
|
140
|
+
## Limitations
|
|
141
|
+
|
|
142
|
+
- Recording adds slight overhead to automation
|
|
143
|
+
- Large recordings can consume significant disk space
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: playwright-trace
|
|
3
|
+
description: Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots.
|
|
4
|
+
allowed-tools: Bash(npx:*)
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Playwright Trace CLI
|
|
8
|
+
|
|
9
|
+
Inspect `.zip` trace files produced by Playwright tests without opening a browser.
|
|
10
|
+
|
|
11
|
+
## Workflow
|
|
12
|
+
|
|
13
|
+
1. Start with `trace open <trace.zip>` to extract the trace and see its metadata.
|
|
14
|
+
2. Use `trace actions` to see all actions with their action IDs.
|
|
15
|
+
3. Use `trace action <action-id>` to drill into a specific action — see parameters, logs, source location, and available snapshots.
|
|
16
|
+
4. Use `trace requests`, `trace console`, or `trace errors` for cross-cutting views.
|
|
17
|
+
5. Use `trace snapshot <action-id>` to get the DOM snapshot, or run a browser command against it.
|
|
18
|
+
6. Use `trace close` to remove the extracted trace data when done.
|
|
19
|
+
|
|
20
|
+
All commands after `open` operate on the currently opened trace — no need to pass the trace file again. Opening a new trace replaces the previous one.
|
|
21
|
+
|
|
22
|
+
## Commands
|
|
23
|
+
|
|
24
|
+
### Open a trace
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# Extract trace and show metadata: browser, viewport, duration, action/error counts
|
|
28
|
+
npx playwright trace open <trace.zip>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Close a trace
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
# Remove extracted trace data
|
|
35
|
+
npx playwright trace close
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Actions
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
# List all actions as a tree with action IDs and timing
|
|
42
|
+
npx playwright trace actions
|
|
43
|
+
|
|
44
|
+
# Filter by action title (regex, case-insensitive)
|
|
45
|
+
npx playwright trace actions --grep "click"
|
|
46
|
+
|
|
47
|
+
# Only failed actions
|
|
48
|
+
npx playwright trace actions --errors-only
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Action details
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
# Show full details for one action: params, result, logs, source, snapshots
|
|
55
|
+
npx playwright trace action <action-id>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The `action` command displays available snapshot phases (before, input, after) and the exact command to extract them.
|
|
59
|
+
|
|
60
|
+
### Requests
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
# All network requests: method, status, URL, duration, size
|
|
64
|
+
npx playwright trace requests
|
|
65
|
+
|
|
66
|
+
# Filter by URL pattern
|
|
67
|
+
npx playwright trace requests --grep "api"
|
|
68
|
+
|
|
69
|
+
# Filter by HTTP method
|
|
70
|
+
npx playwright trace requests --method POST
|
|
71
|
+
|
|
72
|
+
# Only failed requests (status >= 400)
|
|
73
|
+
npx playwright trace requests --failed
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Request details
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
# Show full details for one request: headers, body, security
|
|
80
|
+
npx playwright trace request <request-id>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Console
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
# All console messages and stdout/stderr
|
|
87
|
+
npx playwright trace console
|
|
88
|
+
|
|
89
|
+
# Only errors
|
|
90
|
+
npx playwright trace console --errors-only
|
|
91
|
+
|
|
92
|
+
# Only browser console (no stdout/stderr)
|
|
93
|
+
npx playwright trace console --browser
|
|
94
|
+
|
|
95
|
+
# Only stdout/stderr (no browser console)
|
|
96
|
+
npx playwright trace console --stdio
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Errors
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
# All errors with stack traces and associated actions
|
|
103
|
+
npx playwright trace errors
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Snapshots
|
|
107
|
+
|
|
108
|
+
The `snapshot` command loads the DOM snapshot for an action into a headless browser and runs a single browser command against it. Without a browser command, it returns the accessibility snapshot.
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
# Get the accessibility snapshot (default)
|
|
112
|
+
npx playwright trace snapshot <action-id>
|
|
113
|
+
|
|
114
|
+
# Use a specific phase
|
|
115
|
+
npx playwright trace snapshot <action-id> --name before
|
|
116
|
+
|
|
117
|
+
# Run eval to query the DOM
|
|
118
|
+
npx playwright trace snapshot <action-id> -- eval "document.title"
|
|
119
|
+
npx playwright trace snapshot <action-id> -- eval "document.querySelector('#error').textContent"
|
|
120
|
+
|
|
121
|
+
# Eval on a specific element ref (from the snapshot)
|
|
122
|
+
npx playwright trace snapshot <action-id> -- eval "el => el.getAttribute('data-testid')" e5
|
|
123
|
+
|
|
124
|
+
# Take a screenshot of the snapshot
|
|
125
|
+
npx playwright trace snapshot <action-id> -- screenshot
|
|
126
|
+
|
|
127
|
+
# Redirect output to a file
|
|
128
|
+
npx playwright trace snapshot <action-id> -- eval "document.body.outerHTML" --filename=page.html
|
|
129
|
+
npx playwright trace snapshot <action-id> -- screenshot --filename=screenshot.png
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Only three browser commands are useful on a frozen snapshot: `snapshot`, `eval`, and `screenshot`.
|
|
133
|
+
|
|
134
|
+
### Attachments
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
# List all trace attachments
|
|
138
|
+
npx playwright trace attachments
|
|
139
|
+
|
|
140
|
+
# Extract an attachment by its number
|
|
141
|
+
npx playwright trace attachment 1
|
|
142
|
+
npx playwright trace attachment 1 -o out.png
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Typical investigation
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# 1. Open the trace and see what's inside
|
|
149
|
+
npx playwright trace open test-results/my-test/trace.zip
|
|
150
|
+
|
|
151
|
+
# 2. What actions ran?
|
|
152
|
+
npx playwright trace actions
|
|
153
|
+
|
|
154
|
+
# 3. Which action failed?
|
|
155
|
+
npx playwright trace actions --errors-only
|
|
156
|
+
|
|
157
|
+
# 4. What went wrong?
|
|
158
|
+
npx playwright trace action 12
|
|
159
|
+
|
|
160
|
+
# 5. What did the page look like at that moment?
|
|
161
|
+
npx playwright trace snapshot 12
|
|
162
|
+
|
|
163
|
+
# 6. Query the DOM for more detail
|
|
164
|
+
npx playwright trace snapshot 12 -- eval "document.querySelector('.error-message').textContent"
|
|
165
|
+
|
|
166
|
+
# 7. Any relevant network failures?
|
|
167
|
+
npx playwright trace requests --failed
|
|
168
|
+
|
|
169
|
+
# 8. Any console errors?
|
|
170
|
+
npx playwright trace console --errors-only
|
|
171
|
+
```
|
|
@@ -302,7 +302,7 @@ questions: [
|
|
|
302
302
|
}
|
|
303
303
|
子目录决策 = {
|
|
304
304
|
conventions_decision: "update" | "skip", # docs 为 skip 且 40-project_conventions/ 有文件时
|
|
305
|
-
templates_decision: "
|
|
305
|
+
templates_decision: { "<文件名>": "replace" | "keep", ... }, # .adspecs 为 skip 且 templates/ 有文件时,逐文件确认
|
|
306
306
|
}
|
|
307
307
|
```
|
|
308
308
|
|
|
@@ -317,7 +317,7 @@ questions: [
|
|
|
317
317
|
}
|
|
318
318
|
子目录决策 = {
|
|
319
319
|
conventions_decision: "update" | "skip", # docs 为 skip 且 40-project_conventions/ 有文件时
|
|
320
|
-
templates_decision: "
|
|
320
|
+
templates_decision: { "<文件名>": "replace" | "keep", ... }, # .adspecs 为 skip 且 templates/ 有文件时,逐文件确认
|
|
321
321
|
}
|
|
322
322
|
```
|
|
323
323
|
|
|
@@ -334,7 +334,7 @@ questions: [
|
|
|
334
334
|
}
|
|
335
335
|
子目录决策 = {
|
|
336
336
|
conventions_decision: "update" | "skip", # docs 为 skip 且 40-project_conventions/ 有文件时
|
|
337
|
-
templates_decision: "
|
|
337
|
+
templates_decision: { "<文件名>": "replace" | "keep", ... }, # .adspecs 为 skip 且 templates/ 有文件时,逐文件确认
|
|
338
338
|
}
|
|
339
339
|
```
|
|
340
340
|
|
|
@@ -351,7 +351,7 @@ questions: [
|
|
|
351
351
|
}
|
|
352
352
|
子目录决策 = {
|
|
353
353
|
conventions_decision: "update" | "skip", # docs 为 skip 且 40-project_conventions/ 有文件时
|
|
354
|
-
templates_decision: "
|
|
354
|
+
templates_decision: { "<文件名>": "replace" | "keep", ... }, # .adspecs 为 skip 且 templates/ 有文件时,逐文件确认
|
|
355
355
|
}
|
|
356
356
|
固定技术栈:
|
|
357
357
|
FRONT_DEMO_SOURCE = "antd-front-demo" # Ant Design React(无需询问用户)
|
|
@@ -421,27 +421,79 @@ questions: [
|
|
|
421
421
|
- 记录子决策:`conventions_decision` = `"update"` | `"skip"`
|
|
422
422
|
- 如果 `40-project_conventions/` 不存在或仅包含空目录 → 跳过此检查,`conventions_decision` = `"skip"`
|
|
423
423
|
|
|
424
|
-
- **子目录更新检查(.adspecs/templates/)**:当 `.adspecs/` 已存在且 `.adspecs` 决策为 `skip`,且 `.adspecs/templates/`
|
|
425
|
-
|
|
424
|
+
- **子目录更新检查(.adspecs/templates/)**:当 `.adspecs/` 已存在且 `.adspecs` 决策为 `skip`,且 `.adspecs/templates/` 下已包含实际文件时,需**逐文件**询问用户是否替换模板文件(因用户可能在首次初始化后根据项目实际情况修改了模板内容):
|
|
425
|
+
|
|
426
|
+
**步骤 1:扫描目标目录已有模板文件**
|
|
427
|
+
- 列出 `$TARGET/.adspecs/templates/` 下所有 `.md` 文件
|
|
428
|
+
- 同时列出 `$PLUGIN_DIR/.adspecs/templates/` 下所有 `.md` 文件(插件根目录的最新模板)
|
|
429
|
+
- 计算两组文件集合:
|
|
430
|
+
- `existing_files`:目标目录中已有的模板文件名列表
|
|
431
|
+
- `new_files`:插件根目录中存在但目标目录中不存在的模板文件(需要新增)
|
|
432
|
+
- `common_files`:两边都存在的模板文件(需要逐一确认是否替换)
|
|
433
|
+
|
|
434
|
+
**步骤 2:先处理新增文件(无需确认)**
|
|
435
|
+
- 如果 `new_files` 非空 → 直接复制到目标目录,输出:`📦 模板新增:已添加 {N} 个新模板文件:{文件列表}`
|
|
436
|
+
- 如果 `new_files` 为空 → 不输出
|
|
437
|
+
|
|
438
|
+
**步骤 3:逐文件确认(批量询问)**
|
|
439
|
+
- 对 `common_files` 中的每个文件,使用 **AskUserQuestion** 工具批量询问(每次最多 4 个文件,因为 AskUserQuestion 最多支持 4 个问题,需要分多轮询问):
|
|
426
440
|
|
|
427
441
|
```
|
|
442
|
+
# 第 1 轮(文件 1~4)
|
|
428
443
|
questions: [
|
|
429
444
|
{
|
|
430
|
-
question: "
|
|
431
|
-
header: "
|
|
445
|
+
question: "模板文件 {文件名1} 已存在,是否使用最新版本替换?",
|
|
446
|
+
header: "{文件名1}",
|
|
447
|
+
options: [
|
|
448
|
+
{ label: "保留现有", description: "保留当前项目中的版本,不做修改(用户可能已按项目实际情况调整过)" },
|
|
449
|
+
{ label: "替换为最新", description: "使用插件根目录中的最新版本覆盖现有文件" }
|
|
450
|
+
],
|
|
451
|
+
multiSelect: false
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
question: "模板文件 {文件名2} 已存在,是否使用最新版本替换?",
|
|
455
|
+
header: "{文件名2}",
|
|
432
456
|
options: [
|
|
433
|
-
{ label: "
|
|
434
|
-
{ label: "
|
|
457
|
+
{ label: "保留现有", description: "保留当前项目中的版本,不做修改" },
|
|
458
|
+
{ label: "替换为最新", description: "使用插件根目录中的最新版本覆盖现有文件" }
|
|
459
|
+
],
|
|
460
|
+
multiSelect: false
|
|
461
|
+
},
|
|
462
|
+
... # 最多 4 个问题一轮
|
|
463
|
+
]
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
- 如果 `common_files` 数量超过 4 个,需要分多轮调用 AskUserQuestion,每轮最多 4 个文件
|
|
467
|
+
- 每轮询问结束后,将用户选择记录到 `templates_decision` 映射中
|
|
468
|
+
|
|
469
|
+
**步骤 4:提供批量快捷选项(可选)**
|
|
470
|
+
- 在首轮询问前,可先通过 AskUserQuestion 提供一个全局快捷选项:
|
|
471
|
+
|
|
472
|
+
```
|
|
473
|
+
questions: [
|
|
474
|
+
{
|
|
475
|
+
question: ".adspecs/templates/ 目录已存在且包含 {N} 个模板文件,是否需要逐文件确认?(选择"否"将统一保留现有文件)",
|
|
476
|
+
header: "批量确认",
|
|
477
|
+
options: [
|
|
478
|
+
{ label: "逐文件确认", description: "对每个已修改的模板文件逐一询问是否替换(推荐,用户可能已按项目情况调整过模板)" },
|
|
479
|
+
{ label: "全部保留现有", description: "保留所有现有模板文件不做修改(跳过逐文件确认)" },
|
|
480
|
+
{ label: "全部替换为最新", description: "使用插件根目录中的最新版本覆盖所有模板文件" }
|
|
435
481
|
],
|
|
436
482
|
multiSelect: false
|
|
437
483
|
}
|
|
438
484
|
]
|
|
439
485
|
```
|
|
440
486
|
|
|
441
|
-
-
|
|
442
|
-
-
|
|
487
|
+
- 如果用户选择"逐文件确认" → 执行步骤 3 的逐文件询问
|
|
488
|
+
- 如果用户选择"全部保留现有" → `templates_decision` 中所有文件标记为 `"keep"`
|
|
489
|
+
- 如果用户选择"全部替换为最新" → `templates_decision` 中所有文件标记为 `"replace"`
|
|
490
|
+
|
|
491
|
+
**步骤 5:记录子决策**
|
|
492
|
+
- 记录子决策映射:`templates_decision` = `{ "<文件名>": "replace" | "keep", ... }`
|
|
493
|
+
- 其中 `"replace"` 表示使用插件根目录最新版本覆盖,`"keep"` 表示保留目标目录现有版本
|
|
494
|
+
- 如果 `.adspecs/templates/` 不存在或仅包含空目录 → 跳过此检查,`templates_decision` = `{}`(空映射)
|
|
443
495
|
|
|
444
|
-
7. **输出初始化计划摘要**,包含项目信息(项目名称、项目短名称、公司名称、文件密级、项目目录)、初始化模式、前端技术栈(如适用)、每个区域的操作(创建 / 重新创建 / 跳过)、子目录更新决策(40-project_conventions/
|
|
496
|
+
7. **输出初始化计划摘要**,包含项目信息(项目名称、项目短名称、公司名称、文件密级、项目目录)、初始化模式、前端技术栈(如适用)、每个区域的操作(创建 / 重新创建 / 跳过)、子目录更新决策(40-project_conventions/ 的更新/跳过、templates/ 的逐文件确认结果:哪些文件将被替换、哪些将被保留)、feature.json/project.json 属性补全计划以及补充检查结果,等待用户确认后继续执行
|
|
445
497
|
|
|
446
498
|
## 工作流程
|
|
447
499
|
|
|
@@ -862,8 +914,7 @@ find "$TARGET/front-demo" -type f | wc -l
|
|
|
862
914
|
根据区域决策执行:
|
|
863
915
|
|
|
864
916
|
- `.adspecs` 决策为 `skip` → 输出 `⏭ 阶段 6 跳过:.adspecs/ 已存在,保留现有内容`,但需检查以下子决策和属性补全:
|
|
865
|
-
-
|
|
866
|
-
- 如果 `templates_decision` = `"skip"` → 不做额外处理
|
|
917
|
+
- 根据 `templates_decision` 逐文件映射执行模板更新(见下方"模板逐文件更新执行逻辑")
|
|
867
918
|
- 执行 **feature.json 与 project.json 属性补全检查**(见下方)
|
|
868
919
|
- 处理完子决策和属性补全后进入阶段 7
|
|
869
920
|
- `.adspecs` 决策为 `recreate` → 先备份已存在的 `feature.json` 和 `project.json`,然后执行 `rm -rf "$TARGET/.adspecs"`,按下方步骤完整重建,最后恢复备份文件并执行属性补全检查(见下方"feature.json 与 project.json 属性补全")
|
|
@@ -967,13 +1018,33 @@ find "$TARGET/.adspecs" -type f | wc -l
|
|
|
967
1018
|
- 无缺失时:`✅ 阶段 6:feature.json 属性完整,无需补全`
|
|
968
1019
|
- 文件不存在时:`✅ 阶段 6:feature.json 已从 references 创建`
|
|
969
1020
|
|
|
1021
|
+
#### 模板逐文件更新执行逻辑
|
|
1022
|
+
|
|
1023
|
+
当 `.adspecs` 决策为 `skip` 且 `templates_decision` 映射不为空时,按以下方式执行模板文件的逐文件更新:
|
|
1024
|
+
|
|
1025
|
+
1. **新增文件**:对于存在于 `$PLUGIN_DIR/.adspecs/templates/` 但不存在于 `$TARGET/.adspecs/templates/` 的文件,直接复制到目标目录
|
|
1026
|
+
2. **已有文件逐一处理**:对于 `templates_decision` 映射中的每个文件:
|
|
1027
|
+
- `"replace"` → 执行 `cp "$PLUGIN_DIR/.adspecs/templates/{文件名}" "$TARGET/.adspecs/templates/{文件名}"`,用最新版本覆盖
|
|
1028
|
+
- `"keep"` → 保留目标目录中的现有文件,不做任何操作
|
|
1029
|
+
3. **仅复制已标记为 replace 的文件**,不要使用通配符一次性覆盖整个 templates 目录
|
|
1030
|
+
|
|
1031
|
+
```bash
|
|
1032
|
+
# 示例:逐文件复制被标记为 replace 的模板
|
|
1033
|
+
for file in "${REPLACE_FILES[@]}"; do
|
|
1034
|
+
cp "$PLUGIN_DIR/.adspecs/templates/$file" "$TARGET/.adspecs/templates/$file"
|
|
1035
|
+
done
|
|
1036
|
+
|
|
1037
|
+
# 统计实际更新的模板文件数量
|
|
1038
|
+
echo "更新了 ${#REPLACE_FILES[@]} 个模板文件,保留了 ${#KEEP_FILES[@]} 个模板文件"
|
|
1039
|
+
```
|
|
1040
|
+
|
|
970
1041
|
完成后输出:
|
|
971
1042
|
|
|
972
1043
|
- 新建时:`✅ 阶段 6 完成:.adspecs/ 配置与脚本目录已复制({N} 个文件)`
|
|
973
1044
|
- 重建时:`🔄 阶段 6 完成:.adspecs/ 已重新复制({N} 个文件)`
|
|
974
1045
|
- 重建且有文件恢复时:`🔄 阶段 6 完成:.adspecs/ 已重新复制 + 🔧 feature.json/project.json 已恢复并补全属性`
|
|
975
1046
|
- 跳过时:`⏭ 阶段 6 跳过:.adspecs/ 已存在,保留现有内容`
|
|
976
|
-
-
|
|
1047
|
+
- 跳过但部分更新模板时:`⏭ 阶段 6 跳过:.adspecs/ 已存在 + 🔄 templates/ 已部分更新({N} 个文件替换,{M} 个文件保留)`
|
|
977
1048
|
- 跳过但属性补全时:`⏭ 阶段 6 跳过:.adspecs/ 已存在 + 🔧 feature.json/project.json 已补全缺失属性`
|
|
978
1049
|
|
|
979
1050
|
---
|
|
@@ -1101,7 +1172,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1101
1172
|
| 区域 | 状态 | 说明 |
|
|
1102
1173
|
| ------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
|
|
1103
1174
|
| .adspecs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 插件配置、脚本、模板(extensions.yml、feature.json、templates/、scripts/) |
|
|
1104
|
-
| └ templates/ | 🔄
|
|
1175
|
+
| └ templates/ | 🔄 部分更新 / ⏭ 全部跳过 | .adspecs/ 跳过时,逐文件确认结果({N} 个替换,{M} 个保留) |
|
|
1105
1176
|
| └ feature.json | 🔧 已补全 / ✅ 已完整 / ✅ 已创建 | 属性补全检查(已有属性保留,缺失属性补充) |
|
|
1106
1177
|
| docs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 11 个骨架目录,40 仅创建空目录 |
|
|
1107
1178
|
| └ 40-project_conventions/ | 🔄 已更新 / ⏭ 已跳过 | docs/ 跳过时,40 子目录的更新决策 |
|
|
@@ -1114,7 +1185,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1114
1185
|
| 区域 | 状态 | 说明 |
|
|
1115
1186
|
| ------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
|
|
1116
1187
|
| .adspecs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 插件配置、脚本、模板(extensions.yml、feature.json、templates/、scripts/) |
|
|
1117
|
-
| └ templates/ | 🔄
|
|
1188
|
+
| └ templates/ | 🔄 部分更新 / ⏭ 全部跳过 | .adspecs/ 跳过时,逐文件确认结果({N} 个替换,{M} 个保留) |
|
|
1118
1189
|
| └ feature.json | 🔧 已补全 / ✅ 已完整 / ✅ 已创建 | 属性补全检查(已有属性保留,缺失属性补充) |
|
|
1119
1190
|
| docs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 11 个骨架目录 + 40 从 references 复制 |
|
|
1120
1191
|
| └ 40-project_conventions/ | 🔄 已更新 / ⏭ 已跳过 | docs/ 跳过时,40 子目录的更新决策 |
|
|
@@ -1128,7 +1199,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1128
1199
|
| 区域 | 状态 | 说明 |
|
|
1129
1200
|
| ------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
|
|
1130
1201
|
| .adspecs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 插件配置、脚本、模板(extensions.yml、feature.json、templates/、scripts/) |
|
|
1131
|
-
| └ templates/ | 🔄
|
|
1202
|
+
| └ templates/ | 🔄 部分更新 / ⏭ 全部跳过 | .adspecs/ 跳过时,逐文件确认结果({N} 个替换,{M} 个保留) |
|
|
1132
1203
|
| └ feature.json | 🔧 已补全 / ✅ 已完整 / ✅ 已创建 | 属性补全检查(已有属性保留,缺失属性补充) |
|
|
1133
1204
|
| docs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 11 个骨架目录 + 40 从 references 复制 |
|
|
1134
1205
|
| └ 40-project_conventions/ | 🔄 已更新 / ⏭ 已跳过 | docs/ 跳过时,40 子目录的更新决策 |
|
|
@@ -1144,7 +1215,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1144
1215
|
| 区域 | 状态 | 说明 |
|
|
1145
1216
|
| ------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
|
|
1146
1217
|
| .adspecs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 插件配置、脚本、模板(extensions.yml、feature.json、templates/、scripts/) |
|
|
1147
|
-
| └ templates/ | 🔄
|
|
1218
|
+
| └ templates/ | 🔄 部分更新 / ⏭ 全部跳过 | .adspecs/ 跳过时,逐文件确认结果({N} 个替换,{M} 个保留) |
|
|
1148
1219
|
| └ feature.json | 🔧 已补全 / ✅ 已完整 / ✅ 已创建 | 属性补全检查(已有属性保留,缺失属性补充) |
|
|
1149
1220
|
| docs/ | ✅ 已创建 / 🔄 已重建 / ⏭ 已跳过 | 11 个骨架目录 + 40 按 Python+React 技术栈复制前后端规范 |
|
|
1150
1221
|
| └ 40-project_conventions/ | 🔄 已更新 / ⏭ 已跳过 | docs/ 跳过时,40 子目录的更新决策 |
|
|
@@ -1159,7 +1230,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1159
1230
|
|
|
1160
1231
|
- ✅ 已创建:目录原本不存在,新建完成
|
|
1161
1232
|
- 🔄 已重建:目录原本存在,按用户选择删除后重新创建
|
|
1162
|
-
- 🔄 已更新:父目录跳过,但子目录按用户选择使用 references
|
|
1233
|
+
- 🔄 已更新:父目录跳过,但子目录按用户选择使用 references 最新文件覆盖更新(templates/ 支持逐文件确认,部分文件可替换、部分保留)
|
|
1163
1234
|
- 🔧 已补全:已有文件属性与 references 对比后,补充缺失属性(已有属性不覆盖)
|
|
1164
1235
|
- ⏭ 已跳过:目录原本存在,按用户选择保留未动
|
|
1165
1236
|
|
|
@@ -1278,7 +1349,7 @@ mkdir -p "$TARGET/.adspecs"
|
|
|
1278
1349
|
- [ ] service/ 目录已创建/重建/跳过(仅完整/轻量模式)
|
|
1279
1350
|
- [ ] front-demo/ 已从 references 按技术栈选择复制/重建/跳过(经典/完整/轻量模式,排除 node_modules、.git、.vite)
|
|
1280
1351
|
- [ ] .adspecs/ 配置与脚本目录已从插件根目录完整复制/重建/跳过
|
|
1281
|
-
- [ ] .adspecs/templates/
|
|
1352
|
+
- [ ] .adspecs/templates/ 子目录逐文件更新检查已完成(.adspecs/ 跳过且模板目录已包含文件时,已通过 AskUserQuestion 逐文件确认替换/保留决策并按决策执行)
|
|
1282
1353
|
- [ ] feature.json 属性补全检查已完成(recreate/skip 时,已对比 references 初始版本并补全缺失属性,已有属性不覆盖)
|
|
1283
1354
|
- [ ] project.json 属性补全检查已完成(recreate/skip 时,已对比 references 初始版本并补全缺失属性)
|
|
1284
1355
|
- [ ] .adspecs/project.json 项目元数据文件已生成或更新
|