Fix sticky header issue for FPS

Author: pinanks

package.json

@@ -37,7 +37,6 @@
     "fastify": "^4.24.3",
     "form-data": "^4.0.0",
     "listr2": "^7.0.1",
-    "scroll-to-bottomjs": "^1.1.0",
     "tsup": "^7.2.0",
     "which": "^4.0.0",
     "winston": "^3.10.0"

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { chromium, firefox, webkit, Browser } from "@playwright/test"
 import { Context, WebStaticConfig } from "../types.js"
-import { delDir, ensureHttps } from "./utils.js"
-import scrollToBottom from 'scroll-to-bottomjs'
+import { delDir, ensureHttps, scrollToBottomAndBackToTop } from "./utils.js"
+import chalk from 'chalk';
 
 const BROWSER_CHROME = 'chrome';
 const BROWSER_SAFARI = 'safari';
@@ -18,7 +18,8 @@ export async function captureScreenshots(ctx: Context, screenshots: WebStaticCon
     // Capture screenshots for every browser-viewport and upload them
     let totalBrowsers: number = ctx.webConfig.browsers.length;
     let totalViewports: number = ctx.webConfig.viewports.length;
-    let totalScreenshots: number = screenshots.length
+    let totalScreenshots: number = screenshots.length;
+    let capturedScreenshots: number = 0;
     for (let i = 0; i < totalBrowsers; i++) {
         let browserName = ctx.webConfig.browsers[i]?.toLowerCase();
         let browser: Browser;
@@ -60,13 +61,16 @@ export async function captureScreenshots(ctx: Context, screenshots: WebStaticCon
                     let ssName = `${browserName}-${width}x${height}-${screenshotId}.png`
                     let ssPath = `screenshots/${screenshotId}/${ssName}.png`
                     await page.setViewportSize({ width, height: height || MIN_RESOLUTION_HEIGHT })
-                    if (height === 0) await page.evaluate(scrollToBottom)
-                    await page.waitForTimeout(screenshot.waitForTimeout || 0)
+                    if (height === 0) await page.evaluate(scrollToBottomAndBackToTop);
+                    await page.waitForTimeout(screenshot.waitForTimeout || 0);
                     await page.screenshot({ path: ssPath, fullPage: height ? false: true });
 
                     let completed = (i == (totalBrowsers-1) && j == (totalScreenshots-1) && k == (totalViewports-1)) ? true : false;
                     browserName = browserName === BROWSER_SAFARI ? PW_WEBKIT : browserName;
                     ctx.client.uploadScreenshot(ctx.build, ssPath, screenshot.name, browserName, `${width}x${height}`, completed);
+                    capturedScreenshots++;
+
+                    ctx.task.output = chalk.gray(`screenshots captured: ${capturedScreenshots}/${totalBrowsers * totalViewports * totalScreenshots}`);
                 }
 
                 await page.close();

src/lib/screenshot.ts

@@ -25,4 +25,35 @@ export function ensureHttps(urlString: string) {
         console.error('Invalid URL: '+urlString, error);
         return null;
     }
+}
+
+export function scrollToBottomAndBackToTop({
+    frequency = 100,
+    timing = 8,
+    remoteWindow = window 
+} = {}): Promise<void> {
+    return new Promise(resolve => {
+        let scrolls = 1;
+        let scrollLength = remoteWindow.document.body.scrollHeight / frequency;
+    
+        (function scroll() {
+            let scrollBy = scrollLength * scrolls;
+
+            remoteWindow.setTimeout(() => {
+                    remoteWindow.scrollTo(0, scrollBy);
+            
+                    if (scrolls < frequency) {
+                        scrolls += 1;
+                        scroll();
+                    }
+            
+                    if (scrolls === frequency) {
+                        remoteWindow.setTimeout(() => {
+                            remoteWindow.scrollTo(0,0)
+                            resolve();
+                        }, timing);
+                    }    
+            }, timing);
+        })();
+    });
 }

src/lib/utils.ts

@@ -8,9 +8,9 @@ export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRen
         title: 'Capturing screenshots',
         task: async (ctx, task): Promise<void> => {
             try {
-                let { webStaticConfig: screenshots } = ctx;
+                ctx.task = task;
 
-                let totalScreenshots = await captureScreenshots(ctx, screenshots);
+                let totalScreenshots = await captureScreenshots(ctx, ctx.webStaticConfig);
                 task.title = 'Screenshots captured successfully'
                 task.output = chalk.gray(`total screenshots: ${totalScreenshots}`)
             } catch (error: any) {

src/tasks/captureScreenshots.ts

@@ -2,10 +2,12 @@ import { Server, IncomingMessage, ServerResponse } from 'http'
 import { FastifyInstance } from 'fastify'
 import httpClient from './lib/httpClient.js'
 import type { Logger } from 'winston'
+import { ListrTaskWrapper, ListrRenderer } from "listr2";
 
 export interface Context {
     env: Env;
     log: Logger;
+    task: ListrTaskWrapper<Context, typeof ListrRenderer, typeof ListrRenderer>
     server?: FastifyInstance<Server, IncomingMessage, ServerResponse>;
     client: httpClient;
     webConfig: {
@@ -22,7 +24,6 @@ export interface Context {
     }
     cliVersion: string;
     totalSnapshots: number;
-    
 }
 
 export interface Env {