@xylentis/testgen 1.1.0 → 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 (30) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +189 -14
  3. package/dist/checks.js +100 -0
  4. package/dist/cli.js +93 -22
  5. package/dist/editing.js +167 -0
  6. package/dist/generate.js +25 -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/locator.js +17 -0
  15. package/dist/recording.js +60 -2
  16. package/dist/replay.js +268 -0
  17. package/dist/secrets.js +169 -0
  18. package/dist/text.js +28 -0
  19. package/dist/ui/server.js +220 -21
  20. package/dist/vendor/playwright/locatorParser.js +235 -0
  21. package/dist/vendor/playwright/locatorUtils.js +67 -0
  22. package/docs/testgen-ui.png +0 -0
  23. package/package.json +4 -2
  24. package/runtime/playwright-go/testgen_data_test.go +64 -0
  25. package/runtime/playwright-ts/testgen-data.ts +70 -0
  26. package/runtime/selenium-java/TestgenSupport.java +213 -29
  27. package/runtime/selenium-js/testgen-support.js +162 -22
  28. package/ui/app.js +392 -25
  29. package/ui/index.html +21 -4
  30. package/ui/style.css +81 -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,11 +108,13 @@ 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; }
104
116
  .options .button { padding: 4px 10px; }
117
+ .options .note { color: var(--text); }
105
118
 
106
119
  .error {
107
120
  margin: 12px 16px 0;
@@ -135,20 +148,77 @@ body.recording .status { color: var(--recording); font-weight: 600; }
135
148
  overflow: hidden;
136
149
  }
137
150
 
138
- .steps h2 { margin: 0; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
139
- .count { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--muted); }
140
- .steps ol { margin: 0; padding: 6px 0; overflow: auto; flex: 1; list-style: none; counter-reset: step; }
141
- .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; }
142
- .steps li::before { content: counter(step); color: var(--muted); text-align: right; }
143
- .steps li .page { color: var(--muted); }
144
- .steps li .text { overflow-wrap: anywhere; }
145
- .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); } }
146
167
  .empty { color: var(--muted); padding: 0 12px; }
147
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
+
148
217
  .tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
149
218
  .tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); }
150
219
  .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
151
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; }
152
222
 
153
223
  .file-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
154
224
  .file-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
@@ -156,6 +226,7 @@ body.recording .status { color: var(--recording); font-weight: 600; }
156
226
  .file-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
157
227
  .file-tabs button .tag { color: var(--muted); font-family: var(--font); margin-left: 6px; }
158
228
  .file-bar > button { padding: 3px 10px; font-size: 13px; }
229
+ .file-bar .note { font-size: 12px; color: var(--muted); }
159
230
 
160
231
  .source {
161
232
  flex: 1;
@@ -186,4 +257,5 @@ body.recording .status { color: var(--recording); font-weight: 600; }
186
257
  .record input { flex-basis: 100%; }
187
258
  .record select { flex: 1; }
188
259
  .options input { width: 120px; }
260
+ .options input[type=checkbox] { width: auto; }
189
261
  }