DuoShot - app walkthrough

export async function test(page, baseUrl, screenshotPath, stepLogger) {
  const SITE = baseUrl.replace(/\/+$/, '');
  const shot = (n, slug) => screenshotPath.replace('.png', '-' + n + '-' + slug + '.png');
  const SCROLL_THROUGH = "(async () => { const ease = t => 1 - Math.pow(1 - t, 3); const max = Math.max(0, document.body.scrollHeight - window.innerHeight); if (max < 40) return; const anim = (a, b, ms) => new Promise(res => { const t0 = performance.now(); const step = now => { const p = Math.min(1, (now - t0) / ms); window.scrollTo(0, a + (b - a) * ease(p)); p < 1 ? requestAnimationFrame(step) : res(); }; requestAnimationFrame(step); }); await anim(0, max, 1400); await new Promise(r => setTimeout(r, 300)); await anim(max, 0, 700); })()";
  // NOTE: page.evaluate(<string fn>, arg) silently returns undefined on the EB
  // runner, so the dimensions are baked into each self-invoking IIFE string.
  const MK_BODY = " const c = document.createElement('canvas'); c.width = w; c.height = h; const x = c.getContext('2d'); const g = x.createLinearGradient(0, 0, w, h); g.addColorStop(0, '#0b1220'); g.addColorStop(1, '#2563eb'); x.fillStyle = g; x.fillRect(0, 0, w, h); x.fillStyle = 'rgba(255,255,255,0.10)'; for (let i = 0; i < 6; i++) { x.fillRect(w * 0.08, h * (0.30 + i * 0.075), w * 0.84, h * 0.045); } x.fillStyle = '#ffffff'; x.textAlign = 'center'; x.font = 'bold ' + Math.floor(w / 9) + 'px sans-serif'; x.fillText(label, w / 2, h * 0.19); x.font = Math.floor(w / 26) + 'px sans-serif'; x.fillText(w + ' x ' + h, w / 2, h * 0.245); return c.toDataURL('image/png'); })()";
  const MK_CLOSED = "(() => { const w = 1398, h = 2034, label = 'Closed';" + MK_BODY;
  const MK_OPEN = "(() => { const w = 2007, h = 2853, label = 'Open';" + MK_BODY;

  await page.context().setExtraHTTPHeaders({ 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36' });
  for (const pattern of ['**/cdn-cgi/scripts/**/email-decode.min.js', '**/sentry-cdn.com/**', '**/browser.sentry-cdn.com/**', '**/cdn.segment.com/**', '**/connect.facebook.net/**', '**/api-js.mixpanel.com/**']) {