portico: Extend the script to generate thread screenshots.

This commit extends the script used to generate thread
screenshots to be able to create invite_only streams,
add starred messages, create user groups, add edited
notice to messages, and send messages from notification
bots.

The window width is updated, and background for the
screenshots is changed to white.

It is also updated so that user-avatars mapping
occurs within the script itself.

This is a prep commit to #30128
This commit is contained in:
roanster007
2024-05-21 21:38:50 +05:30
committed by Tim Abbott
parent 3aa8b2da40
commit 00d127965e
2 changed files with 86 additions and 13 deletions

View File

@@ -32,7 +32,7 @@ if (options.imagePath === undefined) {
async function run() {
const browser = await puppeteer.launch({
args: [
"--window-size=1400,1024",
"--window-size=500,1024",
"--no-sandbox",
"--disable-setuid-sandbox",
// Helps render fonts correctly on Ubuntu: https://github.com/puppeteer/puppeteer/issues/661
@@ -44,7 +44,7 @@ async function run() {
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.setViewport({width: 530, height: 1024, deviceScaleFactor: 2});
await page.goto(`${options.realmUrl}/devlogin`);
// wait for Iago devlogin button and click on it.
await page.waitForSelector('[value="iago@zulip.com"]');
@@ -64,17 +64,33 @@ async function run() {
const messageListSelector = "#message-lists-container";
await page.waitForSelector(messageListSelector);
// remove unread marker and don't select message
const marker = `.message-list[data-message-list-id="${CSS.escape(
message_list_id,
)}"] .unread_marker`;
await page.evaluate((sel) => {
$(sel).remove();
}, marker);
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);
// This is done so as to get white background while capturing screenshots.
const background_selectors = [".app-main", ".message-feed", ".message_header"];
await page.evaluate((selectors) => {
for (const selector of selectors) {
$(selector).css("background-color", "white");
}
}, background_selectors);
// Compute screenshot area, with some padding around the message group
const clip = {...(await messageListBox.boundingBox())};
clip.x -= 5;
clip.width += 10;
clip.y += 5;
clip.width -= 64;
clip.y += 10;
clip.height -= 8;
const imagePath = options.imagePath;
const imageDir = path.dirname(imagePath);
mkdirp.sync(imageDir);