@testrelic/playwright-analytics 1.0.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.
- package/dist/cli.cjs +3 -1
- package/dist/fixture.cjs +189 -15
- package/dist/fixture.cjs.map +1 -1
- package/dist/fixture.js +189 -15
- package/dist/fixture.js.map +1 -1
- package/dist/index.cjs +997 -175
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +993 -171
- package/dist/index.js.map +1 -1
- package/dist/merge.cjs +3 -1
- package/dist/merge.cjs.map +1 -1
- package/dist/merge.js +3 -1
- package/dist/merge.js.map +1 -1
- package/package.json +4 -3
package/dist/index.cjs
CHANGED
|
@@ -28,8 +28,8 @@ module.exports = __toCommonJS(index_exports);
|
|
|
28
28
|
|
|
29
29
|
// src/reporter.ts
|
|
30
30
|
var import_node_crypto = require("crypto");
|
|
31
|
-
var
|
|
32
|
-
var
|
|
31
|
+
var import_node_fs4 = require("fs");
|
|
32
|
+
var import_node_path3 = require("path");
|
|
33
33
|
|
|
34
34
|
// src/config.ts
|
|
35
35
|
var import_core = require("@testrelic/core");
|
|
@@ -59,11 +59,12 @@ function resolveConfig(options) {
|
|
|
59
59
|
const outputPath = target.outputPath;
|
|
60
60
|
target.openReport = options?.openReport ?? true;
|
|
61
61
|
target.htmlReportPath = options?.htmlReportPath ?? outputPath.replace(/\.json$/, ".html");
|
|
62
|
+
target.includeArtifacts = options?.includeArtifacts ?? true;
|
|
62
63
|
return Object.freeze(target);
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
// src/schema.ts
|
|
66
|
-
var SCHEMA_VERSION = "1.
|
|
67
|
+
var SCHEMA_VERSION = "1.2.0";
|
|
67
68
|
|
|
68
69
|
// src/code-extractor.ts
|
|
69
70
|
var import_node_fs = require("fs");
|
|
@@ -164,157 +165,413 @@ function detectCI(env) {
|
|
|
164
165
|
var import_node_fs2 = require("fs");
|
|
165
166
|
var import_node_path = require("path");
|
|
166
167
|
|
|
167
|
-
// src/html-
|
|
168
|
+
// src/html-logo.ts
|
|
168
169
|
var LOGO_SVG = `<svg width="32" height="40" viewBox="0 0 196 247" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
169
170
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 1.08009C2.034 2.66209 -0.130999 7.63009 0.610001 10.5821C0.969001 12.0121 3.021 15.2131 5.17 17.6971C14.375 28.3321 18 39.7791 18 58.2101V71.0001H12.434C1.16501 71.0001 0 73.4641 0 97.3051C0 106.858 0.298003 128.922 0.662003 146.337L1.323 178H33.606C65.786 178 65.897 178.007 68.544 180.284C72.228 183.453 72.244 189.21 68.579 192.877L65.957 195.5L33.479 195.801L1 196.103V204.551V213H24.577H48.154L51.077 215.923C55.007 219.853 55.007 224.147 51.077 228.077L48.154 231H26.469H4.783L5.41901 233.534C5.76901 234.927 7.143 238.527 8.472 241.534L10.89 247H40.945H71L71.006 241.75C71.017 230.748 76.027 221.606 84.697 216.767C97.854 209.424 114.086 213.895 121.323 226.857C123.659 231.041 124.418 233.833 124.789 239.607L125.263 247H155.187H185.11L187.528 241.534C188.857 238.527 190.231 234.927 190.581 233.534L191.217 231H169.531H147.846L144.923 228.077C142.928 226.082 142 224.152 142 222C142 219.848 142.928 217.918 144.923 215.923L147.846 213H171.423H195V204.551V196.103L162.521 195.801L130.043 195.5L127.421 192.877C123.991 189.445 123.835 183.869 127.074 180.421L129.349 178H162.013H194.677L195.338 146.337C195.702 128.922 196 106.858 196 97.3051C196 73.4641 194.835 71.0001 183.566 71.0001H178V58.2101C178 39.6501 181.397 28.7731 190.538 18.0651C195.631 12.0971 196.572 9.00809 194.511 5.02109C192.672 1.46509 190.197 9.12233e-05 186.028 9.12233e-05C179.761 9.12233e-05 168.713 14.8831 163.388 30.5001C160.975 37.5771 160.608 40.3751 160.213 54.7501L159.765 71.0001H150.732H141.7L142.286 53.2501C142.904 34.5511 144.727 24.3761 148.938 16.1211C151.823 10.4671 151.628 5.90109 148.364 2.63609C145 -0.726907 140.105 -0.887909 136.596 2.25009C133.481 5.03609 128.686 17.0811 126.507 27.5921C125.569 32.1191 124.617 43.0901 124.28 53.2501L123.69 71.0001H115.345H107V38.4231V5.84609L104.077 2.92309C102.082 0.928088 100.152 9.12233e-05 98 9.12233e-05C95.848 9.12233e-05 93.918 0.928088 91.923 2.92309L89 5.84609V38.4231V71.0001H80.655H72.31L71.72 53.2501C71.383 43.0901 70.431 32.1191 69.493 27.5921C67.314 17.0811 62.519 5.03609 59.404 2.25009C55.998 -0.795909 51.059 -0.710905 47.646 2.45209C44.221 5.62609 44.191 9.92109 47.539 17.4911C51.71 26.9241 53.007 34.4791 53.676 53.2501L54.31 71.0001H45.272H36.235L35.787 54.7501C35.392 40.3751 35.025 37.5771 32.612 30.5001C27.194 14.6091 16.228 -0.02891 9.787 0.03009C7.979 0.04709 5.712 0.519093 4.75 1.08009ZM42.687 108.974C33.431 112.591 20.036 125.024 18.408 131.512C17.476 135.223 20.677 140.453 28.253 147.599C37.495 156.319 44.191 159.471 53.5 159.485C59.317 159.494 61.645 158.953 67.274 156.289C77.634 151.385 88.987 139.161 88.996 132.9C89.004 127.304 76.787 114.707 66.745 109.956C59.16 106.368 50.285 106.006 42.687 108.974ZM129.255 109.904C119.151 114.768 106.996 127.33 107.004 132.9C107.013 139.108 118.562 151.475 128.939 156.389C134.338 158.945 136.744 159.496 142.521 159.498C152.526 159.501 160.369 155.502 169.771 145.605C180.444 134.368 180.278 130.975 168.486 119.388C160.043 111.094 152.727 107.595 143 107.201C136.364 106.933 134.78 107.244 129.255 109.904ZM48.5 125.922C46.3 126.969 43.152 128.945 41.505 130.314L38.511 132.802L40.504 135.005C41.601 136.216 44.434 138.342 46.8 139.728C52.577 143.114 57.36 142.466 64.009 137.395L68.978 133.606L66.756 131.24C60.944 125.054 54.357 123.135 48.5 125.922ZM138.386 125.063C136.674 125.571 133.375 127.677 131.057 129.743L126.841 133.5L131.901 137.343C138.65 142.468 143.407 143.124 149.2 139.728C151.566 138.342 154.351 136.269 155.389 135.122C157.684 132.587 156.742 131.097 150.58 127.511C145.438 124.519 142.329 123.895 138.386 125.063ZM91.923 162.923C89.043 165.804 89 166.008 89 176.973C89 184.805 89.435 188.941 90.47 190.941C92.356 194.589 96.918 196.273 101.03 194.84C105.82 193.17 107 189.638 107 176.973C107 166.008 106.957 165.804 104.077 162.923C102.082 160.928 100.152 160 98 160C95.848 160 93.918 160.928 91.923 162.923ZM94.5 232.155C91.026 234.055 90 236.229 90 241.691V247H98H106V242.082C106 235.732 105.37 234.242 101.928 232.463C98.591 230.737 97.197 230.679 94.5 232.155Z" fill="url(#paint0_linear_55_11)"/>
|
|
170
171
|
<defs><linearGradient id="paint0_linear_55_11" x1="98" y1="0.000244141" x2="98" y2="247" gradientUnits="userSpaceOnUse">
|
|
171
172
|
<stop stop-color="#03B79C"/><stop offset="0.504808" stop-color="#4EDAA4"/><stop offset="0.865285" stop-color="#84F3AA"/>
|
|
172
173
|
</linearGradient></defs></svg>`;
|
|
174
|
+
|
|
175
|
+
// src/html-css.ts
|
|
173
176
|
var CSS = `
|
|
177
|
+
:root{
|
|
178
|
+
--bg-primary:#ffffff;--bg-secondary:#fafafa;--bg-tertiary:#f3f4f6;--bg-card:#ffffff;
|
|
179
|
+
--bg-code:#171717;--bg-code-text:#d4d4d4;--bg-code-highlight:rgba(239,68,68,.2);
|
|
180
|
+
--text-primary:#171717;--text-secondary:#6b7280;--text-muted:#9ca3af;--text-strong:#374151;
|
|
181
|
+
--border:#e5e7eb;--border-light:#f3f4f6;--border-hover:#d1d5db;
|
|
182
|
+
--accent:#03b79c;--accent-hover:#028a75;--accent-ring:rgba(3,183,156,.2);
|
|
183
|
+
--passed-bg:#d1fae5;--passed-text:#065f46;--passed-border:#bbf7d0;--passed-card-bg:#f0fdf4;--passed-count:#16a34a;
|
|
184
|
+
--failed-bg:#fecaca;--failed-text:#991b1b;--failed-border:#fecaca;--failed-card-bg:#fef2f2;--failed-count:#dc2626;
|
|
185
|
+
--flaky-bg:#fde68a;--flaky-text:#92400e;--flaky-border:#fde68a;--flaky-card-bg:#fffbeb;--flaky-count:#d97706;
|
|
186
|
+
--skipped-bg:#f3f4f6;--skipped-text:#6b7280;--skipped-card-bg:#f9fafb;
|
|
187
|
+
--timedout-bg:#ffedd5;--timedout-text:#9a3412;--timedout-card-bg:#fff7ed;--timedout-count:#ea580c;
|
|
188
|
+
--total-border:#c7d2fe;--total-bg:#eef2ff;--total-count:#4f46e5;
|
|
189
|
+
--ci-bg:#eff6ff;--ci-text:#1d4ed8;--merged-bg:#fef3c7;--merged-text:#92400e;
|
|
190
|
+
--tag-bg:#eff6ff;--tag-text:#1d4ed8;--type-bg:#ede9fe;--type-text:#5b21b6;
|
|
191
|
+
--net-2xx-bg:#d1fae5;--net-2xx-text:#065f46;--net-3xx-bg:#fef3c7;--net-3xx-text:#92400e;
|
|
192
|
+
--net-4xx-bg:#fecaca;--net-4xx-text:#991b1b;--net-5xx-bg:#fecaca;--net-5xx-text:#7f1d1d;
|
|
193
|
+
--net-0-bg:#f3f4f6;--net-0-text:#6b7280;
|
|
194
|
+
--passed-left:#22c55e;--failed-left:#ef4444;
|
|
195
|
+
--failure-msg-bg:#f8f8f8;
|
|
196
|
+
}
|
|
197
|
+
[data-theme="dark"]{
|
|
198
|
+
--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;
|
|
199
|
+
--bg-code:#0f172a;--bg-code-text:#e2e8f0;--bg-code-highlight:rgba(239,68,68,.25);
|
|
200
|
+
--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-strong:#cbd5e1;
|
|
201
|
+
--border:#334155;--border-light:#1e293b;--border-hover:#475569;
|
|
202
|
+
--accent:#2dd4bf;--accent-hover:#5eead4;--accent-ring:rgba(45,212,191,.25);
|
|
203
|
+
--passed-bg:#065f46;--passed-text:#6ee7b7;--passed-border:#064e3b;--passed-card-bg:#022c22;--passed-count:#34d399;
|
|
204
|
+
--failed-bg:#7f1d1d;--failed-text:#fca5a5;--failed-border:#991b1b;--failed-card-bg:#450a0a;--failed-count:#f87171;
|
|
205
|
+
--flaky-bg:#78350f;--flaky-text:#fde68a;--flaky-border:#92400e;--flaky-card-bg:#451a03;--flaky-count:#fbbf24;
|
|
206
|
+
--skipped-bg:#334155;--skipped-text:#94a3b8;--skipped-card-bg:#1e293b;
|
|
207
|
+
--timedout-bg:#7c2d12;--timedout-text:#fed7aa;--timedout-card-bg:#431407;--timedout-count:#fb923c;
|
|
208
|
+
--total-border:#4338ca;--total-bg:#1e1b4b;--total-count:#a5b4fc;
|
|
209
|
+
--ci-bg:#1e3a5f;--ci-text:#93c5fd;--merged-bg:#78350f;--merged-text:#fde68a;
|
|
210
|
+
--tag-bg:#1e3a5f;--tag-text:#93c5fd;--type-bg:#2e1065;--type-text:#c4b5fd;
|
|
211
|
+
--net-2xx-bg:#065f46;--net-2xx-text:#6ee7b7;--net-3xx-bg:#78350f;--net-3xx-text:#fde68a;
|
|
212
|
+
--net-4xx-bg:#7f1d1d;--net-4xx-text:#fca5a5;--net-5xx-bg:#7f1d1d;--net-5xx-text:#fca5a5;
|
|
213
|
+
--net-0-bg:#334155;--net-0-text:#94a3b8;
|
|
214
|
+
--passed-left:#22c55e;--failed-left:#ef4444;
|
|
215
|
+
--failure-msg-bg:#e2e8f0;
|
|
216
|
+
}
|
|
174
217
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
175
218
|
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
176
|
-
color
|
|
219
|
+
color:var(--text-primary);background:var(--bg-primary);line-height:1.6;-webkit-font-smoothing:antialiased;
|
|
220
|
+
transition:background-color .15s ease,color .15s ease}
|
|
177
221
|
.container{max-width:1100px;margin:0 auto;padding:24px 20px}
|
|
178
222
|
/* Header */
|
|
179
223
|
.header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
|
|
180
224
|
.header svg{flex-shrink:0}
|
|
181
|
-
.header h1{font-size:22px;font-weight:700;color
|
|
182
|
-
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color
|
|
225
|
+
.header h1{font-size:22px;font-weight:700;color:var(--text-primary)}
|
|
226
|
+
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--text-secondary);margin-bottom:20px}
|
|
183
227
|
.meta-item{display:flex;align-items:center;gap:4px}
|
|
184
|
-
.meta-label{font-weight:600;color
|
|
228
|
+
.meta-label{font-weight:600;color:var(--text-strong)}
|
|
185
229
|
.run-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
|
|
186
|
-
background
|
|
187
|
-
.ci-badge{display:inline-flex;align-items:center;gap:4px;background
|
|
188
|
-
color
|
|
189
|
-
.merged-badge{background
|
|
230
|
+
background:var(--bg-tertiary);padding:2px 8px;border-radius:4px}
|
|
231
|
+
.ci-badge{display:inline-flex;align-items:center;gap:4px;background:var(--ci-bg);
|
|
232
|
+
color:var(--ci-text);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
|
|
233
|
+
.merged-badge{background:var(--merged-bg);color:var(--merged-text);padding:2px 8px;border-radius:4px;
|
|
190
234
|
font-size:12px;font-weight:500}
|
|
235
|
+
/* Theme Toggle */
|
|
236
|
+
.theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
|
|
237
|
+
border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);
|
|
238
|
+
color:var(--text-secondary);cursor:pointer;margin-left:auto;flex-shrink:0;
|
|
239
|
+
transition:background .15s,border-color .15s,color .15s}
|
|
240
|
+
.theme-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-hover)}
|
|
241
|
+
.theme-toggle svg{width:16px;height:16px}
|
|
191
242
|
/* Summary Cards */
|
|
192
243
|
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:28px}
|
|
193
|
-
.summary-card{border-radius:10px;padding:16px;text-align:center;border:1px solid
|
|
244
|
+
.summary-card{border-radius:10px;padding:16px;text-align:center;border:1px solid var(--border)}
|
|
194
245
|
.summary-card .count{font-size:32px;font-weight:800;line-height:1.1}
|
|
195
|
-
.summary-card .label{font-size:13px;font-weight:500;color
|
|
196
|
-
.card-passed{border-color
|
|
197
|
-
.card-failed{border-color
|
|
198
|
-
.card-flaky{border-color
|
|
199
|
-
.card-skipped{border-color
|
|
200
|
-
.card-total{border-color
|
|
246
|
+
.summary-card .label{font-size:13px;font-weight:500;color:var(--text-secondary);margin-top:2px}
|
|
247
|
+
.card-passed{border-color:var(--passed-border);background:var(--passed-card-bg)}.card-passed .count{color:var(--passed-count)}
|
|
248
|
+
.card-failed{border-color:var(--failed-border);background:var(--failed-card-bg)}.card-failed .count{color:var(--failed-count)}
|
|
249
|
+
.card-flaky{border-color:var(--flaky-border);background:var(--flaky-card-bg)}.card-flaky .count{color:var(--flaky-count)}
|
|
250
|
+
.card-skipped{border-color:var(--border);background:var(--skipped-card-bg)}.card-skipped .count{color:var(--skipped-text)}
|
|
251
|
+
.card-total{border-color:var(--total-border);background:var(--total-bg)}.card-total .count{color:var(--total-count)}
|
|
252
|
+
.card-timedout{border-color:var(--timedout-bg);background:var(--timedout-card-bg)}.card-timedout .count{color:var(--timedout-count)}
|
|
201
253
|
/* Timeline */
|
|
202
254
|
.timeline{display:flex;flex-direction:column;gap:8px}
|
|
203
|
-
.timeline-entry{border:1px solid
|
|
204
|
-
border-left:4px solid
|
|
205
|
-
.timeline-entry:hover{border-color
|
|
206
|
-
.timeline-entry--
|
|
255
|
+
.timeline-entry{border:1px solid var(--border);border-radius:10px;overflow:hidden;
|
|
256
|
+
border-left:4px solid var(--border);transition:border-color .15s}
|
|
257
|
+
.timeline-entry:hover{border-color:var(--border-hover)}
|
|
258
|
+
.timeline-entry--all-passed{border-left-color:var(--passed-left)}
|
|
259
|
+
.timeline-entry--all-passed:hover{border-color:#86efac}
|
|
260
|
+
.timeline-entry--has-failures{border-left-color:var(--failed-left)}
|
|
207
261
|
.timeline-entry--has-failures:hover{border-color:#fca5a5}
|
|
208
262
|
.timeline-header{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
|
|
209
|
-
user-select:none;background
|
|
210
|
-
.timeline-header:hover{background
|
|
211
|
-
.chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s;color
|
|
263
|
+
user-select:none;background:var(--bg-secondary);transition:background .15s}
|
|
264
|
+
.timeline-header:hover{background:var(--bg-tertiary)}
|
|
265
|
+
.chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s;color:var(--text-muted)}
|
|
212
266
|
.timeline-entry.expanded .chevron{transform:rotate(90deg)}
|
|
213
|
-
.timeline-url{font-size:14px;font-weight:600;color
|
|
267
|
+
.timeline-url{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;
|
|
214
268
|
text-overflow:ellipsis;white-space:nowrap;max-width:500px;min-width:0}
|
|
215
269
|
.nav-type-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px;
|
|
216
270
|
white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
|
|
217
|
-
.badge-goto
|
|
218
|
-
.badge-
|
|
219
|
-
.badge-
|
|
220
|
-
.badge-
|
|
271
|
+
.badge-goto{background:#dbeafe;color:#1e40af}
|
|
272
|
+
.badge-navigation{background:#e0e7ff;color:#3730a3}
|
|
273
|
+
.badge-page_load{background:#c7d2fe;color:#312e81}
|
|
274
|
+
.badge-back{background:#cffafe;color:#155e75}
|
|
275
|
+
.badge-forward{background:#a5f3fc;color:#164e63}
|
|
276
|
+
.badge-spa_route{background:#ede9fe;color:#5b21b6}
|
|
277
|
+
.badge-spa_replace{background:#ddd6fe;color:#4c1d95}
|
|
278
|
+
.badge-hash_change{background:#fae8ff;color:#86198f}
|
|
279
|
+
.badge-popstate{background:#f5d0fe;color:#701a75}
|
|
280
|
+
.badge-link_click{background:#fce7f3;color:#9d174d}
|
|
281
|
+
.badge-form_submit{background:#fbcfe8;color:#831843}
|
|
221
282
|
.badge-redirect{background:#ffedd5;color:#9a3412}
|
|
222
283
|
.badge-refresh{background:#e0f2fe;color:#075985}
|
|
223
|
-
.badge-dummy
|
|
224
|
-
.
|
|
284
|
+
.badge-dummy{background:var(--bg-tertiary);color:var(--text-secondary)}
|
|
285
|
+
.badge-fallback{background:var(--border);color:var(--text-strong)}
|
|
286
|
+
.badge-manual_record{background:#fef9c3;color:#854d0e}
|
|
287
|
+
.timeline-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);
|
|
225
288
|
margin-left:auto;flex-shrink:0;white-space:nowrap}
|
|
226
289
|
.spec-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
|
|
227
|
-
color
|
|
228
|
-
.timeline-content{display:none;padding:0 16px 16px;border-top:1px solid
|
|
290
|
+
color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
|
|
291
|
+
.timeline-content{display:none;padding:0 16px 16px;border-top:1px solid var(--border-light)}
|
|
229
292
|
.timeline-entry.expanded .timeline-content{display:block}
|
|
230
293
|
/* Test Cards */
|
|
231
294
|
.tests-section{margin-top:12px}
|
|
232
|
-
.spec-summary{font-size:12px;color
|
|
295
|
+
.spec-summary{font-size:12px;color:var(--text-secondary);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
|
|
233
296
|
.spec-summary span{font-weight:600}
|
|
234
|
-
.spec-passed{color
|
|
235
|
-
.test-card{
|
|
236
|
-
border-bottom:1px solid #f3f4f6}
|
|
297
|
+
.spec-passed{color:var(--passed-count)}.spec-failed{color:var(--failed-count)}.spec-flaky{color:var(--flaky-count)}
|
|
298
|
+
.test-card{padding:8px 0;border-bottom:1px solid var(--border-light)}
|
|
237
299
|
.test-card:last-child{border-bottom:none}
|
|
300
|
+
.test-card-row{display:flex;align-items:flex-start;gap:8px}
|
|
238
301
|
.status-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9999px;
|
|
239
302
|
flex-shrink:0;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
|
|
240
|
-
.status-passed{background
|
|
241
|
-
.status-failed{background
|
|
242
|
-
.status-flaky{background
|
|
303
|
+
.status-passed{background:var(--passed-bg);color:var(--passed-text)}
|
|
304
|
+
.status-failed{background:var(--failed-bg);color:var(--failed-text)}
|
|
305
|
+
.status-flaky{background:var(--flaky-bg);color:var(--flaky-text)}
|
|
306
|
+
.status-skipped{background:var(--skipped-bg);color:var(--skipped-text)}
|
|
307
|
+
.status-timedout{background:var(--timedout-bg);color:var(--timedout-text)}
|
|
308
|
+
.type-badge{background:var(--type-bg);color:var(--type-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
|
|
309
|
+
.flaky-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
|
|
310
|
+
.file-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text-secondary)}
|
|
311
|
+
.suite-name{font-size:11px;color:var(--text-muted)}
|
|
312
|
+
.status-mismatch{font-size:10px;color:var(--failed-count);font-weight:600}
|
|
243
313
|
.test-info{flex:1;min-width:0}
|
|
244
|
-
.test-title{font-size:13px;color
|
|
245
|
-
.test-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:11px;color
|
|
246
|
-
.retry-badge{background
|
|
247
|
-
.tag-badge{background
|
|
248
|
-
.
|
|
314
|
+
.test-title{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
315
|
+
.test-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:11px;color:var(--text-muted)}
|
|
316
|
+
.retry-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
|
|
317
|
+
.tag-badge{background:var(--tag-bg);color:var(--tag-text);padding:1px 5px;border-radius:3px;font-size:10px}
|
|
318
|
+
.meta-prefix{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
|
|
319
|
+
.test-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
|
|
320
|
+
color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
|
|
321
|
+
.network-panel--has-failures{border-color:var(--failed-border)}
|
|
322
|
+
.network-panel--has-failures .network-header{background:var(--failed-card-bg);color:var(--failed-text)}
|
|
323
|
+
.failed-requests-banner{display:flex;align-items:center;gap:6px;padding:8px 12px;
|
|
324
|
+
background:var(--failed-card-bg);color:var(--failed-text);font-size:12px;font-weight:600;border-top:1px solid var(--failed-border)}
|
|
325
|
+
.failed-urls-list{padding:6px 12px;background:var(--failed-card-bg);border-top:1px solid var(--failed-border);font-size:11px;
|
|
326
|
+
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-height:200px;overflow-y:auto}
|
|
327
|
+
.failed-url-item{padding:2px 0;color:var(--failed-text);word-break:break-all}
|
|
328
|
+
.failed-url-status{font-weight:700;margin-right:4px}
|
|
329
|
+
.test-duration{font-size:12px;color:var(--text-muted);flex-shrink:0;margin-top:2px}
|
|
330
|
+
/* Tab Bar */
|
|
331
|
+
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:8px}
|
|
332
|
+
.tab-btn{padding:8px 16px;font-size:12px;font-weight:500;color:var(--text-secondary);background:none;
|
|
333
|
+
border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;
|
|
334
|
+
transition:color .15s,border-color .15s}
|
|
335
|
+
.tab-btn:hover{color:var(--text-strong)}
|
|
336
|
+
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
|
|
337
|
+
.tab-panel{display:none;padding:12px 0}
|
|
338
|
+
.tab-panel.active{display:block}
|
|
339
|
+
.tab-empty-state{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:13px;font-style:italic}
|
|
249
340
|
/* Failure Details */
|
|
250
|
-
.failure-toggle{font-size:12px;color
|
|
341
|
+
.failure-toggle{font-size:12px;color:var(--accent);cursor:pointer;margin-top:4px;
|
|
251
342
|
border:none;background:none;padding:0;text-decoration:underline;font-family:inherit}
|
|
252
|
-
.failure-toggle:hover{color
|
|
343
|
+
.failure-toggle:hover{color:var(--accent-hover)}
|
|
253
344
|
.failure-details{display:none;margin-top:8px;border-radius:8px;overflow:hidden;
|
|
254
|
-
border:1px solid
|
|
345
|
+
border:1px solid var(--border)}
|
|
255
346
|
.failure-details.show{display:block}
|
|
256
|
-
.failure-message{padding:12px;background
|
|
347
|
+
.failure-message{padding:12px;background:var(--bg-code);color:var(--failure-msg-bg);font-size:12px;
|
|
257
348
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
|
|
258
349
|
word-break:break-word;line-height:1.5;overflow-x:auto}
|
|
259
|
-
.code-snippet{background
|
|
350
|
+
.code-snippet{background:var(--bg-code);padding:0;font-size:12px;
|
|
260
351
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
|
|
261
352
|
.code-line{display:flex;padding:0 12px;line-height:1.7}
|
|
262
|
-
.code-line.highlight{background:
|
|
263
|
-
.line-num{color
|
|
353
|
+
.code-line.highlight{background:var(--bg-code-highlight)}
|
|
354
|
+
.line-num{color:var(--text-secondary);min-width:40px;text-align:right;padding-right:12px;
|
|
264
355
|
user-select:none;flex-shrink:0}
|
|
265
|
-
.line-code{color
|
|
266
|
-
.stack-toggle{font-size:11px;color
|
|
267
|
-
border:none;background
|
|
268
|
-
border-top:1px solid
|
|
269
|
-
.stack-toggle:hover{background
|
|
270
|
-
.stack-trace{display:none;padding:12px;background
|
|
356
|
+
.line-code{color:var(--bg-code-text);white-space:pre;overflow-x:auto}
|
|
357
|
+
.stack-toggle{font-size:11px;color:var(--text-secondary);cursor:pointer;padding:8px 12px;
|
|
358
|
+
border:none;background:var(--bg-secondary);width:100%;text-align:left;font-family:inherit;
|
|
359
|
+
border-top:1px solid var(--border)}
|
|
360
|
+
.stack-toggle:hover{background:var(--bg-tertiary);color:var(--text-strong)}
|
|
361
|
+
.stack-trace{display:none;padding:12px;background:var(--bg-secondary);font-size:11px;
|
|
271
362
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
|
|
272
|
-
word-break:break-word;color
|
|
363
|
+
word-break:break-word;color:var(--text-secondary);border-top:1px solid var(--border);max-height:300px;overflow-y:auto}
|
|
273
364
|
.stack-trace.show{display:block}
|
|
274
365
|
/* Network Panel */
|
|
275
|
-
.network-panel{margin-top:16px;border:1px solid
|
|
276
|
-
.network-header{font-size:12px;font-weight:600;color
|
|
277
|
-
background
|
|
366
|
+
.network-panel{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
|
|
367
|
+
.network-header{font-size:12px;font-weight:600;color:var(--text-strong);padding:10px 12px;
|
|
368
|
+
background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
|
|
278
369
|
.network-summary{display:flex;gap:16px;padding:10px 12px;font-size:12px;flex-wrap:wrap}
|
|
279
370
|
.net-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
|
|
280
|
-
.net-stat .val{font-weight:700;font-size:14px;color
|
|
281
|
-
.net-stat .lbl{color
|
|
282
|
-
.net-stat.has-failed .val{color
|
|
283
|
-
.resource-breakdown{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid
|
|
371
|
+
.net-stat .val{font-weight:700;font-size:14px;color:var(--text-primary)}
|
|
372
|
+
.net-stat .lbl{color:var(--text-muted);font-size:11px}
|
|
373
|
+
.net-stat.has-failed .val{color:var(--failed-count)}
|
|
374
|
+
.resource-breakdown{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid var(--border-light)}
|
|
284
375
|
.resource-type{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;
|
|
285
|
-
border-radius:4px;background
|
|
376
|
+
border-radius:4px;background:var(--bg-tertiary);color:var(--text-strong)}
|
|
286
377
|
.resource-type .rt-count{font-weight:700}
|
|
287
378
|
.resource-type--zero{opacity:.45}
|
|
288
379
|
/* Empty State */
|
|
289
|
-
.empty-state{text-align:center;padding:60px 20px;color
|
|
380
|
+
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
|
|
290
381
|
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
|
|
291
382
|
.empty-state p{font-size:15px;font-weight:500}
|
|
292
383
|
/* No-network */
|
|
293
|
-
.no-network{font-size:12px;color
|
|
384
|
+
.no-network{font-size:12px;color:var(--text-muted);padding:10px 12px;font-style:italic}
|
|
294
385
|
/* Section title */
|
|
295
|
-
.section-title{font-size:16px;font-weight:700;color
|
|
386
|
+
.section-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;
|
|
296
387
|
display:flex;align-items:center;gap:8px}
|
|
297
|
-
.section-title::before{content:'';width:4px;height:18px;background
|
|
388
|
+
.section-title::before{content:'';width:4px;height:18px;background:var(--accent);border-radius:2px}
|
|
389
|
+
/* Artifacts Panel */
|
|
390
|
+
.artifacts-panel{margin-top:10px;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border);
|
|
391
|
+
border-radius:8px}
|
|
392
|
+
.artifacts-panel-header{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
|
|
393
|
+
color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
|
|
394
|
+
.artifacts-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
|
|
395
|
+
/* Screenshot */
|
|
396
|
+
.artifact-screenshot-wrap{display:flex;flex-direction:column;gap:4px;margin:8px 0}
|
|
397
|
+
.artifact-thumbnail{width:100%;max-width:100%;height:auto;border-radius:8px;cursor:pointer;
|
|
398
|
+
border:1px solid var(--border);transition:border-color .15s,box-shadow .15s;display:block}
|
|
399
|
+
.artifact-thumbnail:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
|
|
400
|
+
.artifact-label{font-size:10px;color:var(--text-muted);text-align:center}
|
|
401
|
+
/* Video */
|
|
402
|
+
.artifact-video-inline{margin:8px 0}
|
|
403
|
+
.artifact-video-player{display:block;width:100%;max-width:100%;height:auto;border-radius:8px;
|
|
404
|
+
border:1px solid var(--border);background:#000}
|
|
405
|
+
/* Lightbox */
|
|
406
|
+
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;
|
|
407
|
+
display:flex;align-items:center;justify-content:center;cursor:zoom-out}
|
|
408
|
+
.lightbox-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
|
|
409
|
+
.lightbox-close{position:fixed;top:16px;right:16px;z-index:1001;width:36px;height:36px;
|
|
410
|
+
border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;
|
|
411
|
+
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
|
|
412
|
+
.lightbox-close:hover{background:rgba(255,255,255,.3)}
|
|
413
|
+
/* Detailed Network Logs */
|
|
414
|
+
.network-log{margin-top:4px}
|
|
415
|
+
.network-log-summary{display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:8px}
|
|
416
|
+
.net-log-count{font-weight:600;color:var(--text-strong)}
|
|
417
|
+
.net-log-failed{font-weight:600;color:var(--failed-count)}
|
|
418
|
+
.network-entry{border-bottom:1px solid var(--border-light)}
|
|
419
|
+
.network-entry:last-child{border-bottom:none}
|
|
420
|
+
.network-entry--failed{border-left:3px solid var(--failed-count)}
|
|
421
|
+
.network-entry-row{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;
|
|
422
|
+
font-size:12px;transition:background .1s}
|
|
423
|
+
.network-entry-row:hover{background:var(--bg-secondary)}
|
|
424
|
+
.network-entry-row.expanded .net-chevron{transform:rotate(90deg)}
|
|
425
|
+
.net-status-badge{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;
|
|
426
|
+
min-width:36px;text-align:center;flex-shrink:0}
|
|
427
|
+
.net-status-2xx{background:var(--net-2xx-bg);color:var(--net-2xx-text)}
|
|
428
|
+
.net-status-3xx{background:var(--net-3xx-bg);color:var(--net-3xx-text)}
|
|
429
|
+
.net-status-4xx{background:var(--net-4xx-bg);color:var(--net-4xx-text)}
|
|
430
|
+
.net-status-5xx{background:var(--net-5xx-bg);color:var(--net-5xx-text);font-weight:800}
|
|
431
|
+
.net-status-0{background:var(--net-0-bg);color:var(--net-0-text)}
|
|
432
|
+
.net-method{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
|
|
433
|
+
font-size:11px;color:var(--text-strong);flex-shrink:0;min-width:40px}
|
|
434
|
+
.net-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
|
|
435
|
+
color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
|
|
436
|
+
.net-time{font-size:11px;color:var(--text-muted);flex-shrink:0;text-align:right;min-width:48px}
|
|
437
|
+
.net-chevron{flex-shrink:0;color:var(--text-muted);transition:transform .2s}
|
|
438
|
+
.network-entry-details{display:none;padding:8px 0 12px;border-top:1px solid var(--border-light)}
|
|
439
|
+
.network-entry-details.show{display:block}
|
|
440
|
+
.net-section-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
|
|
441
|
+
letter-spacing:.04em;margin:8px 0 4px;padding-top:4px}
|
|
442
|
+
.net-section-title:first-child{margin-top:0}
|
|
443
|
+
.net-headers-table{width:100%;font-size:11px;border-collapse:collapse}
|
|
444
|
+
.net-headers-table td{padding:2px 8px;vertical-align:top;border-bottom:1px solid var(--border-light)}
|
|
445
|
+
.net-header-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;
|
|
446
|
+
color:var(--text-strong);white-space:nowrap;width:180px}
|
|
447
|
+
.net-header-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);
|
|
448
|
+
word-break:break-all}
|
|
449
|
+
.net-truncated-note{font-size:10px;color:var(--flaky-count);font-style:italic;margin-top:2px}
|
|
450
|
+
/* Code Editor */
|
|
451
|
+
.code-editor{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:4px 0}
|
|
452
|
+
.code-editor-toolbar{display:flex;align-items:center;justify-content:space-between;
|
|
453
|
+
padding:4px 8px 4px 12px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);min-height:28px}
|
|
454
|
+
.code-editor-lang{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
455
|
+
color:var(--text-muted);text-transform:lowercase}
|
|
456
|
+
.code-editor-copy{font-size:11px;font-family:inherit;padding:2px 10px;border-radius:4px;
|
|
457
|
+
border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);
|
|
458
|
+
cursor:pointer;transition:background .15s,color .15s,border-color .15s}
|
|
459
|
+
.code-editor-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
|
|
460
|
+
.code-editor-copy.copied{background:var(--passed-bg);color:var(--passed-text);border-color:var(--passed-border)}
|
|
461
|
+
.code-editor-body{display:flex;background:var(--bg-code);max-height:300px;overflow:auto}
|
|
462
|
+
.code-editor-lines{display:flex;flex-direction:column;padding:8px 0;
|
|
463
|
+
border-right:1px solid var(--border);flex-shrink:0;user-select:none;position:sticky;left:0;
|
|
464
|
+
background:var(--bg-code);z-index:1}
|
|
465
|
+
.code-editor-line-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
|
|
466
|
+
color:var(--text-muted);text-align:right;padding:0 10px 0 12px;line-height:1.6;min-width:40px}
|
|
467
|
+
.code-editor-content{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
|
|
468
|
+
color:var(--bg-code-text);padding:8px 12px;margin:0;white-space:pre;line-height:1.6;flex:1;
|
|
469
|
+
overflow-x:visible;tab-size:2}
|
|
470
|
+
.net-binary-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:4px 0}
|
|
471
|
+
.net-empty-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:2px 0}
|
|
472
|
+
.net-error-msg{font-size:12px;color:var(--failed-count);font-weight:600;padding:4px 0;margin-bottom:4px}
|
|
473
|
+
/* Filter Bar */
|
|
474
|
+
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;
|
|
475
|
+
padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px}
|
|
476
|
+
.filter-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
|
477
|
+
.filter-section-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
|
|
478
|
+
letter-spacing:.04em;margin-right:2px}
|
|
479
|
+
.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;
|
|
480
|
+
font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--bg-card);
|
|
481
|
+
color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
|
|
482
|
+
.filter-chip:hover{border-color:var(--accent);color:var(--text-primary)}
|
|
483
|
+
.filter-chip--active{background:var(--accent);color:#fff;border-color:var(--accent)}
|
|
484
|
+
.filter-chip--active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
|
|
485
|
+
.filter-chip--dimmed{opacity:.45}
|
|
486
|
+
.filter-chip-count{font-size:11px;font-weight:600}
|
|
487
|
+
.filter-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
|
|
488
|
+
.filter-clear{padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:500;
|
|
489
|
+
border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
|
|
490
|
+
cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
|
|
491
|
+
.filter-clear:hover{background:var(--failed-bg);color:var(--failed-text);border-color:var(--failed-border)}
|
|
492
|
+
.filter-indicator{font-size:12px;color:var(--text-secondary);font-weight:500}
|
|
493
|
+
.filter-indicator span{font-weight:700;color:var(--text-primary)}
|
|
494
|
+
.filter-hidden{display:none!important}
|
|
495
|
+
.filter-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
|
|
496
|
+
.filter-empty-state p{font-size:14px;margin-bottom:12px}
|
|
497
|
+
.filter-empty-state button{padding:6px 16px;border-radius:9999px;font-size:13px;font-weight:500;
|
|
498
|
+
border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;
|
|
499
|
+
font-family:inherit;transition:background .15s,color .15s}
|
|
500
|
+
.filter-empty-state button:hover{background:var(--accent);color:#fff}
|
|
501
|
+
/* Reduced Motion */
|
|
502
|
+
@media(prefers-reduced-motion:reduce){
|
|
503
|
+
*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
|
|
504
|
+
}
|
|
298
505
|
`;
|
|
299
|
-
var JS = `
|
|
300
|
-
(function(){
|
|
301
|
-
var data=JSON.parse(document.getElementById('report-data').textContent);
|
|
302
506
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
507
|
+
// src/html-js-render.ts
|
|
508
|
+
var JS_RENDER = `
|
|
509
|
+
function esc(s){if(!s)return '';return s.replace(/&/g,'&').replace(/</g,'<')
|
|
510
|
+
.replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''')}
|
|
511
|
+
function stripAnsi(s){return s?s.replace(/\\u001b\\[[0-9;]*m/g,'').replace(/\\x1b\\[[0-9;]*m/g,''):''}
|
|
512
|
+
function fmtDur(ms){if(ms<1000)return Math.round(ms)+'ms';
|
|
513
|
+
if(ms<60000)return (ms/1000).toFixed(1)+'s';
|
|
514
|
+
var m=Math.floor(ms/60000),s=Math.round((ms%60000)/1000);
|
|
515
|
+
return s>0?m+'m '+s+'s':m+'m'}
|
|
516
|
+
function fmtBytes(b){if(b===0)return '0 B';if(b<1024)return b+' B';
|
|
517
|
+
if(b<1048576)return (b/1024).toFixed(1)+' KB';return (b/1048576).toFixed(1)+' MB'}
|
|
518
|
+
function fmtTime(iso){try{return new Date(iso).toLocaleString()}catch(e){return iso}}
|
|
519
|
+
|
|
520
|
+
function renderCodeSnippet(code,failLine){
|
|
521
|
+
var lines=code.split('\\n');
|
|
522
|
+
var out='<div class="code-snippet">';
|
|
523
|
+
for(var k=0;k<lines.length;k++){
|
|
524
|
+
var raw=lines[k];
|
|
525
|
+
var numMatch=raw.match(/^\\s*(>?\\s*)(\\d+)\\s*\\|/);
|
|
526
|
+
var lineNum=numMatch?numMatch[2]:'';
|
|
527
|
+
var isHighlight=raw.trimStart().startsWith('>');
|
|
528
|
+
var codePart=raw.replace(/^\\s*>?\\s*\\d+\\s*\\|/,'');
|
|
529
|
+
out+='<div class="code-line'+(isHighlight?' highlight':'')+'">';
|
|
530
|
+
out+='<span class="line-num">'+esc(lineNum)+'</span>';
|
|
531
|
+
out+='<span class="line-code">'+esc(codePart)+'</span>';
|
|
532
|
+
out+='</div>';
|
|
533
|
+
}
|
|
534
|
+
out+='</div>';
|
|
535
|
+
return out;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
function renderNetwork(stats){
|
|
539
|
+
if(!stats)return '<div class="no-network">No network data captured</div>';
|
|
540
|
+
var hasFailedReqs=stats.failedRequests>0;
|
|
541
|
+
var out='<div class="network-panel'+(hasFailedReqs?' network-panel--has-failures':'')+'">';
|
|
542
|
+
out+='<div class="network-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Network</div>';
|
|
543
|
+
out+='<div class="network-summary">';
|
|
544
|
+
out+='<div class="net-stat"><span class="val">'+stats.totalRequests+'</span><span class="lbl">Requests</span></div>';
|
|
545
|
+
out+='<div class="net-stat'+(hasFailedReqs?' has-failed':'')+'"><span class="val">'+stats.failedRequests+'</span><span class="lbl">Failed</span></div>';
|
|
546
|
+
out+='<div class="net-stat"><span class="val">'+fmtBytes(stats.totalBytes)+'</span><span class="lbl">Transferred</span></div>';
|
|
547
|
+
out+='</div>';
|
|
548
|
+
if(hasFailedReqs){out+='<div class="failed-requests-banner"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01M10.29 3.86l-8.58 14.6A2 2 0 003.44 21h17.12a2 2 0 001.73-2.54l-8.58-14.6a2 2 0 00-3.42 0z"/></svg>'+stats.failedRequests+' network request'+(stats.failedRequests>1?'s':'')+' failed</div>';
|
|
549
|
+
if(stats.failedRequestUrls&&stats.failedRequestUrls.length>0){out+='<div class="failed-urls-list">';for(var fi=0;fi<stats.failedRequestUrls.length;fi++){var furl=stats.failedRequestUrls[fi];var spIdx=furl.indexOf(' ');var fStatus=spIdx>0?furl.substring(0,spIdx):'';var fPath=spIdx>0?furl.substring(spIdx+1):furl;out+='<div class="failed-url-item"><span class="failed-url-status">'+esc(fStatus)+'</span>'+esc(fPath)+'</div>';}out+='</div>';}
|
|
550
|
+
}
|
|
551
|
+
if(stats.byType){
|
|
552
|
+
var types=[['XHR','xhr'],['Document','document'],['Script','script'],['Stylesheet','stylesheet'],['Image','image'],['Font','font'],['Other','other']];
|
|
553
|
+
out+='<div class="resource-breakdown">';
|
|
554
|
+
for(var ti=0;ti<types.length;ti++){
|
|
555
|
+
var cnt=stats.byType[types[ti][1]]||0;
|
|
556
|
+
out+='<div class="resource-type'+(cnt===0?' resource-type--zero':'')+'"><span class="rt-count">'+cnt+'</span> '+types[ti][0]+'</div>';
|
|
557
|
+
}
|
|
558
|
+
out+='</div>';
|
|
559
|
+
}
|
|
560
|
+
out+='</div>';
|
|
561
|
+
return out;
|
|
562
|
+
}
|
|
313
563
|
|
|
564
|
+
(function(){
|
|
565
|
+
var data=JSON.parse(document.getElementById('report-data').textContent);
|
|
314
566
|
var app=document.getElementById('app');
|
|
567
|
+
var _testIdx=0;
|
|
315
568
|
|
|
316
569
|
// Header
|
|
317
|
-
var h='<div class="header">__LOGO_SVG__<h1>TestRelic Report</h1
|
|
570
|
+
var h='<div class="header">__LOGO_SVG__<h1>TestRelic Report</h1>';
|
|
571
|
+
h+='<button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" id="theme-toggle">';
|
|
572
|
+
h+='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="theme-icon-light"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/></svg>';
|
|
573
|
+
h+='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="theme-icon-dark" style="display:none"><circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
|
|
574
|
+
h+='</button></div>';
|
|
318
575
|
h+='<div class="meta">';
|
|
319
576
|
h+='<div class="meta-item"><span class="meta-label">Run ID</span><span class="run-id">'+esc(data.testRunId)+'</span></div>';
|
|
320
577
|
h+='<div class="meta-item"><span class="meta-label">Started</span>'+fmtTime(data.startedAt)+'</div>';
|
|
@@ -339,10 +596,15 @@ var JS = `
|
|
|
339
596
|
h+='<div class="summary-card card-failed"><div class="count">'+s.failed+'</div><div class="label">Failed</div></div>';
|
|
340
597
|
h+='<div class="summary-card card-flaky"><div class="count">'+s.flaky+'</div><div class="label">Flaky</div></div>';
|
|
341
598
|
h+='<div class="summary-card card-skipped"><div class="count">'+s.skipped+'</div><div class="label">Skipped</div></div>';
|
|
599
|
+
if(s.timedout!==undefined){h+='<div class="summary-card card-timedout"><div class="count">'+s.timedout+'</div><div class="label">Timed Out</div></div>';}
|
|
342
600
|
h+='</div>';
|
|
343
601
|
|
|
602
|
+
// Filter bar
|
|
603
|
+
h+=renderFilterBar(data);
|
|
604
|
+
|
|
344
605
|
// Timeline
|
|
345
606
|
h+='<div class="section-title">Navigation Timeline</div>';
|
|
607
|
+
h+='<div class="filter-empty-state" id="filter-empty" style="display:none"><p>No tests match the current filters</p><button onclick="clearAllFilters()">Clear all filters</button></div>';
|
|
346
608
|
if(data.timeline.length===0){
|
|
347
609
|
h+='<div class="empty-state">__LOGO_SVG__<p>No test data recorded</p></div>';
|
|
348
610
|
}else{
|
|
@@ -350,8 +612,10 @@ var JS = `
|
|
|
350
612
|
for(var i=0;i<data.timeline.length;i++){
|
|
351
613
|
var e=data.timeline[i];
|
|
352
614
|
var hasFail=e.tests.some(function(t){return t.status==='failed'});
|
|
353
|
-
var
|
|
354
|
-
|
|
615
|
+
var allPassed=!hasFail&&e.tests.length>0&&e.tests.every(function(t){return t.status==='passed'||t.status==='flaky'});
|
|
616
|
+
var cls='timeline-entry'+(hasFail?' timeline-entry--has-failures':'')+(allPassed?' timeline-entry--all-passed':'');
|
|
617
|
+
var _ss={},_ts={},_sp={};e.tests.forEach(function(t){_ss[t.status]=1;_ts[t.testType||'unknown']=1;if(t.filePath)_sp[t.filePath]=1;else if(e.specFile)_sp[e.specFile]=1});
|
|
618
|
+
h+='<div class="'+cls+'" data-idx="'+i+'" data-statuses="'+Object.keys(_ss).join(',')+'" data-types="'+Object.keys(_ts).join(',')+'" data-specs="'+esc(Object.keys(_sp).join(','))+'">';
|
|
355
619
|
h+='<div class="timeline-header" onclick="toggleEntry(this)">';
|
|
356
620
|
h+='<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
|
|
357
621
|
h+='<span class="timeline-url" title="'+esc(e.url)+'">'+esc(e.url)+'</span>';
|
|
@@ -362,7 +626,7 @@ var JS = `
|
|
|
362
626
|
h+='<span>'+fmtDur(e.duration)+'</span>';
|
|
363
627
|
h+='</div></div>';
|
|
364
628
|
h+='<div class="timeline-content">';
|
|
365
|
-
h+=renderTests(e.tests);
|
|
629
|
+
h+=renderTests(e.tests,e.networkStats);
|
|
366
630
|
h+=renderNetwork(e.networkStats);
|
|
367
631
|
h+='</div></div>';
|
|
368
632
|
}
|
|
@@ -370,118 +634,523 @@ var JS = `
|
|
|
370
634
|
}
|
|
371
635
|
|
|
372
636
|
app.innerHTML=h;
|
|
637
|
+
if(typeof initTheme==='function')initTheme();
|
|
638
|
+
if(typeof initFilters==='function')initFilters(data);
|
|
373
639
|
|
|
374
|
-
function renderTests(tests){
|
|
640
|
+
function renderTests(tests,networkStats){
|
|
375
641
|
if(!tests||tests.length===0)return '';
|
|
376
642
|
var out='<div class="tests-section">';
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
tests.forEach(function(t){if(t.status==='passed')pc++;else if(t.status==='failed')fc++;else if(t.status==='flaky')fkc++});
|
|
643
|
+
var pc=0,fc=0,fkc=0,sc=0,toc=0;
|
|
644
|
+
tests.forEach(function(t){if(t.status==='passed')pc++;else if(t.status==='failed')fc++;else if(t.status==='flaky')fkc++;else if(t.status==='skipped')sc++;else if(t.status==='timedout')toc++});
|
|
380
645
|
out+='<div class="spec-summary">';
|
|
381
646
|
if(pc>0)out+='<span class="spec-passed">'+pc+' passed</span>';
|
|
382
647
|
if(fc>0)out+='<span class="spec-failed">'+fc+' failed</span>';
|
|
383
648
|
if(fkc>0)out+='<span class="spec-flaky">'+fkc+' flaky</span>';
|
|
649
|
+
if(sc>0)out+='<span style="color:#6b7280;font-weight:600">'+sc+' skipped</span>';
|
|
650
|
+
if(toc>0)out+='<span style="color:#ea580c;font-weight:600">'+toc+' timed out</span>';
|
|
384
651
|
out+='</div>';
|
|
385
652
|
for(var j=0;j<tests.length;j++){
|
|
386
|
-
|
|
387
|
-
out+='<div class="test-card">';
|
|
388
|
-
out+='<span class="status-badge status-'+t.status+'">'+t.status+'</span>';
|
|
389
|
-
out+='<div class="test-info">';
|
|
390
|
-
out+='<div class="test-title" title="'+esc(t.title)+'">'+esc(t.title)+'</div>';
|
|
391
|
-
out+='<div class="test-meta">';
|
|
392
|
-
if(t.retryCount>0)out+='<span class="retry-badge">'+t.retryCount+' retries</span>';
|
|
393
|
-
if(t.tags)t.tags.forEach(function(tag){if(tag)out+='<span class="tag-badge">'+esc(tag)+'</span>'});
|
|
394
|
-
out+='</div>';
|
|
395
|
-
if((t.status==='failed'||t.status==='flaky')&&t.failure){
|
|
396
|
-
var fid='fail-'+Math.random().toString(36).substr(2,9);
|
|
397
|
-
out+='<button class="failure-toggle" onclick="toggleFail(\\''+fid+'\\')">Show details</button>';
|
|
398
|
-
out+='<div class="failure-details" id="'+fid+'">';
|
|
399
|
-
out+='<div class="failure-message">'+esc(stripAnsi(t.failure.message))+'</div>';
|
|
400
|
-
if(t.failure.code){
|
|
401
|
-
out+=renderCodeSnippet(t.failure.code,t.failure.line);
|
|
402
|
-
}
|
|
403
|
-
if(t.failure.line!==null){
|
|
404
|
-
out+='<div style="padding:4px 12px;font-size:11px;color:#9ca3af;background:#f9fafb">Line '+t.failure.line+'</div>';
|
|
405
|
-
}
|
|
406
|
-
if(t.failure.stack){
|
|
407
|
-
var sid='stack-'+Math.random().toString(36).substr(2,9);
|
|
408
|
-
out+='<button class="stack-toggle" onclick="toggleStack(\\''+sid+'\\')">Show stack trace</button>';
|
|
409
|
-
out+='<div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(t.failure.stack))+'</div>';
|
|
410
|
-
}
|
|
411
|
-
out+='</div>';
|
|
412
|
-
} else if(t.status==='failed'&&!t.failure){
|
|
413
|
-
out+='<div style="margin-top:4px;font-size:12px;color:#9ca3af;font-style:italic">No diagnostic information available</div>';
|
|
414
|
-
}
|
|
415
|
-
out+='</div>';
|
|
416
|
-
out+='<span class="test-duration">'+fmtDur(t.duration)+'</span>';
|
|
417
|
-
out+='</div>';
|
|
653
|
+
out+=renderTestCard(tests[j],_testIdx++,networkStats);
|
|
418
654
|
}
|
|
419
655
|
out+='</div>';
|
|
420
656
|
return out;
|
|
421
657
|
}
|
|
422
658
|
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
659
|
+
})();
|
|
660
|
+
`;
|
|
661
|
+
|
|
662
|
+
// src/html-js-tabs.ts
|
|
663
|
+
var JS_TABS = `
|
|
664
|
+
function renderTestCard(t,idx,networkStats){
|
|
665
|
+
var id='test-'+idx;
|
|
666
|
+
var out='<div class="test-card" id="'+id+'" data-status="'+t.status+'" data-type="'+(t.testType||'unknown')+'" data-spec="'+esc(t.filePath||'')+'">';
|
|
667
|
+
out+='<div class="test-card-row">';
|
|
668
|
+
out+='<span class="status-badge status-'+t.status+'">'+t.status+'</span>';
|
|
669
|
+
out+='<div class="test-info">';
|
|
670
|
+
out+='<div class="test-title" title="'+esc(t.title)+'">'+esc(t.title)+'</div>';
|
|
671
|
+
out+='<div class="test-meta">';
|
|
672
|
+
if(t.testType&&t.testType!=='unknown')out+='<span class="type-badge">'+esc(t.testType)+'</span>';
|
|
673
|
+
if(t.isFlaky)out+='<span class="flaky-badge">flaky</span>';
|
|
674
|
+
if(t.retryCount>0)out+='<span class="retry-badge">'+t.retryCount+' retries</span>';
|
|
675
|
+
if(t.retryStatus)out+='<span class="retry-badge">'+esc(t.retryStatus)+'</span>';
|
|
676
|
+
if(t.tags&&t.tags.length>0){out+='<span class="meta-prefix">Tags:</span>';t.tags.forEach(function(tag){if(tag)out+='<span class="tag-badge">'+esc(tag)+'</span>'});}
|
|
677
|
+
if(t.expectedStatus&&t.actualStatus&&t.expectedStatus!==t.actualStatus)out+='<span class="status-mismatch">expected: '+esc(t.expectedStatus)+' actual: '+esc(t.actualStatus)+'</span>';
|
|
678
|
+
out+='</div>';
|
|
679
|
+
if(t.testId||t.filePath||t.suiteName){out+='<div class="test-meta">';
|
|
680
|
+
if(t.testId)out+='<span class="meta-prefix">ID:</span><span class="test-id" title="Full ID: '+esc(t.testId)+'">'+esc(t.testId.substring(0,12))+'</span>';
|
|
681
|
+
if(t.filePath)out+='<span class="meta-prefix">File:</span><span class="file-path">'+esc(t.filePath)+'</span>';
|
|
682
|
+
if(t.suiteName)out+='<span class="meta-prefix">Suite:</span><span class="suite-name">'+esc(t.suiteName)+'</span>';
|
|
683
|
+
out+='</div>';}
|
|
684
|
+
out+='</div>';
|
|
685
|
+
out+='<span class="test-duration">'+fmtDur(t.duration)+'</span>';
|
|
686
|
+
out+='</div>';
|
|
687
|
+
|
|
688
|
+
// Tab bar
|
|
689
|
+
var hasScreenshot=t.artifacts&&t.artifacts.screenshot;
|
|
690
|
+
var hasVideo=t.artifacts&&t.artifacts.video;
|
|
691
|
+
var hasNetworkReqs=t.networkRequests&&t.networkRequests.length>0;
|
|
692
|
+
var hasNetworkStats=!!networkStats;
|
|
693
|
+
|
|
694
|
+
out+='<div class="tab-bar">';
|
|
695
|
+
out+='<button class="tab-btn active" data-tab="details" onclick="switchTab(\\''+id+'\\',\\'details\\')">Test Details</button>';
|
|
696
|
+
out+='<button class="tab-btn" data-tab="network" onclick="switchTab(\\''+id+'\\',\\'network\\')">Network Logs</button>';
|
|
697
|
+
out+='<button class="tab-btn" data-tab="video" onclick="switchTab(\\''+id+'\\',\\'video\\')">Video</button>';
|
|
698
|
+
out+='<button class="tab-btn" data-tab="screenshots" onclick="switchTab(\\''+id+'\\',\\'screenshots\\')">Screenshots</button>';
|
|
699
|
+
out+='</div>';
|
|
700
|
+
|
|
701
|
+
// Tab: Test Details
|
|
702
|
+
out+='<div class="tab-panel active" id="'+id+'-details">';
|
|
703
|
+
if((t.status==='failed'||t.status==='flaky')&&t.failure){
|
|
704
|
+
out+='<div class="failure-details show">';
|
|
705
|
+
out+='<div class="failure-message">'+esc(stripAnsi(t.failure.message))+'</div>';
|
|
706
|
+
if(t.failure.code){
|
|
707
|
+
out+=renderCodeSnippet(t.failure.code,t.failure.line);
|
|
708
|
+
}
|
|
709
|
+
if(t.failure.line!==null){
|
|
710
|
+
out+='<div style="padding:4px 12px;font-size:11px;color:var(--text-muted);background:var(--bg-secondary)">Line '+t.failure.line+'</div>';
|
|
711
|
+
}
|
|
712
|
+
if(t.failure.stack){
|
|
713
|
+
var sid='stack-'+Math.random().toString(36).substr(2,9);
|
|
714
|
+
out+='<button class="stack-toggle" onclick="toggleStack(\\''+sid+'\\')">Show stack trace</button>';
|
|
715
|
+
out+='<div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(t.failure.stack))+'</div>';
|
|
436
716
|
}
|
|
437
717
|
out+='</div>';
|
|
438
|
-
|
|
718
|
+
} else if(t.status==='failed'&&!t.failure){
|
|
719
|
+
out+='<div style="margin-top:4px;font-size:12px;color:#9ca3af;font-style:italic">No diagnostic information available</div>';
|
|
720
|
+
} else {
|
|
721
|
+
out+='<div class="tab-empty-state">Test passed \u2014 no diagnostic details</div>';
|
|
722
|
+
}
|
|
723
|
+
out+='</div>';
|
|
724
|
+
|
|
725
|
+
// Tab: Network Logs
|
|
726
|
+
out+='<div class="tab-panel" id="'+id+'-network">';
|
|
727
|
+
out+=renderNetworkLogs(t,networkStats);
|
|
728
|
+
out+='</div>';
|
|
729
|
+
|
|
730
|
+
// Tab: Video
|
|
731
|
+
out+='<div class="tab-panel" id="'+id+'-video">';
|
|
732
|
+
if(hasVideo){
|
|
733
|
+
out+='<div class="artifact-video-inline">';
|
|
734
|
+
out+='<video class="artifact-video-player" controls preload="metadata" src="'+esc(t.artifacts.video)+'"></video>';
|
|
735
|
+
out+='</div>';
|
|
736
|
+
} else {
|
|
737
|
+
out+='<div class="tab-empty-state">No video captured</div>';
|
|
439
738
|
}
|
|
739
|
+
out+='</div>';
|
|
440
740
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
out+='<div class="
|
|
445
|
-
out+='<
|
|
446
|
-
out+='<
|
|
447
|
-
out+='<div class="net-stat'+(stats.failedRequests>0?' has-failed':'')+'"><span class="val">'+stats.failedRequests+'</span><span class="lbl">Failed</span></div>';
|
|
448
|
-
out+='<div class="net-stat"><span class="val">'+fmtBytes(stats.totalBytes)+'</span><span class="lbl">Transferred</span></div>';
|
|
741
|
+
// Tab: Screenshots
|
|
742
|
+
out+='<div class="tab-panel" id="'+id+'-screenshots">';
|
|
743
|
+
if(hasScreenshot){
|
|
744
|
+
out+='<div class="artifact-screenshot-wrap">';
|
|
745
|
+
out+='<img class="artifact-thumbnail" src="'+esc(t.artifacts.screenshot)+'" loading="lazy" alt="Screenshot" onclick="openLightbox(this.src)">';
|
|
746
|
+
out+='<span class="artifact-label">Click to enlarge</span>';
|
|
449
747
|
out+='</div>';
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
748
|
+
} else {
|
|
749
|
+
out+='<div class="tab-empty-state">No screenshot captured</div>';
|
|
750
|
+
}
|
|
751
|
+
out+='</div>';
|
|
752
|
+
|
|
753
|
+
out+='</div>';
|
|
754
|
+
return out;
|
|
755
|
+
}
|
|
756
|
+
`;
|
|
757
|
+
|
|
758
|
+
// src/html-js-network.ts
|
|
759
|
+
var JS_NETWORK = `
|
|
760
|
+
function fmtBodyForEditor(body,contentType){
|
|
761
|
+
if(!body)return body;
|
|
762
|
+
if(contentType&&(contentType.indexOf('json')>=0)){
|
|
763
|
+
try{return JSON.stringify(JSON.parse(body),null,2)}catch(e){}
|
|
764
|
+
}
|
|
765
|
+
return body;
|
|
766
|
+
}
|
|
767
|
+
function renderCodeEditor(body,contentType,editorId){
|
|
768
|
+
if(!body)return '';
|
|
769
|
+
var formatted=fmtBodyForEditor(body,contentType);
|
|
770
|
+
var lines=formatted.split('\\n');
|
|
771
|
+
var out='<div class="code-editor" id="'+editorId+'">';
|
|
772
|
+
out+='<div class="code-editor-toolbar">';
|
|
773
|
+
out+='<span class="code-editor-lang">'+(contentType?esc(contentType.split(';')[0]):'text')+'</span>';
|
|
774
|
+
out+='<button class="code-editor-copy" onclick="copyEditorContent(\\''+editorId+'\\')">Copy</button>';
|
|
775
|
+
out+='</div>';
|
|
776
|
+
out+='<div class="code-editor-body">';
|
|
777
|
+
out+='<div class="code-editor-lines">';
|
|
778
|
+
for(var i=0;i<lines.length;i++){
|
|
779
|
+
out+='<div class="code-editor-line-num">'+(i+1)+'</div>';
|
|
780
|
+
}
|
|
781
|
+
out+='</div>';
|
|
782
|
+
out+='<pre class="code-editor-content">'+esc(formatted)+'</pre>';
|
|
783
|
+
out+='</div></div>';
|
|
784
|
+
return out;
|
|
785
|
+
}
|
|
786
|
+
function renderNetworkLogs(t,networkStats){
|
|
787
|
+
if(t.networkRequests&&t.networkRequests.length>0){
|
|
788
|
+
var reqs=t.networkRequests;
|
|
789
|
+
var failed=reqs.filter(function(r){return r.statusCode===0||r.statusCode>=400}).length;
|
|
790
|
+
var out='<div class="network-log">';
|
|
791
|
+
out+='<div class="network-log-summary">';
|
|
792
|
+
out+='<span class="net-log-count">'+reqs.length+' request'+(reqs.length>1?'s':'')+'</span>';
|
|
793
|
+
if(failed>0)out+='<span class="net-log-failed">'+failed+' failed</span>';
|
|
794
|
+
out+='</div>';
|
|
795
|
+
for(var i=0;i<reqs.length;i++){
|
|
796
|
+
var r=reqs[i];
|
|
797
|
+
var nid='net-'+Math.random().toString(36).substr(2,9);
|
|
798
|
+
var statusCls='net-status-'+Math.floor(r.statusCode/100)+'xx';
|
|
799
|
+
if(r.statusCode===0)statusCls='net-status-0';
|
|
800
|
+
var isFailed=r.statusCode===0||r.statusCode>=400;
|
|
801
|
+
out+='<div class="network-entry'+(isFailed?' network-entry--failed':'')+'">';
|
|
802
|
+
out+='<div class="network-entry-row" onclick="toggleNetworkEntry(\\''+nid+'\\')">';
|
|
803
|
+
out+='<span class="net-status-badge '+statusCls+'">'+(r.statusCode||'ERR')+'</span>';
|
|
804
|
+
out+='<span class="net-method">'+esc(r.method)+'</span>';
|
|
805
|
+
out+='<span class="net-url" title="'+esc(r.url)+'">'+esc(r.url)+'</span>';
|
|
806
|
+
out+='<span class="net-time">'+fmtDur(r.responseTimeMs)+'</span>';
|
|
807
|
+
out+='<svg class="net-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
|
|
457
808
|
out+='</div>';
|
|
809
|
+
out+='<div class="network-entry-details" id="'+nid+'">';
|
|
810
|
+
if(r.error){
|
|
811
|
+
out+='<div class="net-error-msg">'+esc(r.error)+'</div>';
|
|
812
|
+
}
|
|
813
|
+
// Request Headers
|
|
814
|
+
if(r.requestHeaders){
|
|
815
|
+
out+='<div class="net-section-title">Request Headers</div>';
|
|
816
|
+
out+='<table class="net-headers-table">';
|
|
817
|
+
var rkeys=Object.keys(r.requestHeaders);
|
|
818
|
+
for(var j=0;j<rkeys.length;j++){
|
|
819
|
+
out+='<tr><td class="net-header-key">'+esc(rkeys[j])+'</td><td class="net-header-val">'+esc(r.requestHeaders[rkeys[j]])+'</td></tr>';
|
|
820
|
+
}
|
|
821
|
+
out+='</table>';
|
|
822
|
+
}
|
|
823
|
+
// Request Body
|
|
824
|
+
out+='<div class="net-section-title">Request Body</div>';
|
|
825
|
+
if(r.requestBody){
|
|
826
|
+
var reqEdId='req-body-'+nid;
|
|
827
|
+
var reqCt='text/plain';
|
|
828
|
+
if(r.requestHeaders){var rctKey=Object.keys(r.requestHeaders).filter(function(k){return k.toLowerCase()==='content-type'})[0];if(rctKey)reqCt=r.requestHeaders[rctKey]}
|
|
829
|
+
out+=renderCodeEditor(r.requestBody,reqCt,reqEdId);
|
|
830
|
+
if(r.requestBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
|
|
831
|
+
} else {
|
|
832
|
+
out+='<div class="net-empty-note">No request body</div>';
|
|
833
|
+
}
|
|
834
|
+
// Response Headers
|
|
835
|
+
if(r.responseHeaders){
|
|
836
|
+
out+='<div class="net-section-title">Response Headers</div>';
|
|
837
|
+
out+='<table class="net-headers-table">';
|
|
838
|
+
var hkeys=Object.keys(r.responseHeaders);
|
|
839
|
+
for(var j=0;j<hkeys.length;j++){
|
|
840
|
+
out+='<tr><td class="net-header-key">'+esc(hkeys[j])+'</td><td class="net-header-val">'+esc(r.responseHeaders[hkeys[j]])+'</td></tr>';
|
|
841
|
+
}
|
|
842
|
+
out+='</table>';
|
|
843
|
+
}
|
|
844
|
+
// Response Body
|
|
845
|
+
out+='<div class="net-section-title">Response Body</div>';
|
|
846
|
+
if(r.isBinary){
|
|
847
|
+
out+='<div class="net-binary-note">[Binary data'+(r.responseSize?' \u2014 '+fmtBytes(r.responseSize):'')+']</div>';
|
|
848
|
+
} else if(r.responseBody){
|
|
849
|
+
var respEdId='resp-body-'+nid;
|
|
850
|
+
out+=renderCodeEditor(r.responseBody,r.contentType,respEdId);
|
|
851
|
+
if(r.responseBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
|
|
852
|
+
} else {
|
|
853
|
+
out+='<div class="net-empty-note">No response body</div>';
|
|
854
|
+
}
|
|
855
|
+
out+='</div></div>';
|
|
458
856
|
}
|
|
459
857
|
out+='</div>';
|
|
460
858
|
return out;
|
|
461
859
|
}
|
|
860
|
+
if(networkStats){
|
|
861
|
+
return renderNetwork(networkStats);
|
|
862
|
+
}
|
|
863
|
+
return '<div class="tab-empty-state">No network logs captured</div>';
|
|
864
|
+
}
|
|
865
|
+
`;
|
|
462
866
|
|
|
463
|
-
|
|
464
|
-
|
|
867
|
+
// src/html-js-interactions.ts
|
|
868
|
+
var JS_INTERACTIONS = `
|
|
465
869
|
function toggleEntry(el){el.closest('.timeline-entry').classList.toggle('expanded')}
|
|
466
870
|
function toggleFail(id){document.getElementById(id).classList.toggle('show')}
|
|
467
871
|
function toggleStack(id){document.getElementById(id).classList.toggle('show')}
|
|
872
|
+
function openLightbox(src){var o=document.createElement('div');o.className='lightbox-overlay';
|
|
873
|
+
o.onclick=function(){closeLightbox()};o.innerHTML='<img src="'+src.replace(/"/g,'"')+'" alt="Screenshot">';
|
|
874
|
+
var b=document.createElement('button');b.className='lightbox-close';b.innerHTML='×';
|
|
875
|
+
b.onclick=function(e){e.stopPropagation();closeLightbox()};
|
|
876
|
+
document.body.appendChild(o);document.body.appendChild(b);
|
|
877
|
+
document.addEventListener('keydown',lightboxEsc)}
|
|
878
|
+
function closeLightbox(){var o=document.querySelector('.lightbox-overlay');if(o)o.remove();
|
|
879
|
+
var b=document.querySelector('.lightbox-close');if(b)b.remove();
|
|
880
|
+
document.removeEventListener('keydown',lightboxEsc)}
|
|
881
|
+
function lightboxEsc(e){if(e.key==='Escape')closeLightbox()}
|
|
882
|
+
function toggleVideo(id){var el=document.getElementById(id);if(!el)return;
|
|
883
|
+
var isShown=el.classList.toggle('show');
|
|
884
|
+
var btn=el.previousElementSibling;
|
|
885
|
+
if(btn)btn.textContent=isShown?'Hide video':'Show video';
|
|
886
|
+
if(!isShown){var v=el.querySelector('video');if(v)v.pause()}}
|
|
887
|
+
function switchTab(testId,tabName){var card=document.getElementById(testId);if(!card)return;
|
|
888
|
+
var panels=card.querySelectorAll('.tab-panel');for(var i=0;i<panels.length;i++)panels[i].classList.remove('active');
|
|
889
|
+
var btns=card.querySelectorAll('.tab-btn');for(var i=0;i<btns.length;i++)btns[i].classList.remove('active');
|
|
890
|
+
var target=document.getElementById(testId+'-'+tabName);if(target)target.classList.add('active');
|
|
891
|
+
var clicked=card.querySelector('.tab-btn[data-tab="'+tabName+'"]');if(clicked)clicked.classList.add('active')}
|
|
892
|
+
function toggleNetworkEntry(id){var el=document.getElementById(id);if(!el)return;
|
|
893
|
+
el.classList.toggle('show');
|
|
894
|
+
var row=el.previousElementSibling;
|
|
895
|
+
if(row)row.classList.toggle('expanded')}
|
|
896
|
+
function copyEditorContent(editorId){var el=document.getElementById(editorId);if(!el)return;
|
|
897
|
+
var pre=el.querySelector('.code-editor-content');if(!pre)return;
|
|
898
|
+
var text=pre.textContent||'';
|
|
899
|
+
navigator.clipboard.writeText(text).then(function(){
|
|
900
|
+
var btn=el.querySelector('.code-editor-copy');if(!btn)return;
|
|
901
|
+
btn.textContent='Copied!';btn.classList.add('copied');
|
|
902
|
+
setTimeout(function(){btn.textContent='Copy';btn.classList.remove('copied')},1500)
|
|
903
|
+
}).catch(function(){})}
|
|
904
|
+
function initTheme(){
|
|
905
|
+
var stored=localStorage.getItem('testrelic-theme');
|
|
906
|
+
var theme=stored||(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
|
|
907
|
+
document.documentElement.setAttribute('data-theme',theme);
|
|
908
|
+
updateThemeIcon(theme)}
|
|
909
|
+
function toggleTheme(){
|
|
910
|
+
var current=document.documentElement.getAttribute('data-theme')||'light';
|
|
911
|
+
var next=current==='dark'?'light':'dark';
|
|
912
|
+
document.documentElement.setAttribute('data-theme',next);
|
|
913
|
+
localStorage.setItem('testrelic-theme',next);
|
|
914
|
+
updateThemeIcon(next)}
|
|
915
|
+
function updateThemeIcon(theme){
|
|
916
|
+
var light=document.querySelector('.theme-icon-light');
|
|
917
|
+
var dark=document.querySelector('.theme-icon-dark');
|
|
918
|
+
if(light)light.style.display=theme==='dark'?'none':'block';
|
|
919
|
+
if(dark)dark.style.display=theme==='dark'?'block':'none'}
|
|
920
|
+
`;
|
|
921
|
+
|
|
922
|
+
// src/html-js-filters.ts
|
|
923
|
+
var JS_FILTERS = `
|
|
924
|
+
var _filterState={status:{},type:{},specFile:{}};
|
|
925
|
+
var _totalTests=0;
|
|
926
|
+
var _originalSummary=null;
|
|
927
|
+
|
|
928
|
+
function renderFilterBar(data){
|
|
929
|
+
var statusCounts={},typeCounts={},specCounts={};
|
|
930
|
+
data.timeline.forEach(function(entry){
|
|
931
|
+
entry.tests.forEach(function(t){
|
|
932
|
+
statusCounts[t.status]=(statusCounts[t.status]||0)+1;
|
|
933
|
+
var tp=t.testType||'unknown';
|
|
934
|
+
typeCounts[tp]=(typeCounts[tp]||0)+1;
|
|
935
|
+
var fp=t.filePath||entry.specFile||'';
|
|
936
|
+
if(fp)specCounts[fp]=(specCounts[fp]||0)+1;
|
|
937
|
+
});
|
|
938
|
+
});
|
|
939
|
+
var out='<div class="filter-bar" id="filter-bar">';
|
|
940
|
+
|
|
941
|
+
// Status chips
|
|
942
|
+
out+='<div class="filter-section">';
|
|
943
|
+
out+='<span class="filter-section-label">Status</span>';
|
|
944
|
+
var statuses=['passed','failed','flaky','skipped','timedout'];
|
|
945
|
+
var statusLabels={passed:'Passed',failed:'Failed',flaky:'Flaky',skipped:'Skipped',timedout:'Timed Out'};
|
|
946
|
+
for(var i=0;i<statuses.length;i++){
|
|
947
|
+
var s=statuses[i];var cnt=statusCounts[s]||0;
|
|
948
|
+
out+='<button class="filter-chip filter-chip--status'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="status" data-value="'+s+'">';
|
|
949
|
+
out+=statusLabels[s]+' <span class="filter-chip-count">('+cnt+')</span></button>';
|
|
950
|
+
}
|
|
951
|
+
out+='</div>';
|
|
952
|
+
|
|
953
|
+
// Type chips (only types present in data)
|
|
954
|
+
var types=Object.keys(typeCounts);
|
|
955
|
+
if(types.length>0){
|
|
956
|
+
out+='<div class="filter-section">';
|
|
957
|
+
out+='<span class="filter-section-label">Type</span>';
|
|
958
|
+
for(var i=0;i<types.length;i++){
|
|
959
|
+
var t=types[i];var cnt=typeCounts[t]||0;
|
|
960
|
+
out+='<button class="filter-chip filter-chip--type'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="type" data-value="'+esc(t)+'">';
|
|
961
|
+
out+=esc(t)+' <span class="filter-chip-count">('+cnt+')</span></button>';
|
|
962
|
+
}
|
|
963
|
+
out+='</div>';
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
// Spec file chips (only if multiple files)
|
|
967
|
+
var specs=Object.keys(specCounts).sort();
|
|
968
|
+
if(specs.length>1){
|
|
969
|
+
out+='<div class="filter-section">';
|
|
970
|
+
out+='<span class="filter-section-label">File</span>';
|
|
971
|
+
for(var i=0;i<specs.length;i++){
|
|
972
|
+
var sp=specs[i];var cnt=specCounts[sp]||0;
|
|
973
|
+
var short=sp.split('/').pop()||sp;
|
|
974
|
+
out+='<button class="filter-chip filter-chip--file'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="specFile" data-value="'+esc(sp)+'" title="'+esc(sp)+'">';
|
|
975
|
+
out+=esc(short)+' <span class="filter-chip-count">('+cnt+')</span></button>';
|
|
976
|
+
}
|
|
977
|
+
out+='</div>';
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
// Actions row
|
|
981
|
+
out+='<div class="filter-actions">';
|
|
982
|
+
out+='<button class="filter-clear" id="filter-clear" onclick="clearAllFilters()" style="display:none">Clear all</button>';
|
|
983
|
+
out+='<span class="filter-indicator" id="filter-indicator" style="display:none">';
|
|
984
|
+
out+='Showing <span id="filter-shown">0</span> of <span id="filter-total">0</span> tests</span>';
|
|
985
|
+
out+='</div>';
|
|
986
|
+
out+='</div>';
|
|
987
|
+
return out;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
function initFilters(data){
|
|
991
|
+
_filterState={status:{},type:{},specFile:{}};
|
|
992
|
+
// Count from actual test cards in DOM to match filter chip counts
|
|
993
|
+
var cards=document.querySelectorAll('.test-card');
|
|
994
|
+
var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
|
|
995
|
+
for(var i=0;i<cards.length;i++){
|
|
996
|
+
var st=cards[i].getAttribute('data-status')||'';
|
|
997
|
+
if(byStatus[st]!==undefined)byStatus[st]++;
|
|
998
|
+
}
|
|
999
|
+
_totalTests=cards.length;
|
|
1000
|
+
_originalSummary={total:cards.length,passed:byStatus.passed,
|
|
1001
|
+
failed:byStatus.failed,flaky:byStatus.flaky,
|
|
1002
|
+
skipped:byStatus.skipped,timedout:byStatus.timedout};
|
|
1003
|
+
// Update summary cards to match actual test card counts
|
|
1004
|
+
_updateCard('card-total',_originalSummary.total);
|
|
1005
|
+
_updateCard('card-passed',_originalSummary.passed);
|
|
1006
|
+
_updateCard('card-failed',_originalSummary.failed);
|
|
1007
|
+
_updateCard('card-flaky',_originalSummary.flaky);
|
|
1008
|
+
_updateCard('card-skipped',_originalSummary.skipped);
|
|
1009
|
+
_updateCard('card-timedout',_originalSummary.timedout);
|
|
1010
|
+
var el=document.getElementById('filter-total');
|
|
1011
|
+
if(el)el.textContent=''+_totalTests;
|
|
1012
|
+
var chips=document.querySelectorAll('.filter-chip');
|
|
1013
|
+
for(var i=0;i<chips.length;i++){
|
|
1014
|
+
(function(chip){
|
|
1015
|
+
chip.addEventListener('click',function(){
|
|
1016
|
+
var dim=chip.getAttribute('data-dimension');
|
|
1017
|
+
var val=chip.getAttribute('data-value');
|
|
1018
|
+
toggleFilter(dim,val);
|
|
1019
|
+
});
|
|
1020
|
+
})(chips[i]);
|
|
1021
|
+
}
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
function toggleFilter(dim,val){
|
|
1025
|
+
if(!_filterState[dim])_filterState[dim]={};
|
|
1026
|
+
if(_filterState[dim][val]){
|
|
1027
|
+
delete _filterState[dim][val];
|
|
1028
|
+
}else{
|
|
1029
|
+
_filterState[dim][val]=true;
|
|
1030
|
+
}
|
|
1031
|
+
var chips=document.querySelectorAll('.filter-chip[data-dimension="'+dim+'"]');
|
|
1032
|
+
for(var i=0;i<chips.length;i++){
|
|
1033
|
+
var cv=chips[i].getAttribute('data-value');
|
|
1034
|
+
if(cv===val)chips[i].classList.toggle('filter-chip--active');
|
|
1035
|
+
}
|
|
1036
|
+
applyFilters();
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
function clearAllFilters(){
|
|
1040
|
+
_filterState={status:{},type:{},specFile:{}};
|
|
1041
|
+
var active=document.querySelectorAll('.filter-chip--active');
|
|
1042
|
+
for(var i=0;i<active.length;i++)active[i].classList.remove('filter-chip--active');
|
|
1043
|
+
applyFilters();
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
function applyFilters(){
|
|
1047
|
+
var hasStatus=Object.keys(_filterState.status).length>0;
|
|
1048
|
+
var hasType=Object.keys(_filterState.type).length>0;
|
|
1049
|
+
var hasSpec=Object.keys(_filterState.specFile).length>0;
|
|
1050
|
+
var hasAny=hasStatus||hasType||hasSpec;
|
|
1051
|
+
|
|
1052
|
+
var cards=document.querySelectorAll('.test-card');
|
|
1053
|
+
var visibleCount=0;
|
|
1054
|
+
var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
|
|
1055
|
+
|
|
1056
|
+
for(var i=0;i<cards.length;i++){
|
|
1057
|
+
var card=cards[i];
|
|
1058
|
+
var st=card.getAttribute('data-status')||'';
|
|
1059
|
+
var tp=card.getAttribute('data-type')||'';
|
|
1060
|
+
var sp=card.getAttribute('data-spec')||'';
|
|
1061
|
+
var match=true;
|
|
1062
|
+
if(hasStatus&&!_filterState.status[st])match=false;
|
|
1063
|
+
if(hasType&&!_filterState.type[tp])match=false;
|
|
1064
|
+
if(hasSpec&&!_filterState.specFile[sp])match=false;
|
|
1065
|
+
if(match){
|
|
1066
|
+
card.classList.remove('filter-hidden');
|
|
1067
|
+
visibleCount++;
|
|
1068
|
+
if(byStatus[st]!==undefined)byStatus[st]++;
|
|
1069
|
+
}else{
|
|
1070
|
+
card.classList.add('filter-hidden');
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
// Timeline entries: hide if no visible test cards inside
|
|
1075
|
+
var entries=document.querySelectorAll('.timeline-entry');
|
|
1076
|
+
for(var i=0;i<entries.length;i++){
|
|
1077
|
+
var entry=entries[i];
|
|
1078
|
+
var visCards=entry.querySelectorAll('.test-card:not(.filter-hidden)');
|
|
1079
|
+
if(hasAny&&visCards.length===0){
|
|
1080
|
+
entry.classList.add('filter-hidden');
|
|
1081
|
+
}else{
|
|
1082
|
+
entry.classList.remove('filter-hidden');
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
// Clear all button
|
|
1087
|
+
var clearBtn=document.getElementById('filter-clear');
|
|
1088
|
+
if(clearBtn)clearBtn.style.display=hasAny?'':'none';
|
|
1089
|
+
|
|
1090
|
+
// Indicator
|
|
1091
|
+
var indicator=document.getElementById('filter-indicator');
|
|
1092
|
+
if(indicator)indicator.style.display=hasAny?'':'none';
|
|
1093
|
+
var shown=document.getElementById('filter-shown');
|
|
1094
|
+
if(shown)shown.textContent=''+visibleCount;
|
|
1095
|
+
|
|
1096
|
+
// Summary card updates
|
|
1097
|
+
if(hasAny){
|
|
1098
|
+
_updateCard('card-total',visibleCount);
|
|
1099
|
+
_updateCard('card-passed',byStatus.passed);
|
|
1100
|
+
_updateCard('card-failed',byStatus.failed);
|
|
1101
|
+
_updateCard('card-flaky',byStatus.flaky);
|
|
1102
|
+
_updateCard('card-skipped',byStatus.skipped);
|
|
1103
|
+
_updateCard('card-timedout',byStatus.timedout);
|
|
1104
|
+
}else if(_originalSummary){
|
|
1105
|
+
_updateCard('card-total',_originalSummary.total);
|
|
1106
|
+
_updateCard('card-passed',_originalSummary.passed);
|
|
1107
|
+
_updateCard('card-failed',_originalSummary.failed);
|
|
1108
|
+
_updateCard('card-flaky',_originalSummary.flaky);
|
|
1109
|
+
_updateCard('card-skipped',_originalSummary.skipped);
|
|
1110
|
+
_updateCard('card-timedout',_originalSummary.timedout);
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
// Empty state
|
|
1114
|
+
var emptyEl=document.getElementById('filter-empty');
|
|
1115
|
+
var timeline=document.getElementById('timeline');
|
|
1116
|
+
if(hasAny&&visibleCount===0){
|
|
1117
|
+
if(emptyEl)emptyEl.style.display='';
|
|
1118
|
+
if(timeline)timeline.style.display='none';
|
|
1119
|
+
}else{
|
|
1120
|
+
if(emptyEl)emptyEl.style.display='none';
|
|
1121
|
+
if(timeline)timeline.style.display='';
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
function _updateCard(cls,val){
|
|
1126
|
+
var el=document.querySelector('.'+cls+' .count');
|
|
1127
|
+
if(el)el.textContent=''+val;
|
|
1128
|
+
}
|
|
468
1129
|
`;
|
|
1130
|
+
|
|
1131
|
+
// src/html-template.ts
|
|
469
1132
|
function renderHtmlDocument(reportJson) {
|
|
470
|
-
const jsWithLogo =
|
|
1133
|
+
const jsWithLogo = JS_RENDER.replace(/__LOGO_SVG__/g, LOGO_SVG.replace(/'/g, "\\'").replace(/\n/g, ""));
|
|
1134
|
+
const safeJson = reportJson.replace(/<\//g, "<\\/");
|
|
471
1135
|
return `<!-- TestRelic Report \u2014 self-contained, no external dependencies -->
|
|
472
1136
|
<!DOCTYPE html>
|
|
473
|
-
<html lang="en">
|
|
1137
|
+
<html lang="en" data-theme="">
|
|
474
1138
|
<head>
|
|
475
1139
|
<meta charset="UTF-8">
|
|
476
1140
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
477
|
-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data
|
|
1141
|
+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob: 'self'; media-src blob: 'self';">
|
|
478
1142
|
<title>TestRelic Report</title>
|
|
479
1143
|
<style>${CSS}</style>
|
|
480
1144
|
</head>
|
|
481
1145
|
<body>
|
|
1146
|
+
<script>!function(){var t=localStorage.getItem('testrelic-theme')||(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t)}()</script>
|
|
482
1147
|
<div class="container" id="app"></div>
|
|
483
|
-
<script id="report-data" type="application/json">${
|
|
484
|
-
<script>${jsWithLogo}
|
|
1148
|
+
<script id="report-data" type="application/json">${safeJson}</script>
|
|
1149
|
+
<script>${jsWithLogo}
|
|
1150
|
+
${JS_TABS}
|
|
1151
|
+
${JS_NETWORK}
|
|
1152
|
+
${JS_FILTERS}
|
|
1153
|
+
${JS_INTERACTIONS}</script>
|
|
485
1154
|
</body>
|
|
486
1155
|
</html>`;
|
|
487
1156
|
}
|
|
@@ -537,7 +1206,108 @@ function writeHtmlReport(report, config) {
|
|
|
537
1206
|
}
|
|
538
1207
|
}
|
|
539
1208
|
|
|
1209
|
+
// src/artifact-manager.ts
|
|
1210
|
+
var import_node_fs3 = require("fs");
|
|
1211
|
+
var import_node_path2 = require("path");
|
|
1212
|
+
function sanitizeFolderName(title) {
|
|
1213
|
+
let name = title.replace(/[^a-zA-Z0-9\-_ ]/g, "-").replace(/\s+/g, "-").replace(/-{2,}/g, "-").replace(/^-+|-+$/g, "");
|
|
1214
|
+
if (name.length > 100) {
|
|
1215
|
+
name = name.substring(0, 100).replace(/-+$/, "");
|
|
1216
|
+
}
|
|
1217
|
+
return name || "unnamed-test";
|
|
1218
|
+
}
|
|
1219
|
+
function copyArtifacts(attachments, testTitle, retryCount, outputDir) {
|
|
1220
|
+
const screenshot = attachments.find(
|
|
1221
|
+
(a) => a.name === "screenshot" && a.path
|
|
1222
|
+
);
|
|
1223
|
+
const video = attachments.find(
|
|
1224
|
+
(a) => a.name === "video" && a.path
|
|
1225
|
+
);
|
|
1226
|
+
if (!screenshot && !video) {
|
|
1227
|
+
return null;
|
|
1228
|
+
}
|
|
1229
|
+
let folderName = sanitizeFolderName(testTitle);
|
|
1230
|
+
if (retryCount > 0) {
|
|
1231
|
+
folderName += `--retry-${retryCount}`;
|
|
1232
|
+
}
|
|
1233
|
+
const artifactDir = (0, import_node_path2.join)(outputDir, "artifacts", folderName);
|
|
1234
|
+
const result = {};
|
|
1235
|
+
try {
|
|
1236
|
+
(0, import_node_fs3.mkdirSync)(artifactDir, { recursive: true });
|
|
1237
|
+
} catch {
|
|
1238
|
+
return null;
|
|
1239
|
+
}
|
|
1240
|
+
if (screenshot?.path) {
|
|
1241
|
+
try {
|
|
1242
|
+
if ((0, import_node_fs3.existsSync)(screenshot.path)) {
|
|
1243
|
+
const ext = (0, import_node_path2.extname)(screenshot.path) || ".png";
|
|
1244
|
+
const destName = `screenshot${ext}`;
|
|
1245
|
+
(0, import_node_fs3.copyFileSync)(screenshot.path, (0, import_node_path2.join)(artifactDir, destName));
|
|
1246
|
+
result.screenshot = `artifacts/${folderName}/${destName}`;
|
|
1247
|
+
}
|
|
1248
|
+
} catch {
|
|
1249
|
+
}
|
|
1250
|
+
}
|
|
1251
|
+
if (video?.path) {
|
|
1252
|
+
try {
|
|
1253
|
+
if ((0, import_node_fs3.existsSync)(video.path)) {
|
|
1254
|
+
const ext = (0, import_node_path2.extname)(video.path) || ".webm";
|
|
1255
|
+
const destName = `video${ext}`;
|
|
1256
|
+
(0, import_node_fs3.copyFileSync)(video.path, (0, import_node_path2.join)(artifactDir, destName));
|
|
1257
|
+
result.video = `artifacts/${folderName}/${destName}`;
|
|
1258
|
+
}
|
|
1259
|
+
} catch {
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
if (!result.screenshot && !result.video) {
|
|
1263
|
+
return null;
|
|
1264
|
+
}
|
|
1265
|
+
return result;
|
|
1266
|
+
}
|
|
1267
|
+
|
|
540
1268
|
// src/reporter.ts
|
|
1269
|
+
function mapPlaywrightStatus(status) {
|
|
1270
|
+
switch (status) {
|
|
1271
|
+
case "passed":
|
|
1272
|
+
return "passed";
|
|
1273
|
+
case "failed":
|
|
1274
|
+
return "failed";
|
|
1275
|
+
case "timedOut":
|
|
1276
|
+
return "timedout";
|
|
1277
|
+
case "skipped":
|
|
1278
|
+
return "skipped";
|
|
1279
|
+
case "interrupted":
|
|
1280
|
+
return "failed";
|
|
1281
|
+
default:
|
|
1282
|
+
return "failed";
|
|
1283
|
+
}
|
|
1284
|
+
}
|
|
1285
|
+
function generateTestId(filePath, suiteName, title) {
|
|
1286
|
+
const input = `${filePath}::${suiteName}::${title}`;
|
|
1287
|
+
return (0, import_node_crypto.createHash)("sha256").update(input).digest("hex").substring(0, 16);
|
|
1288
|
+
}
|
|
1289
|
+
function getSuiteName(titlePath) {
|
|
1290
|
+
if (titlePath.length <= 4) return "";
|
|
1291
|
+
return titlePath[titlePath.length - 2];
|
|
1292
|
+
}
|
|
1293
|
+
function getRetryStatus(results) {
|
|
1294
|
+
const passedIndex = results.findIndex((r) => r.status === "passed");
|
|
1295
|
+
return passedIndex > 0 ? `passed on retry ${passedIndex}` : null;
|
|
1296
|
+
}
|
|
1297
|
+
function getTestType(tags, filePath) {
|
|
1298
|
+
const typeOrder = ["e2e", "api", "unit"];
|
|
1299
|
+
for (const type of typeOrder) {
|
|
1300
|
+
if (tags.some((tag) => tag === `@${type}` || tag === type)) {
|
|
1301
|
+
return type;
|
|
1302
|
+
}
|
|
1303
|
+
}
|
|
1304
|
+
for (const type of typeOrder) {
|
|
1305
|
+
if (filePath.includes(`/${type}/`)) {
|
|
1306
|
+
return type;
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
return "unknown";
|
|
1310
|
+
}
|
|
541
1311
|
var TestRelicReporter = class {
|
|
542
1312
|
constructor(options) {
|
|
543
1313
|
this.rootDir = "";
|
|
@@ -561,12 +1331,11 @@ var TestRelicReporter = class {
|
|
|
561
1331
|
let status;
|
|
562
1332
|
if (outcome === "flaky") {
|
|
563
1333
|
status = "flaky";
|
|
564
|
-
} else if (
|
|
565
|
-
status = "
|
|
1334
|
+
} else if (outcome === "skipped") {
|
|
1335
|
+
status = "skipped";
|
|
566
1336
|
} else {
|
|
567
|
-
status =
|
|
1337
|
+
status = mapPlaywrightStatus(lastResult.status);
|
|
568
1338
|
}
|
|
569
|
-
if (outcome === "skipped") return;
|
|
570
1339
|
const startedAt = lastResult.startTime.toISOString();
|
|
571
1340
|
const completedAt = new Date(lastResult.startTime.getTime() + lastResult.duration).toISOString();
|
|
572
1341
|
const tags = test.tags ? [...test.tags] : test.annotations.filter((a) => a.type === "tag").map((a) => a.description ?? "");
|
|
@@ -577,6 +1346,16 @@ var TestRelicReporter = class {
|
|
|
577
1346
|
return null;
|
|
578
1347
|
}
|
|
579
1348
|
}).filter((n) => n !== null);
|
|
1349
|
+
let networkRequests = null;
|
|
1350
|
+
const networkReqAnnotation = test.annotations.find(
|
|
1351
|
+
(a) => a.type === "__testrelic_network_requests" && a.description
|
|
1352
|
+
);
|
|
1353
|
+
if (networkReqAnnotation) {
|
|
1354
|
+
try {
|
|
1355
|
+
networkRequests = JSON.parse(networkReqAnnotation.description);
|
|
1356
|
+
} catch {
|
|
1357
|
+
}
|
|
1358
|
+
}
|
|
580
1359
|
let failure = null;
|
|
581
1360
|
if (status === "failed" || status === "flaky") {
|
|
582
1361
|
const errors = status === "flaky" ? test.results.find((r) => r.status !== "passed")?.errors ?? [] : lastResult.errors;
|
|
@@ -602,10 +1381,25 @@ var TestRelicReporter = class {
|
|
|
602
1381
|
}
|
|
603
1382
|
}
|
|
604
1383
|
const titlePath = test.titlePath().filter(Boolean);
|
|
605
|
-
const specFile = (0,
|
|
1384
|
+
const specFile = (0, import_node_path3.relative)(this.rootDir || ".", test.location.file);
|
|
1385
|
+
const suiteName = getSuiteName(titlePath);
|
|
1386
|
+
const title = titlePath.join(" > ");
|
|
1387
|
+
const filePath = specFile;
|
|
1388
|
+
const testId = generateTestId(filePath, suiteName, title);
|
|
1389
|
+
const testType = getTestType(tags, filePath);
|
|
1390
|
+
const isFlaky = outcome === "flaky";
|
|
1391
|
+
const retryStatus = getRetryStatus(test.results);
|
|
1392
|
+
const expectedStatus = mapPlaywrightStatus(test.expectedStatus);
|
|
1393
|
+
const actualStatus = mapPlaywrightStatus(lastResult.status);
|
|
1394
|
+
let artifacts = null;
|
|
1395
|
+
if (this.config.includeArtifacts && status !== "skipped" && lastResult.attachments) {
|
|
1396
|
+
const outputDir = (0, import_node_path3.dirname)(this.config.outputPath);
|
|
1397
|
+
const lastTitle = titlePath[titlePath.length - 1] ?? test.title;
|
|
1398
|
+
artifacts = copyArtifacts(lastResult.attachments, lastTitle, lastResult.retry, outputDir);
|
|
1399
|
+
}
|
|
606
1400
|
this.collectedTests.push({
|
|
607
1401
|
titlePath,
|
|
608
|
-
title
|
|
1402
|
+
title,
|
|
609
1403
|
status,
|
|
610
1404
|
duration: lastResult.duration,
|
|
611
1405
|
startedAt,
|
|
@@ -614,7 +1408,17 @@ var TestRelicReporter = class {
|
|
|
614
1408
|
tags,
|
|
615
1409
|
failure,
|
|
616
1410
|
specFile,
|
|
617
|
-
navigations
|
|
1411
|
+
navigations,
|
|
1412
|
+
testId,
|
|
1413
|
+
filePath,
|
|
1414
|
+
suiteName,
|
|
1415
|
+
testType,
|
|
1416
|
+
isFlaky,
|
|
1417
|
+
retryStatus,
|
|
1418
|
+
expectedStatus,
|
|
1419
|
+
actualStatus,
|
|
1420
|
+
artifacts,
|
|
1421
|
+
networkRequests
|
|
618
1422
|
});
|
|
619
1423
|
} catch {
|
|
620
1424
|
}
|
|
@@ -694,6 +1498,7 @@ var TestRelicReporter = class {
|
|
|
694
1498
|
let failed = 0;
|
|
695
1499
|
let flaky = 0;
|
|
696
1500
|
let skipped = 0;
|
|
1501
|
+
let timedout = 0;
|
|
697
1502
|
for (const test of this.collectedTests) {
|
|
698
1503
|
switch (test.status) {
|
|
699
1504
|
case "passed":
|
|
@@ -705,6 +1510,12 @@ var TestRelicReporter = class {
|
|
|
705
1510
|
case "flaky":
|
|
706
1511
|
flaky++;
|
|
707
1512
|
break;
|
|
1513
|
+
case "skipped":
|
|
1514
|
+
skipped++;
|
|
1515
|
+
break;
|
|
1516
|
+
case "timedout":
|
|
1517
|
+
timedout++;
|
|
1518
|
+
break;
|
|
708
1519
|
}
|
|
709
1520
|
}
|
|
710
1521
|
return {
|
|
@@ -712,7 +1523,8 @@ var TestRelicReporter = class {
|
|
|
712
1523
|
passed,
|
|
713
1524
|
failed,
|
|
714
1525
|
flaky,
|
|
715
|
-
skipped
|
|
1526
|
+
skipped,
|
|
1527
|
+
timedout
|
|
716
1528
|
};
|
|
717
1529
|
}
|
|
718
1530
|
toTestResult(test) {
|
|
@@ -724,18 +1536,28 @@ var TestRelicReporter = class {
|
|
|
724
1536
|
completedAt: test.completedAt,
|
|
725
1537
|
retryCount: test.retryCount,
|
|
726
1538
|
tags: test.tags,
|
|
727
|
-
failure: test.failure
|
|
1539
|
+
failure: test.failure,
|
|
1540
|
+
testId: test.testId,
|
|
1541
|
+
filePath: test.filePath,
|
|
1542
|
+
suiteName: test.suiteName,
|
|
1543
|
+
testType: test.testType,
|
|
1544
|
+
isFlaky: test.isFlaky,
|
|
1545
|
+
retryStatus: test.retryStatus,
|
|
1546
|
+
expectedStatus: test.expectedStatus,
|
|
1547
|
+
actualStatus: test.actualStatus,
|
|
1548
|
+
artifacts: test.artifacts,
|
|
1549
|
+
networkRequests: test.networkRequests
|
|
728
1550
|
};
|
|
729
1551
|
}
|
|
730
1552
|
writeReport(report) {
|
|
731
1553
|
try {
|
|
732
1554
|
const json = JSON.stringify(report, null, 2);
|
|
733
1555
|
const outputPath = this.config.outputPath;
|
|
734
|
-
const dir = (0,
|
|
735
|
-
(0,
|
|
1556
|
+
const dir = (0, import_node_path3.dirname)(outputPath);
|
|
1557
|
+
(0, import_node_fs4.mkdirSync)(dir, { recursive: true });
|
|
736
1558
|
const tmpPath = outputPath + ".tmp";
|
|
737
|
-
(0,
|
|
738
|
-
(0,
|
|
1559
|
+
(0, import_node_fs4.writeFileSync)(tmpPath, json, "utf-8");
|
|
1560
|
+
(0, import_node_fs4.renameSync)(tmpPath, outputPath);
|
|
739
1561
|
} catch (err) {
|
|
740
1562
|
process.stderr.write(
|
|
741
1563
|
`[testrelic] Failed to write report: ${err instanceof Error ? err.message : String(err)}
|