Responsive snapshot capture + slow scrolling for CS

index.js

@@ -12,6 +12,8 @@ const ENV_INFO = `${seleniumPkg.name}/${seleniumPkg.version}`;
 const utils = require('@percy/sdk-utils');
 const { DriverMetadata } = require('./driverMetadata');
 const log = utils.logger('selenium-webdriver');
+const CS_MAX_SCREENSHOT_LIMIT = 25000;
+const SCROLL_DEFAULT_SLEEP_TIME = 0.45; // 450ms
 
 const getWidthsForMultiDOM = (userPassedWidths, eligibleWidths) => {
   // Deep copy of eligible mobile widths
@@ -67,17 +69,29 @@ async function captureResponsiveDOM(driver, options) {
   // Setup the resizeCount listener if not present
   /* istanbul ignore next: no instrumenting injected code */
   await driver.executeScript('PercyDOM.waitForResize()');
+  let height = currentHeight;
+  if (process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT) {
+    height = await driver.executeScript(`return window.outerHeight - window.innerHeight + ${utils.percy?.config?.snapshot?.minHeight}`);
+  }
   for (let width of widths) {
     if (lastWindowWidth !== width) {
       resizeCount++;
-      await changeWindowDimensionAndWait(driver, width, currentHeight, resizeCount);
+      await changeWindowDimensionAndWait(driver, width, height, resizeCount);
       lastWindowWidth = width;
     }
 
     if (process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) {
       await new Promise(resolve => setTimeout(resolve, parseInt(process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) * 1000));
     }
 
+    if (process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL) {
+      let scrollSleep = SCROLL_DEFAULT_SLEEP_TIME;
+      if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) {
+        scrollSleep = parseFloat(process.env.PERCY_LAZY_LOAD_SCROLL_TIME);
+      }
+      await module.exports.slowScrollToBottom(driver, scrollSleep);
+    }
+
     let domSnapshot = await captureSerializedDOM(driver, options);
     domSnapshot.width = width;
     domSnapshots.push(domSnapshot);
@@ -252,3 +266,28 @@ module.exports.percyScreenshot = async function percyScreenshot(driver, name, op
 module.exports.isPercyEnabled = async function isPercyEnabled() {
   return await utils.isPercyEnabled();
 };
+
+module.exports.slowScrollToBottom = async (driver, timeInSeconds = SCROLL_DEFAULT_SLEEP_TIME) => {
+  let scrollHeight = Math.min(await driver.executeScript('return document.documentElement.scrollHeight'), 25000);
+  const clientHeight = await driver.executeScript('return document.documentElement.clientHeight');
+  let current = 0;
+
+  let page = 1;
+  // Break the loop if maximum scroll height 25000px is reached
+  while (scrollHeight > current && current < CS_MAX_SCREENSHOT_LIMIT) {
+    current = clientHeight * page;
+    page += 1;
+    await driver.executeScript(`window.scrollTo(0, ${current})`);
+    await new Promise(resolve => setTimeout(resolve, timeInSeconds * 1000));
+
+    // Recalculate scroll height for dynamically loaded pages
+    scrollHeight = await driver.executeScript('return document.documentElement.scrollHeight');
+  }
+  // Get back to top
+  await driver.executeScript('window.scrollTo(0, 0)');
+  let sleepAfterScroll = 1;
+  if (process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE) {
+    sleepAfterScroll = parseFloat(process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE);
+  }
+  await new Promise(resolve => setTimeout(resolve, sleepAfterScroll * 1000));
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@percy/selenium-webdriver",
   "description": "Selenium client library for visual testing with Percy",
-  "version": "2.2.1-beta.0",
+  "version": "2.2.2-alpha.0",
   "license": "MIT",
   "author": "Perceptual Inc.",
   "repository": "https://github.com/percy/percy-selenium-js",
@@ -12,7 +12,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "alpha"
   },
   "main": "index.js",
   "types": "types/index.d.ts",