@xylentis/testgen 1.1.1 → 1.2.0

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 (29) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/README.md +159 -12
  3. package/dist/checks.js +100 -0
  4. package/dist/cli.js +84 -18
  5. package/dist/editing.js +167 -0
  6. package/dist/generate.js +23 -6
  7. package/dist/generators/index.js +2 -2
  8. package/dist/generators/javascript-body.js +91 -13
  9. package/dist/generators/playwright-go.js +85 -21
  10. package/dist/generators/playwright-ts.js +44 -7
  11. package/dist/generators/selenium-java.js +201 -109
  12. package/dist/generators/selenium-js.js +39 -10
  13. package/dist/generators/test-data.js +171 -0
  14. package/dist/recording.js +43 -2
  15. package/dist/replay.js +268 -0
  16. package/dist/secrets.js +169 -0
  17. package/dist/text.js +28 -0
  18. package/dist/ui/server.js +220 -21
  19. package/dist/vendor/playwright/locatorParser.js +235 -0
  20. package/dist/vendor/playwright/locatorUtils.js +67 -0
  21. package/docs/testgen-ui.png +0 -0
  22. package/package.json +5 -3
  23. package/runtime/playwright-go/testgen_data_test.go +64 -0
  24. package/runtime/playwright-ts/testgen-data.ts +70 -0
  25. package/runtime/selenium-java/TestgenSupport.java +213 -29
  26. package/runtime/selenium-js/testgen-support.js +162 -22
  27. package/ui/app.js +386 -25
  28. package/ui/index.html +19 -3
  29. package/ui/style.css +80 -9
package/ui/style.css CHANGED
@@ -8,6 +8,10 @@
8
8
  --accent: #2d6ae3;
9
9
  --accent-text: #ffffff;
10
10
  --danger: #c93c37;
11
+ --ok: #1a7f37;
12
+ --warn: #9a6700;
13
+ --warn-bg: #fff8c5;
14
+ --fail-bg: #ffebe9;
11
15
  --recording: #d93025;
12
16
  --code-bg: #fbfbfc;
13
17
  --tok-keyword: #8a3ffc;
@@ -30,6 +34,10 @@
30
34
  --accent: #6b9cff;
31
35
  --accent-text: #0d1117;
32
36
  --danger: #f07167;
37
+ --ok: #56d364;
38
+ --warn: #e3b341;
39
+ --warn-bg: #3b2e00;
40
+ --fail-bg: #3d1d1d;
33
41
  --recording: #ff6b5f;
34
42
  --code-bg: #171a20;
35
43
  --tok-keyword: #c792ea;
@@ -43,6 +51,9 @@
43
51
 
44
52
  * { box-sizing: border-box; }
45
53
 
54
+ /* Elements styled with a display of their own stay hidden. */
55
+ [hidden] { display: none !important; }
56
+
46
57
  html, body { height: 100%; }
47
58
 
48
59
  body {
@@ -97,7 +108,8 @@ body.recording .status { color: var(--recording); font-weight: 600; }
97
108
 
98
109
  .options { font-size: 13px; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
99
110
  .options label { display: flex; align-items: center; gap: 6px; }
100
- .options input { width: 160px; padding: 4px 8px; }
111
+ .options input { width: 140px; padding: 4px 8px; }
112
+ .options input[type=checkbox] { width: auto; margin: 0; }
101
113
  .spacer { flex: 1; }
102
114
  .file-button { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text); }
103
115
  .file-button input { display: none; }
@@ -136,20 +148,77 @@ body.recording .status { color: var(--recording); font-weight: 600; }
136
148
  overflow: hidden;
137
149
  }
138
150
 
139
- .steps h2 { margin: 0; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
140
- .count { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--muted); }
141
- .steps ol { margin: 0; padding: 6px 0; overflow: auto; flex: 1; list-style: none; counter-reset: step; }
142
- .steps li { counter-increment: step; display: grid; grid-template-columns: 2.2em 3.6em 1fr; gap: 8px; padding: 4px 12px; font-family: var(--mono); font-size: 12px; }
143
- .steps li::before { content: counter(step); color: var(--muted); text-align: right; }
144
- .steps li .page { color: var(--muted); }
145
- .steps li .text { overflow-wrap: anywhere; }
146
- .steps li:last-child { background: var(--selection); }
151
+ .steps-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); }
152
+ .steps-bar h2 { margin: 0; font-size: 13px; display: flex; gap: 8px; align-items: center; }
153
+ .steps-bar button { padding: 3px 10px; font-size: 13px; }
154
+ .count { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--muted); font-weight: 400; }
155
+ #steps { margin: 0; padding: 6px 0; overflow: auto; flex: 1; list-style: none; counter-reset: step; }
156
+ #steps > li { counter-increment: step; display: grid; grid-template-columns: 2.2em 3.6em 1fr; column-gap: 8px; align-items: start; padding: 4px 8px 4px 12px; font-family: var(--mono); font-size: 12px; position: relative; }
157
+ #steps > li::before { content: counter(step); color: var(--muted); text-align: right; }
158
+ #steps .page { color: var(--muted); }
159
+ #steps .body { overflow-wrap: anywhere; }
160
+ #steps .badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 1px; }
161
+ #steps .badges:empty { display: none; }
162
+ body.recording #steps > li:last-child { background: var(--selection); }
163
+ #steps > li[data-replay="running"] { background: var(--selection); }
164
+ #steps > li[data-replay="failed"] { background: var(--fail-bg); }
165
+ #steps > li.flash { animation: flash 1.2s; }
166
+ @keyframes flash { 30% { background: var(--warn-bg); } }
147
167
  .empty { color: var(--muted); padding: 0 12px; }
148
168
 
169
+ .badge { font-family: var(--font); font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; color: var(--muted); }
170
+ .badge.warning { color: var(--warn); border-color: var(--warn); font-weight: 700; }
171
+ .badge.replay.passed { color: var(--ok); border-color: var(--ok); }
172
+ .badge.replay.failed { color: var(--danger); border-color: var(--danger); font-weight: 700; }
173
+ .badge.replay.running { color: var(--accent); border-color: var(--accent); }
174
+
175
+ /* Edit, move and delete: shown on hover and keyboard focus, always on touch screens. */
176
+ .step-actions { position: absolute; right: 6px; top: 1px; display: none; gap: 2px; background: var(--panel); border-radius: 6px; }
177
+ #steps > li:hover .step-actions, #steps > li:focus-within .step-actions { display: flex; }
178
+ @media (hover: none) { .step-actions { position: static; display: flex; grid-column: 3 / -1; } }
179
+ .step-button { padding: 1px 7px; font-size: 12px; }
180
+ .step-detail { grid-column: 3 / -1; margin: 2px 0 0; color: var(--danger); white-space: pre-wrap; font-size: 11.5px; }
181
+ #steps > li[data-replay="skipped"] .step-detail { color: var(--warn); }
182
+
183
+ .step-editor, .replay-secrets { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-family: var(--font); font-size: 12.5px; }
184
+ .replay-secrets { margin: 8px; }
185
+ .replay-secrets p { margin: 0; color: var(--muted); }
186
+ .step-editor .field, .replay-secrets .field { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
187
+ .step-editor .field:has(input[type=checkbox]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; color: var(--text); }
188
+ .step-editor input:not([type=checkbox]), .step-editor textarea, .replay-secrets input { font-family: var(--mono); font-size: 12px; padding: 4px 8px; color: var(--text); }
189
+ .step-editor textarea { resize: vertical; font: inherit; font-family: var(--mono); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding: 4px 8px; }
190
+ .secret-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
191
+ .secret-field label { display: flex; align-items: center; gap: 6px; }
192
+ .secret-field input[type=text] { flex: 1; min-width: 140px; }
193
+ .editor-buttons { display: flex; gap: 6px; }
194
+ .editor-buttons button { padding: 3px 12px; }
195
+ .editor-error { margin: 0; color: var(--danger); white-space: pre-wrap; }
196
+ .editor-error:empty { display: none; }
197
+
198
+ .replay-result { margin: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
199
+ .replay-result p { margin: 0; }
200
+ .replay-result.passed { border-color: var(--ok); }
201
+ .replay-result.passed .summary { color: var(--ok); font-weight: 600; }
202
+ .replay-result.failed { border-color: var(--danger); }
203
+ .replay-result.failed .summary { color: var(--danger); font-weight: 600; }
204
+ .replay-result button { padding: 3px 10px; font-size: 12.5px; }
205
+ .replay-error { margin: 0; white-space: pre-wrap; font: 11.5px/1.45 var(--mono); max-height: 120px; overflow: auto; }
206
+ .screenshot img { display: block; max-width: 100%; max-height: 180px; border: 1px solid var(--border); border-radius: 4px; }
207
+
208
+ .checks { border-top: 1px solid var(--border); font-size: 12.5px; max-height: 40%; overflow: auto; }
209
+ .checks summary { padding: 8px 12px; cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
210
+ .checks ul { margin: 0; padding: 0 12px 10px 28px; display: flex; flex-direction: column; gap: 4px; }
211
+ .checks li { color: var(--text); }
212
+ .checks li.warning::marker { content: "⚠ "; color: var(--warn); }
213
+ .checks li.info::marker { content: "ℹ "; color: var(--accent); }
214
+ .checks li[tabindex] { cursor: pointer; }
215
+ .checks li[tabindex]:hover { text-decoration: underline; }
216
+
149
217
  .tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
150
218
  .tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); }
151
219
  .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
152
220
  .tabs button small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
221
+ .tabs .tag.warning { font-size: 11px; font-weight: 600; color: var(--warn); border: 1px solid var(--warn); border-radius: 8px; padding: 0 5px; margin-left: 4px; }
153
222
 
154
223
  .file-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
155
224
  .file-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
@@ -157,6 +226,7 @@ body.recording .status { color: var(--recording); font-weight: 600; }
157
226
  .file-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
158
227
  .file-tabs button .tag { color: var(--muted); font-family: var(--font); margin-left: 6px; }
159
228
  .file-bar > button { padding: 3px 10px; font-size: 13px; }
229
+ .file-bar .note { font-size: 12px; color: var(--muted); }
160
230
 
161
231
  .source {
162
232
  flex: 1;
@@ -187,4 +257,5 @@ body.recording .status { color: var(--recording); font-weight: 600; }
187
257
  .record input { flex-basis: 100%; }
188
258
  .record select { flex: 1; }
189
259
  .options input { width: 120px; }
260
+ .options input[type=checkbox] { width: auto; }
190
261
  }