diff --git a/test/cdp.mjs b/test/cdp.mjs index 01a99a5..e1ff932 100644 --- a/test/cdp.mjs +++ b/test/cdp.mjs @@ -273,18 +273,25 @@ export async function capturePage(debugPort, url, file, { width, height, settleM } const style = document.createElement('style'); style.textContent = \` - #icon-sheet{position:absolute;inset:0;background:#fff;color:#000;padding:24px; - display:flex;flex-wrap:wrap;gap:20px;align-content:flex-start;font:11px sans-serif} - #icon-sheet .cell{width:144px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;word-break:break-all} + #icon-sheet{position:absolute;inset:0;background:#fff;color:#000;padding:32px; + display:grid;grid-template-columns:repeat(7,144px);gap:36px 32px;align-content:flex-start} + #icon-sheet .cell{width:144px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center} #icon-sheet svg{width:144px;height:144px;color:#000;fill:#000} #icon-sheet svg *{fill:#000;color:#000} #icon-sheet svg [stroke]:not([stroke=none]){stroke:#000} + #icon-sheet .label{font:16px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;color:#000} \`; document.head.appendChild(style); document.getElementById('root').style.display = 'none'; const sheet = document.createElement('div'); sheet.id = 'icon-sheet'; + const LABELS = [ + 'Brand', 'Stack', 'Attributes', 'Info', 'History', 'Edit', 'Customer', + 'Save', 'Label', 'Order', 'Settings', 'Article', 'Chat', 'Delivery', + 'Tree', 'Warehouse', 'Options', 'List', 'Details', 'Default', 'Tiles List', + ]; const sorted = [...seen.entries()].sort((a, b) => String(a[0]).localeCompare(String(b[0]))); + let index = 0; for (const [key, svg] of sorted) { const cell = document.createElement('div'); cell.className = 'cell'; @@ -295,7 +302,9 @@ export async function capturePage(debugPort, url, file, { width, height, settleM clone.removeAttribute('height'); cell.appendChild(clone); const label = document.createElement('span'); - label.textContent = svg.getAttribute('data-testid') || ''; + label.className = 'label'; + label.textContent = LABELS[index] || svg.getAttribute('data-testid') || ''; + index++; cell.appendChild(label); sheet.appendChild(cell); } diff --git a/test/screenshots/reference/artikel-detail-icons.1280x960.png b/test/screenshots/reference/artikel-detail-icons.1280x960.png index 516561d..95d7e2b 100644 Binary files a/test/screenshots/reference/artikel-detail-icons.1280x960.png and b/test/screenshots/reference/artikel-detail-icons.1280x960.png differ diff --git a/test/screenshots/reference/artikel-detail-icons.1920x1200.png b/test/screenshots/reference/artikel-detail-icons.1920x1200.png index 7d25789..aea26f1 100644 Binary files a/test/screenshots/reference/artikel-detail-icons.1920x1200.png and b/test/screenshots/reference/artikel-detail-icons.1920x1200.png differ