spb/food-ka

1// Captures Playwright de la fiche propriété à 6 largeurs (QA visuelle).2// Usage : node frontend/scripts/shots.mjs <uid> [baseUrl] [outDir]3import { chromium, devices } from "playwright";4const UID = process.argv[2];5if (!UID) { console.error("usage: node shots.mjs <uid> [baseUrl] [outDir]"); process.exit(2); }6const BASE = process.argv[3] || "http://127.0.0.1:8097";7const OUT = process.argv[4] || "/tmp";8const shots = [9  ["iphone14", { ...devices["iPhone 14"] }],10  ["w375", { viewport: { width: 375, height: 812 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true }],11  ["w430", { viewport: { width: 430, height: 932 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true }],12  ["w768", { viewport: { width: 768, height: 1024 }, deviceScaleFactor: 1 }],13  ["w1024", { viewport: { width: 1024, height: 800 }, deviceScaleFactor: 1 }],14  ["w1440", { viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 }],15];16const browser = await chromium.launch();17for (const [name, opts] of shots) {18  const ctx = await browser.newContext(opts); const page = await ctx.newPage();19  const errs = [];20  page.on("pageerror", (e) => errs.push("PAGEERROR " + e.message));21  page.on("console", (m) => { if (m.type() === "error") errs.push(m.text().slice(0, 200)); });22  await page.goto(`${BASE}/produit/${encodeURIComponent(UID)}`, { waitUntil: "networkidle" });23  await page.waitForSelector(".fk-hero", { timeout: 20000 });24  { const c = page.getByRole("button", { name: /Tout accepter/ }); if (await c.count()) await c.first().click(); }25  // html{scroll-behavior:smooth} du site fausse le retour en haut scripté → défilement instantané pour les captures26  await page.evaluate(() => { document.documentElement.style.scrollBehavior = "auto"; });27  // défilement complet (déclenche les chargements différés) puis retour en haut28  await page.evaluate(async () => {29    for (let y = 0; y < document.body.scrollHeight; y += 600) { window.scrollTo(0, y); await new Promise((r) => setTimeout(r, 120)); }30    window.scrollTo({ top: 0, behavior: "instant" });31  });32  await page.waitForTimeout(3500);33  const ov = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);34  await page.screenshot({ path: `${OUT}/fk-${name}-full.png`, fullPage: true });35  await page.screenshot({ path: `${OUT}/fk-${name}-top.png` });36  await page.evaluate(() => window.scrollTo({ top: 900, behavior: "instant" })); await page.waitForTimeout(600);37  await page.screenshot({ path: `${OUT}/fk-${name}-scrolled.png` });38  console.log(name, "overflow", ov, "errors", errs.length, errs.slice(0, 3).join(" | "));39  await ctx.close();40}41await browser.close();42