portico: Add script to auto-generate message screenshots /for/research.

Previously, we manually generated screenshots on /for/research and other landing pages, which makes them difficult to maintain. This PR adds a script - generate-user-messages-screenshot, which expects the path of the filename containing the thread conversation and path where screenshot needs to be generated, and generates screenshot at the mentioned location. Fixes #30016
2025-11-03 05:23:35 +00:00 · 2024-05-14 19:58:21 +05:30
parent 80634eb32b
commit 3f8f10fed7
2 changed files with 302 additions and 0 deletions
--- a/tools/screenshots/thread-screenshot.js
+++ b/tools/screenshots/thread-screenshot.js
@@ -0,0 +1,90 @@
+"use strict";
+
+/* global $, CSS */
+
+const path = require("path");
+
+const {program} = require("commander");
+require("css.escape");
+const mkdirp = require("mkdirp");
+const puppeteer = require("puppeteer");
+
+const options = {};
+
+program
+    .arguments("<narrow_uri> <narrow> <unread_msg_id> <image_path> <realm_uri")
+    .action((narrow_uri, narrow, unread_msg_id, imagePath, realmUri) => {
+        options.narrowUri = narrow_uri;
+        options.narrow = narrow;
+        options.messageId = unread_msg_id;
+        options.imagePath = imagePath;
+        options.realmUri = realmUri;
+        console.log(`Capturing screenshot for ${narrow} to ${imagePath}`);
+    })
+    .parse(process.argv);
+
+if (options.imagePath === undefined) {
+    console.error("no image path specified!");
+    process.exit(1);
+}
+
+// TODO: Refactor to share code with web/e2e-tests/realm-creation.test.ts
+async function run() {
+    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: "new",
+    });
+    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(`${options.realmUri}/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(`${options.narrowUri}`, {
+            waitUntil: "networkidle2",
+        });
+        // eslint-disable-next-line no-undef
+        const message_list_id = await page.evaluate(() => zulip_test.current_msg_list.id);
+        const messageListSelector = "#message-lists-container";
+        await page.waitForSelector(messageListSelector);
+
+        const messageSelector = `#message-row-${message_list_id}-${CSS.escape(options.messageId)}`;
+        await page.waitForSelector(messageSelector);
+
+        const messageListBox = await page.$(messageListSelector);
+        await page.evaluate((msg) => $(msg).removeClass("selected_message"), messageSelector);
+
+        // Compute screenshot area, with some padding around the message group
+        const clip = {...(await messageListBox.boundingBox())};
+        clip.x -= 5;
+        clip.width += 10;
+        clip.y += 5;
+        const imagePath = options.imagePath;
+        const imageDir = path.dirname(imagePath);
+        mkdirp.sync(imageDir);
+        await page.screenshot({path: imagePath, clip});
+    } catch (error) {
+        console.log(error);
+        process.exit(1);
+    } finally {
+        await browser.close();
+    }
+}
+
+run();