Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tools: Make screenshot tool work with the modern web client. 

This fixes some deprecation use of the APIs, including using "new"
instead of "true" for the "headless" flag when launching puppeteer and
using $$ instead of $x when using XPath selectors.

We also use {waitUntil: "networkidle2"} to fix the issue of webhook bot
avatar not being loaded consistently when generating the screenshots
(this happened to webhooks like Slack and Harbor).

Positioning of the clip area is adjusted to take the new grid layout
into account.
This commit is contained in:
Zixuan James Li 2023-07-14 20:21:50 -04:00 committed by Tim Abbott
parent d1455d81f2
commit 604ffebf5f
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
tools/message-screenshot.js
View File

@ -37,13 +37,13 @@ async function run() {
"--font-render-hinting=none", "--font-render-hinting=none",
], ],
defaultViewport: null, defaultViewport: null,
headless: true, headless: "new",
}); });
try { try {
const page = await browser.newPage(); const page = await browser.newPage();
// deviceScaleFactor:2 gives better quality screenshots (higher pixel density) // deviceScaleFactor:2 gives better quality screenshots (higher pixel density)
await page.setViewport({width: 1280, height: 1024, deviceScaleFactor: 2}); await page.setViewport({width: 1280, height: 1024, deviceScaleFactor: 2});
await page.goto(options.realmUri); await page.goto(`${options.realmUri}/devlogin`);
// wait for Iago devlogin button and click on it. // wait for Iago devlogin button and click on it.
await page.waitForSelector('[value="iago@zulip.com"]'); await page.waitForSelector('[value="iago@zulip.com"]');
@ -54,7 +54,9 @@ async function run() {
]); ]);
// Navigate to message and capture screenshot // Navigate to message and capture screenshot
await page.goto(`${options.realmUri}/#narrow/id/${options.messageId}`); await page.goto(`${options.realmUri}/#narrow/id/${options.messageId}`, {
waitUntil: "networkidle2",
});
const messageSelector = `#zfilt${CSS.escape(options.messageId)}`; const messageSelector = `#zfilt${CSS.escape(options.messageId)}`;
await page.waitForSelector(messageSelector); await page.waitForSelector(messageSelector);
// remove unread marker and don't select message // remove unread marker and don't select message
@ -62,13 +64,12 @@ async function run() {
await page.evaluate((sel) => $(sel).remove(), marker); await page.evaluate((sel) => $(sel).remove(), marker);
const messageBox = await page.$(messageSelector); const messageBox = await page.$(messageSelector);
await page.evaluate((msg) => $(msg).removeClass("selected_message"), messageSelector); await page.evaluate((msg) => $(msg).removeClass("selected_message"), messageSelector);
const messageGroup = (await messageBox.$x(".."))[0]; const messageGroup = await messageBox.$("xpath/..");
// Compute screenshot area, with some padding around the message group // Compute screenshot area, with some padding around the message group
const clip = {...(await messageGroup.boundingBox())}; const clip = {...(await messageGroup.boundingBox())};
clip.y -= 5;
clip.x -= 5; clip.x -= 5;
clip.width += 10; clip.width += 10;
clip.height += 10; clip.y += 5;
const imagePath = options.imagePath; const imagePath = options.imagePath;
const imageDir = path.dirname(imagePath); const imageDir = path.dirname(imagePath);
mkdirp.sync(imageDir); mkdirp.sync(imageDir);