angular-debug-recorder 1.0.1 → 1.0.2
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 +124 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,135 @@
|
|
|
1
|
-
#
|
|
1
|
+
# angular-debug-recorder
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Floating Debug-Panel für Angular-Apps — aufzeichnen, wiedergeben, Cypress-Tests per KI generieren.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Ein einzeiliges Drop-in, das sich als überlagerndes Panel in jede Angular-App einbettet. Klicks, Eingaben und Navigationsschritte werden aufgezeichnet, lassen sich als rrweb-Session abspielen und per Webhook an einen KI-Endpunkt schicken, der daraus fertige Cypress-Tests erzeugt.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project debug-recorder` or else it will be added to the default project in your `angular.json` file.
|
|
7
|
+
---
|
|
9
8
|
|
|
10
|
-
##
|
|
9
|
+
## Installation
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
```bash
|
|
12
|
+
npm install angular-debug-recorder rrweb @rrweb/types
|
|
13
|
+
```
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
### Peer Dependencies
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
| Paket | Version |
|
|
18
|
+
|---|---|
|
|
19
|
+
| `@angular/common` | >= 17 |
|
|
20
|
+
| `@angular/core` | >= 17 |
|
|
21
|
+
| `@angular/forms` | >= 17 |
|
|
22
|
+
| `rrweb` | ^2.0.0-alpha.4 |
|
|
23
|
+
| `@rrweb/types` | ^2.0.0-alpha.20 |
|
|
17
24
|
|
|
18
|
-
|
|
25
|
+
---
|
|
19
26
|
|
|
20
|
-
|
|
27
|
+
## Quick Start
|
|
21
28
|
|
|
22
|
-
|
|
29
|
+
### 1. rrweb-CSS einbinden
|
|
23
30
|
|
|
24
|
-
|
|
31
|
+
In `angular.json` unter `styles`:
|
|
32
|
+
|
|
33
|
+
```json
|
|
34
|
+
"styles": [
|
|
35
|
+
"node_modules/rrweb/dist/replay/rrweb-replay.css"
|
|
36
|
+
]
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. Komponente importieren
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
// app.component.ts
|
|
43
|
+
import { DebugPanelComponent } from 'angular-debug-recorder';
|
|
44
|
+
|
|
45
|
+
@Component({
|
|
46
|
+
standalone: true,
|
|
47
|
+
imports: [DebugPanelComponent],
|
|
48
|
+
template: `
|
|
49
|
+
<router-outlet />
|
|
50
|
+
<app-debug-panel />
|
|
51
|
+
`
|
|
52
|
+
})
|
|
53
|
+
export class AppComponent {}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 3. HttpClient bereitstellen
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
// main.ts
|
|
60
|
+
import { provideHttpClient } from '@angular/common/http';
|
|
61
|
+
|
|
62
|
+
bootstrapApplication(AppComponent, {
|
|
63
|
+
providers: [provideHttpClient()]
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Das war's — das Panel erscheint als FAB-Button unten rechts.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Bedienung
|
|
72
|
+
|
|
73
|
+
| Aktion | Shortcut |
|
|
74
|
+
|---|---|
|
|
75
|
+
| Panel öffnen / schließen | `Ctrl+Shift+D` |
|
|
76
|
+
| Aufzeichnung starten / stoppen | `Ctrl+Shift+R` |
|
|
77
|
+
|
|
78
|
+
Das Panel hat 4 Tabs:
|
|
79
|
+
|
|
80
|
+
- **Aktionen** — Liste aller aufgezeichneten Events
|
|
81
|
+
- **📽️ Replay** — rrweb-Player: Session visuell abspielen
|
|
82
|
+
- **🤖 Test** — KI-generierten Cypress-Test anzeigen & kopieren
|
|
83
|
+
- **Sessions** — Gespeicherte Sessions verwalten
|
|
84
|
+
|
|
85
|
+
### Selektor-Priorität
|
|
86
|
+
|
|
87
|
+
`data-testid` > `data-cy` > `id` > `name` > `class`
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## KI-Konfiguration (Webhook)
|
|
92
|
+
|
|
93
|
+
Das Panel schickt die aufgezeichnete Session per HTTP-POST an eine konfigurierbare URL und erwartet den Cypress-Test als Plain-Text-Antwort.
|
|
94
|
+
|
|
95
|
+
**Request:**
|
|
96
|
+
```
|
|
97
|
+
POST <webhook-url>
|
|
98
|
+
Content-Type: application/json
|
|
99
|
+
|
|
100
|
+
{ /* RecordingSession JSON */ }
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**Response:**
|
|
104
|
+
```
|
|
105
|
+
describe('Recorded session', () => {
|
|
106
|
+
it('should ...', () => {
|
|
107
|
+
cy.visit('/');
|
|
108
|
+
cy.get('[data-testid="btn"]').click();
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Die URL wird im Panel unter ⚙️ Settings eingetragen und in `localStorage` (`debugRecorder_webhookUrl`) gespeichert.
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Exportierte API
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
// Komponenten
|
|
121
|
+
import { DebugPanelComponent } from 'angular-debug-recorder';
|
|
122
|
+
|
|
123
|
+
// Services (optional, für direkte Nutzung)
|
|
124
|
+
import { RecorderService, AiGeneratorService } from 'angular-debug-recorder';
|
|
125
|
+
|
|
126
|
+
// Interfaces
|
|
127
|
+
import { RecordedAction, RecordingSession, GeneratedTest } from 'angular-debug-recorder';
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Requirements
|
|
133
|
+
|
|
134
|
+
- Angular 17+ (Standalone, Signals)
|
|
135
|
+
- Node.js >= 18
|