snapshot of https://github.com/zulip/zulip.git @ 48c69911c7dd4e03b20552eb3bd77ad8151c1357 (2026-09-15)

tools/screenshots/message-screenshot.ts

@@ -0,0 +1,99 @@
+/* global CSS, zulip_test */
+
+import * as assert from "node:assert/strict";
+import * as fs from "node:fs";
+import path from "node:path";
+import {parseArgs} from "node:util";
+
+import "css.escape";
+import * as puppeteer from "puppeteer";
+import * as z from "zod/mini";
+
+const usage = "Usage: message-screenshot.ts <message_id> <image_path> <realm_url>";
+const {
+    values: {help},
+    positionals,
+} = parseArgs({options: {help: {type: "boolean"}}, allowPositionals: true});
+
+if (help) {
+    console.log(usage);
+    process.exit(0);
+}
+
+const parsed = z
+    .tuple([
+        z.string(),
+        z.templateLiteral([z.string(), z.enum([".png", ".jpeg", ".webp"])]),
+        z.url(),
+    ])
+    .safeParse(positionals);
+if (!parsed.success) {
+    console.error(usage);
+    process.exit(1);
+}
+const [messageId, imagePath, realmUrl] = parsed.data;
+
+console.log(`Capturing screenshot for message ${messageId} to ${imagePath}`);
+
+// TODO: Refactor to share code with web/e2e-tests/realm-creation.test.ts
+async function run(): Promise<void> {
+    const browser = await puppeteer.launch({
+        args: [
+            "--window-size=1400,1024",
+            "--no-sandbox",
+            "--disable-setuid-sandbox",
+            // Helps render fonts correctly on Ubuntu: https://github.com/puppeteer/puppeteer/issues/661
+            "--font-render-hinting=none",
+        ],
+        defaultViewport: null,
+        headless: true,
+    });
+    try {
+        const page = await browser.newPage();
+        // deviceScaleFactor:2 gives better quality screenshots (higher pixel density)
+        await page.setViewport({width: 1280, height: 1024, deviceScaleFactor: 2});
+        await page.goto(`${realmUrl}/devlogin`);
+        // wait for Iago devlogin button and click on it.
+        await page.waitForSelector('[value="iago@zulip.com"]');
+
+        // By waiting till DOMContentLoaded we're confirming that Iago is logged in.
+        await Promise.all([
+            page.waitForNavigation({waitUntil: "domcontentloaded"}),
+            page.click('[value="iago@zulip.com"]'),
+        ]);
+
+        // Navigate to message and capture screenshot
+        await page.goto(`${realmUrl}/#narrow/id/${messageId}`, {
+            waitUntil: "networkidle2",
+        });
+        const message_list_id = await page.evaluate(() => zulip_test.current_msg_list?.id);
+        assert.ok(message_list_id !== undefined);
+        const messageSelector = `#message-row-${message_list_id}-${CSS.escape(messageId)}`;
+        await page.waitForSelector(messageSelector);
+        // remove unread marker and don't select message
+        const marker = `#message-row-${message_list_id}-${CSS.escape(messageId)} .unread_marker`;
+        await page.$eval(marker, (element) => {
+            element.remove();
+        });
+        const messageBox = await page.$(messageSelector);
+        assert.ok(messageBox !== null);
+        await page.$eval(messageSelector, (element) => {
+            element.classList.remove("selected_message");
+        });
+        const messageGroup = await messageBox.$("xpath/..");
+        assert.ok(messageGroup !== null);
+        // Compute screenshot area, with some padding around the message group
+        const box = await messageGroup.boundingBox();
+        assert.ok(box !== null);
+        const imageDir = path.dirname(imagePath);
+        await fs.promises.mkdir(imageDir, {recursive: true});
+        await page.screenshot({
+            path: imagePath,
+            clip: {x: box.x - 5, y: box.y + 5, width: box.width + 10, height: box.height},
+        });
+    } finally {
+        await browser.close();
+    }
+}
+
+await run();