/** Verify the lightbox renders the ANNOTATED screenshot. */
import { chromium } from "playwright-core";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { homedir } from "node:os";
const root = dirname(fileURLToPath(import.meta.url));
const SERVER = "http://localhost:8001";
const WEB = "http://localhost:5173";
const stamp = Date.now();
const EMAIL = `lb-annot-${stamp}@example.com`;
const PASSWORD = "lb-annot-pass";
const executablePath = join(homedir(), ".cache/ms-playwright/chromium-1234/chrome-linux64/chrome");
const browser = await chromium.launch({ executablePath, headless: true });
async function api(path, options = {}) {
const r = await fetch(SERVER + path, options);
if (!r.ok) throw new Error(`API ${path} -> ${r.status}`);
return r.json();
}
await api("/api/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nickname: `lb-annot-${stamp}`, email: EMAIL, password: PASSWORD }),
});
const login = await api("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json", "X-Client": "extension" },
body: JSON.stringify({ email: EMAIL, password: PASSWORD }),
});
const auth = { Authorization: `Bearer ${login.token}` };
const project = await api("/api/projects", {
method: "POST",
headers: { "Content-Type": "application/json", ...auth },
body: JSON.stringify({ name: "Lightbox Annot" }),
});
const maker = await browser.newPage({ viewport: { width: 1200, height: 800 }, deviceScaleFactor: 2 });
await maker.setContent(`<body style="margin:0;background:#1f2335">
<h1 style="color:#c0caf5;font:700 48px monospace;padding:60px">Annotated lightbox test</h1></body>`);
const png = await maker.screenshot({ path: "/tmp/ltt-shots/annot-src.png" });
await maker.close();
const form = new FormData();
form.append("file", new Blob([png], { type: "image/png" }), "annot.png");
const up = await api("/api/uploads", { method: "POST", headers: auth, body: form });
const note = await api("/api/reports", {
method: "POST",
headers: { "Content-Type": "application/json", ...auth },
body: JSON.stringify({
project_id: project.id,
type: "element_note",
title: "Annotated lightbox",
environment: { user_agent: "verify", browser: "Chromium", os: "Linux", viewport: { w: 1200, h: 800 }, dpr: 2, language: "en" },
attachment_ids: [up.file_id],
annotation_shapes: {
[up.file_id]: [
{ tool: "rect", color: "#F7768E", strokeWidth: 6, rect: [0.1, 0.1, 0.5, 0.3] },
{ tool: "text", color: "#F7768E", strokeWidth: 4, pos: [0.12, 0.5], text: "BUG HERE" },
],
},
}),
});
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto(`${WEB}/r/${note.share_token}`);
await page.waitForSelector(".screenshot-expand", { timeout: 15000 });
await page.waitForTimeout(1200);
await page.click(".screenshot-expand");
await page.waitForSelector(".lightbox canvas", { timeout: 5000 });
await page.waitForTimeout(1000);
const canvasInfo = await page.evaluate(() => {
const canvas = document.querySelector(".lightbox canvas");
return canvas ? { w: canvas.width, h: canvas.height } : null;
});
console.log("lightbox canvas:", JSON.stringify(canvasInfo));
await page.screenshot({ path: "/tmp/ltt-shots/17-lightbox-annotated.png" });
await browser.close();
console.log("VERIFY OK");
