spb/datacenterindex

1// QA screenshots: node apps/web/qa/shoot.mjs [suffix]  (uses Playwright from ~/Desktop/uqo-eval)2import { createRequire } from "node:module";3import { mkdirSync } from "node:fs";4import { dirname, resolve } from "node:path";5import { fileURLToPath } from "node:url";67const require = createRequire("/Users/simon-pierreboucher/Desktop/uqo-eval/package.json");8const { chromium } = require("playwright");9const out = dirname(fileURLToPath(import.meta.url));10mkdirSync(out, { recursive: true });11const suffix = process.argv[2] ? `-${process.argv[2]}` : "";12const BASE = process.env.BASE ?? "http://localhost:8310";13const PAGES = [14  ["home", "/"],15  ["map", "/map"],16  ["search", "/search?q=montreal"],17  ["live", "/live"],18  ["datacenters", "/datacenters"],19  ["about", "/about"],20];21const WIDTHS = (process.env.WIDTHS ?? "320,360,390,430,768,1280").split(",").map(Number);22const THEME = process.env.THEME ?? "light";23const ONLY = process.env.PAGES ? new Set(process.env.PAGES.split(",")) : null;24const browser = await chromium.launch();25const report = [];26for (const w of WIDTHS) {27  const ctx = await browser.newContext({ viewport: { width: w, height: w < 700 ? 800 : 900 }, deviceScaleFactor: 1, isMobile: w < 700, hasTouch: w < 700 });28  await ctx.addInitScript((theme) => { try { window.localStorage.setItem("theme", theme); } catch {} }, THEME);29  const page = await ctx.newPage();30  for (const [name, path] of PAGES) {31    if (ONLY && !ONLY.has(name)) continue;32    await page.goto(`${BASE}${path}`, { waitUntil: "load", timeout: 45000 }).catch((e) => console.log("goto failed", name, w, String(e).slice(0, 80)));33    await page.waitForTimeout(name === "map" ? 3500 : 1200);34    const overflow = await page.evaluate(() => {35      const doc = document.documentElement;36      const wide = [];37      for (const el of document.querySelectorAll("body *")) {38        const r = el.getBoundingClientRect();39        if (r.right > doc.clientWidth + 1 && r.width > 0 && getComputedStyle(el).position !== "fixed") wide.push(`${el.tagName.toLowerCase()}.${(el.className && typeof el.className === "string" ? el.className : "").split(" ").slice(0, 2).join(".")}:${Math.round(r.right - doc.clientWidth)}`);40      }41      return { scrollWidth: doc.scrollWidth, clientWidth: doc.clientWidth, wide: wide.slice(0, 5) };42    });43    report.push({ w, name, overflow: overflow.scrollWidth > overflow.clientWidth ? overflow : "ok" });44    await page.screenshot({ path: resolve(out, `${name}-${w}${suffix}.png`), fullPage: name !== "map" });45  }46  await ctx.close();47}48await browser.close();49for (const r of report) console.log(r.w, r.name, typeof r.overflow === "string" ? r.overflow : JSON.stringify(r.overflow));50