lan-reader-chat/scripts/reader-layout-check.mjs

import { chromium } from "playwright-core";
import fs from "node:fs/promises";
import path from "node:path";

const baseUrl = "http://127.0.0.1:3000/reader/lan-archive";
const edgePath = "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe";
const outDir = path.resolve("artifacts", "reader-layout");

const cases = ["narrow", "medium", "wide"];

await fs.mkdir(outDir, { recursive: true });

const browser = await chromium.launch({
  executablePath: edgePath,
  headless: true
});

const page = await browser.newPage({
  viewport: { width: 1600, height: 1200 },
  deviceScaleFactor: 1
});

const results = [];

for (const width of cases) {
  await page.goto(`${baseUrl}?width=${width}`, { waitUntil: "networkidle" });

  const metrics = await page.evaluate(() => {
    const layout = document.querySelector(".reader-desktop-layout");
    const shell = document.querySelector(".reader-qq-shell");
    const left = document.querySelector(".reader-float--left");
    const right = document.querySelector(".reader-float--right");

    if (!(layout instanceof HTMLElement) || !(shell instanceof HTMLElement) || !(left instanceof HTMLElement) || !(right instanceof HTMLElement)) {
      throw new Error("reader desktop layout nodes not found");
    }

    const layoutRect = layout.getBoundingClientRect();
    const shellRect = shell.getBoundingClientRect();
    const leftRect = left.getBoundingClientRect();
    const rightRect = right.getBoundingClientRect();

    return {
      bodyWidth: document.body.clientWidth,
      layoutLeft: layoutRect.left,
      layoutWidth: layoutRect.width,
      shellLeft: shellRect.left,
      shellWidth: shellRect.width,
      leftColumnLeft: leftRect.left,
      leftColumnWidth: leftRect.width,
      rightColumnLeft: rightRect.left,
      rightColumnWidth: rightRect.width,
      leftGapToShell: shellRect.left - (leftRect.left + leftRect.width),
      rightGapToShell: rightRect.left - (shellRect.left + shellRect.width)
    };
  });

  const imagePath = path.join(outDir, `${width}.png`);
  await page.screenshot({ path: imagePath, fullPage: true });
  results.push({ width, imagePath, metrics });
}

await browser.close();

const reportPath = path.join(outDir, "report.json");
await fs.writeFile(reportPath, JSON.stringify(results, null, 2), "utf8");

console.log(JSON.stringify({ reportPath, results }, null, 2));