Setting the file. One moment. Report Template · UI Test · browserbase/skills · Skills DocsREADME
(opens in a new tab)
references/report-template.html
HTML·152 lines·9 KB
link
rel
=
"preconnect"
href
=
"https://fonts.googleapis.com"
>
8<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9<style>
10 :root {
11 --brand: #F03603;
12 --pass: #90C94D;
13 --fail: #F03603;
14 --blue: #4DA9E4;
15 --yellow: #F4BA41;
16 --black: #100D0D;
17 --gray: #514F4F;
18 --border: #edebeb;
19 --bg: #F9F6F4;
20 --card: #ffffff;
21 --text: #100D0D;
22 --muted: #514F4F;
23 }
24 * { margin: 0; padding: 0; box-sizing: border-box; }
25 body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; }
26 .container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
27 code { font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; font-size: 0.8125em; background: #f6f5f5; padding: 0.125em 0.375em; border-radius: 2px; border: 1px solid var(--border); }
28
29 /* Header */
30 header { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; }
31 .header-left h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--black); }
32 .header-left h1 a { color: var(--brand); text-decoration: none; }
33 .header-left h1 a:hover { text-decoration: underline; }
34 .header-left .meta { color: var(--muted); font-size: 0.875rem; }
35 .header-logo { flex-shrink: 0; }
36
37 /* Summary bar */
38 .summary { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
39 .stat { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; flex: 1; min-width: 120px; }
40 .stat .label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
41 .stat .value { font-size: 1.5rem; font-weight: 700; color: var(--black); }
42 .stat .value.pass { color: var(--pass); }
43 .stat .value.fail { color: var(--fail); }
44
45 /* Pass rate bar */
46 .pass-rate-bar { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
47 .pass-rate-bar .bar-track { height: 6px; background: #f6f5f5; border-radius: 3px; overflow: hidden; margin-top: 0.5rem; }
48 .pass-rate-bar .bar-fill { height: 100%; border-radius: 3px; }
49 .pass-rate-bar .bar-fill.good { background: var(--pass); }
50 .pass-rate-bar .bar-fill.warn { background: var(--yellow); }
51 .pass-rate-bar .bar-fill.bad { background: var(--fail); }
52
53 /* Section */
54 .section { margin-bottom: 2rem; }
55 .section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--black); }
56 .section h2 .count { font-size: 0.6875rem; font-weight: 600; border-radius: 2px; padding: 0.125rem 0.5rem; border: 1px solid var(--border); background: #f6f5f5; color: var(--muted); }
57
58 /* Test card */
59 .test-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5rem; overflow: hidden; }
60 .test-card.fail { border-left: 3px solid var(--fail); }
61 .test-card.pass { border-left: 3px solid var(--pass); }
62 .test-card summary { padding: 0.75rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; list-style: none; }
63 .test-card summary::-webkit-details-marker { display: none; }
64 .test-card summary::before { content: '▶'; font-size: 0.5rem; color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
65 .test-card[open] summary::before { transform: rotate(90deg); }
66 .test-card .badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 10px; border-radius: 2px; flex-shrink: 0; }
67 .test-card .badge.pass { background: rgba(144,201,77,0.12); color: #5a8a1a; border: 1px solid rgba(144,201,77,0.3); }
68 .test-card .badge.fail { background: rgba(240,54,3,0.08); color: var(--fail); border: 1px solid rgba(240,54,3,0.2); }
69 .test-card .step-id { font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; font-size: 0.8125rem; color: var(--text); font-weight: 500; }
70 .test-card .evidence { color: var(--muted); font-size: 0.8125rem; margin-left: auto; max-width: 40%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
71 .test-card .body { padding: 0 1rem 1rem 1rem; }
72 .test-card .body dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; font-size: 0.8125rem; }
73 .test-card .body dt { color: var(--muted); font-weight: 500; }
74 .test-card .body dd { color: var(--text); }
75 .test-card .body .suggestion { margin-top: 0.75rem; background: rgba(77,169,228,0.08); border: 1px solid rgba(77,169,228,0.2); border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: #2a7ab5; }
76
77 /* Screenshot */
78 .screenshot { margin-top: 0.75rem; }
79 .screenshot img { max-width: 100%; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; }
80 .screenshot .caption { font-size: 0.75rem; color: var(--muted); margin-top: 0.375rem; }
81
82 /* Lightbox */
83 .lightbox { display: none; position: fixed; inset: 0; background: rgba(16,13,13,0.85); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
84 .lightbox.active { display: flex; }
85 .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
86
87 /* Footer */
88 footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
89 footer a { color: var(--brand); text-decoration: none; font-weight: 500; }
90 footer a:hover { text-decoration: underline; }
91 footer svg { flex-shrink: 0; }
92</style>
93</head>
94<body>
95
96<div class="container">
97 <header>
98 <div class="header-left">
99 <h1>{{TITLE_HTML}}</h1>
100 <div class="meta">{{META}}</div>
101 </div>
102 <a href="https://browserbase.com" target="_blank" rel="noopener" class="header-logo" title="Powered by Browserbase" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:var(--muted);font-size:0.8125rem;font-weight:500;">
103 <span>Powered by Browserbase</span>
104 <svg width="32" height="32" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" rx="8" fill="#F03603"/><path d="M36 72.2222V27.7778H51.2381C57.5873 27.7778 62.6667 32.8571 62.6667 39.2063V41.746C62.6667 44.6667 61.5873 47.3968 59.7461 49.3651C62.2858 51.4603 63.9366 54.6349 63.9366 58.254V60.7936C63.9366 67.1428 58.8572 72.2222 52.508 72.2222H36ZM42.3493 65.873H52.508C55.3651 65.873 57.5873 63.6508 57.5873 60.7936V58.254C57.5873 55.3968 55.3651 53.1746 52.508 53.1746H42.3493V65.873ZM42.3493 46.8254H51.2381C54.0953 46.8254 56.3175 44.6032 56.3175 41.746V39.2063C56.3175 36.3492 54.0953 34.127 51.2381 34.127H42.3493V46.8254Z" fill="white"/></svg>
105 </a>
106 </header>
107
108 <div class="summary">
109 <div class="stat"><div class="label">Tests</div><div class="value">{{TOTAL_TESTS}}</div></div>
110 <div class="stat"><div class="label">Passed</div><div class="value pass">{{PASS_COUNT}}</div></div>
111 <div class="stat"><div class="label">Failed</div><div class="value fail">{{FAIL_COUNT}}</div></div>
112 <div class="stat"><div class="label">Agents</div><div class="value">{{AGENT_COUNT}}</div></div>
113 </div>
114
115 <div class="pass-rate-bar">
116 <div style="display:flex;justify-content:space-between;align-items:baseline;">
117 <span style="font-size:0.875rem;font-weight:500;">Pass Rate</span>
118 <span style="font-size:1.25rem;font-weight:700;">{{PASS_RATE}}%</span>
119 </div>
120 <div class="bar-track"><div class="bar-fill {{RATE_CLASS}}" style="width:{{PASS_RATE}}%"></div></div>
121 </div>
122
123 <!-- FAILURES SECTION — only rendered if there are failures -->
124 {{FAILURES_SECTION}}
125
126 <!-- PASSES SECTION -->
127 {{PASSES_SECTION}}
128</div>
129
130<div class="lightbox" id="lightbox" onclick="this.classList.remove('active')">
131 <img id="lightbox-img" src="" alt="Screenshot enlarged">
132</div>
133
134<footer>
135 <svg width="16" height="16" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" rx="8" fill="#F03603"/><path d="M36 72.2222V27.7778H51.2381C57.5873 27.7778 62.6667 32.8571 62.6667 39.2063V41.746C62.6667 44.6667 61.5873 47.3968 59.7461 49.3651C62.2858 51.4603 63.9366 54.6349 63.9366 58.254V60.7936C63.9366 67.1428 58.8572 72.2222 52.508 72.2222H36ZM42.3493 65.873H52.508C55.3651 65.873 57.5873 63.6508 57.5873 60.7936V58.254C57.5873 55.3968 55.3651 53.1746 52.508 53.1746H42.3493V65.873ZM42.3493 46.8254H51.2381C54.0953 46.8254 56.3175 44.6032 56.3175 41.746V39.2063C56.3175 36.3492 54.0953 34.127 51.2381 34.127H42.3493V46.8254Z" fill="white"/></svg>
136 Generated by <a href="https://github.com/browserbase/skills">ui-test</a> · Powered by <a href="https://browserbase.com">Browserbase</a>
137</footer>
138
139<script>
140document.querySelectorAll('.screenshot img').forEach(img => {
141 img.addEventListener('click', e => {
142 e.stopPropagation();
143 document.getElementById('lightbox-img').src = img.src;
144 document.getElementById('lightbox').classList.add('active');
145 });
146});
147document.addEventListener('keydown', e => {
148 if (e.key === 'Escape') document.getElementById('lightbox').classList.remove('active');
149});
150</script>
151</body>
152</html>