spb/countryatlas

1// Viewport-sized segments for visual review (top of page + scroll offsets).2import { chromium } from 'playwright';3const BASE = process.argv[2] ?? 'http://localhost:8290';4const OUT = new URL('./screens/seg/', import.meta.url).pathname;5import { mkdirSync } from 'node:fs';6mkdirSync(OUT, { recursive: true });7const PAGES = ['/', '/countries', '/countries/canada', '/countries/canada/economy'];8const browser = await chromium.launch();9for (const width of [390, 1440]) {10  const mobile = width < 768;11  const ctx = await browser.newContext({ viewport: { width, height: mobile ? 844 : 900 }, isMobile: mobile, hasTouch: mobile });12  const page = await ctx.newPage();13  for (const path of PAGES) {14    await page.goto(BASE + path, { waitUntil: 'networkidle' });15    await page.evaluate(() => document.fonts.ready);16    const h = await page.evaluate(() => document.documentElement.scrollHeight);17    const vh = mobile ? 844 : 900;18    const offsets = [0, Math.round(h * 0.25), Math.round(h * 0.5), Math.round(h * 0.75), h - vh].filter((o, i, a) => a.indexOf(o) === i);19    const name = path === '/' ? 'home' : path.slice(1).replace(/\//g, '_');20    for (const [i, o] of offsets.entries()) {21      await page.evaluate((y) => window.scrollTo(0, y), o);22      await page.waitForTimeout(400);23      await page.screenshot({ path: `${OUT}${name}-${width}-${i}.png` });24    }25  }26  await ctx.close();27}28await browser.close();29