chore: fix scrollToBottom for screenshots (#1911)

* chore: fix scrollToBottom for screenshots

* chore: increase sleep by 1s

ui/screenshot.js

@@ -8,6 +8,13 @@ const screenshot = async (page, name) => {
   await page.screenshot({ path: 'screenshots/' + name });
 };
 
+const scrollToBottom = async (page) => {
+  await sleep(1000);
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+};
+
 const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
 
 const capture = async function (folder, name, fn, opts = {}) {
@@ -43,17 +50,17 @@ const capture = async function (folder, name, fn, opts = {}) {
   const browser = await chromium.launch({ headless: true });
   const context = await browser.newContext({
     viewport: { width: 1440, height: 900 },
-    deviceScaleFactor: 3,
+    deviceScaleFactor: 3
   });
   const page = await context.newPage();
 
   await page.goto(fliptAddr);
   await fn(page);
-  await sleep(3000);
+  await sleep(4000);
   await screenshot(page, `${folder}/${name}.png`);
 
   await context.close();
   await browser.close();
 };
 
-module.exports = { capture, sleep, screenshot };
+module.exports = { capture, sleep, screenshot, scrollToBottom };

ui/screenshot/concepts/constraints.js

@@ -1,12 +1,9 @@
-const { capture } = require('../../screenshot.js');
+const { capture, scrollToBottom } = require('../../screenshot.js');
 
 (async () => {
   await capture('concepts', 'constraints', async (page) => {
     await page.getByRole('link', { name: 'Segments' }).click();
     await page.getByRole('link', { name: 'new-users' }).click();
-    await page.evaluate(() =>
-      // scroll to bottom of page to show all constraints
-      window.scrollTo(0, document.documentElement.scrollHeight)
-    );
+    await scrollToBottom(page);
   });
 })();

ui/screenshot/concepts/rollouts.js

@@ -1,11 +1,8 @@
-const { capture } = require('../../screenshot.js');
+const { capture, scrollToBottom } = require('../../screenshot.js');
 
 (async () => {
   await capture('concepts', 'rollouts', async (page) => {
     await page.getByRole('link', { name: 'new-contact-page' }).click();
-    await page.evaluate(() =>
-      // scroll to bottom of page to show all rollouts
-      window.scrollTo(0, document.documentElement.scrollHeight)
-    );
+    await scrollToBottom(page);
   });
 })();

ui/screenshot/concepts/variants.js

@@ -1,11 +1,8 @@
-const { capture } = require('../../screenshot.js');
+const { capture, scrollToBottom } = require('../../screenshot.js');
 
 (async () => {
   await capture('concepts', 'variants', async (page) => {
     await page.getByRole('link', { name: 'colorscheme' }).click();
-    await page.evaluate(() =>
-      // scroll to bottom of page to show all variants
-      window.scrollTo(0, document.documentElement.scrollHeight)
-    );
+    await scrollToBottom(page);
   });
 })();