Responsive snapshot capture + slow scrolling for CS #594

chinmay-browserstack · 2024-12-16T13:18:15Z

Expose functionality for slow scrolling for CS
In responsive snapshot capture support using minHeight as height.

ENV added

PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE: Reloads page in responsive snapshot capture after each resize
PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT : this will use min height passed in .percy.yml file while resizing browser in responsive capture.
PERCY_ENABLE_LAZY_LOADING_SCROLL : when this is set we will scroll to bottom after resize in completed and before capturing dom for handling lazy loading.
PERCY_LAZY_LOAD_SCROLL_TIME : how much time to sleep after each scroll
PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE : time to sleep after getting back to top

Amit3200 · 2024-12-16T13:27:42Z

index.js

@@ -67,17 +67,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.RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) {


Please add prefix of PERCY_

Amit3200 · 2024-12-16T13:28:33Z

index.js

      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.RESPONSIVE_CAPTURE_SCROLL_ENABLED) {


Suggested change

if (process.env.RESPONSIVE_CAPTURE_SCROLL_ENABLED) {

if (process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL) {

Amit3200 · 2024-12-16T13:29:48Z

index.js

      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.RESPONSIVE_CAPTURE_SCROLL_ENABLED) {
+      let scrollSleep = 0.45;
+      if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) {


Suggested change

if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) {

if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) {

Amit3200 · 2024-12-16T13:30:02Z

index.js

+    if (process.env.RESPONSIVE_CAPTURE_SCROLL_ENABLED) {
+      let scrollSleep = 0.45;
+      if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) {
+        scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME);


Suggested change

scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME);

scrollSleep = parseFloat(process.env. PERCY_LAZY_LOAD_SCROLL_TIME);

Amit3200 · 2024-12-16T13:31:46Z

index.js

+
+  let page = 1;
+  // Break the loop if maximum scroll height 25000px is reached
+  while (scrollHeight > current && current < 25000) {


25000 read it from constants

Amit3200 · 2024-12-16T13:34:03Z

index.js

+  // Get back to top
+  await driver.executeScript('window.scrollTo(0, 0)');
+  let sleepAfterScroll = 1;
+  if (process.env.SLEEP_AFTER_SCROLL_DONE) {


Suggested change

if (process.env.SLEEP_AFTER_SCROLL_DONE) {

if (process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE) {

Amit3200 · 2024-12-16T13:34:17Z

index.js

+  await driver.executeScript('window.scrollTo(0, 0)');
+  let sleepAfterScroll = 1;
+  if (process.env.SLEEP_AFTER_SCROLL_DONE) {
+    sleepAfterScroll = parseFloat(process.env.SLEEP_AFTER_SCROLL_DONE);


Suggested change

sleepAfterScroll = parseFloat(process.env.SLEEP_AFTER_SCROLL_DONE);

sleepAfterScroll = parseFloat(process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE);

Amit3200 · 2024-12-16T13:45:50Z

index.js

@@ -67,17 +68,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_USE_MIN_HEIGHT) {


Suggested change

if (process.env.PERCY_RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) {

if (process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT) {

Amit3200 · 2024-12-16T13:46:15Z

index.js

      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 = 0.45;


Constant variable?

Amit3200 · 2024-12-16T13:46:39Z

index.js

@@ -252,3 +265,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 = 0.45) => {
+  let scrollHeight = Math.min(await driver.executeScript('return document.documentElement.scrollHeight'), 25000);


shouldn't the constant variable be used here?

Amit3200 · 2024-12-16T13:51:17Z

index.js

+  }
+  // Get back to top
+  await driver.executeScript('window.scrollTo(0, 0)');
+  let sleepAfterScroll = 1;


default sleep? variable?

this is sleep after we get back to top

since we are reseting it based on env variable it is variable(let)

Reponsive snapshot capture + slow scrolling for CS

4fc82d6

chinmay-browserstack requested a review from a team as a code owner December 16, 2024 13:18

chinmay-browserstack requested review from pankaj443 and shantanuk-browserstack December 16, 2024 13:18

Release in alpha

fa09ea5

Amit3200 reviewed Dec 16, 2024

View reviewed changes

Add PERCY_ before every env variable

61b195c

Amit3200 reviewed Dec 16, 2024

View reviewed changes

Change env variable names

c048f3c

chinmay-browserstack requested a review from Amit3200 December 16, 2024 13:36

Amit3200 reviewed Dec 16, 2024

View reviewed changes

move sleep time to constant

cd9c875

Amit3200 reviewed Dec 16, 2024

View reviewed changes

chinmay-browserstack added 3 commits December 16, 2024 19:22

use constant variable instead of 25k

22b0dc3

Added tests

0fdb2aa

Fix test

9b7f763

chinmay-browserstack requested a review from Amit3200 December 17, 2024 05:43

chinmay-browserstack and others added 4 commits December 17, 2024 16:29

Add reload in responsive snapshot capture + tests

d2b64ff

Release 2.2.2-alpha.1

9b5d075

Disabling CDP Resize

a075a0d

release v2.2.2-alpha.2

e6ef05c

rishigupta1599 approved these changes Dec 17, 2024

View reviewed changes

pankaj443 approved these changes Dec 20, 2024

View reviewed changes

chinmay-browserstack merged commit 612e745 into master Dec 20, 2024
13 checks passed

chinmay-browserstack deleted the responsive_capture_for_cs branch December 20, 2024 07:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive snapshot capture + slow scrolling for CS #594

Responsive snapshot capture + slow scrolling for CS #594

chinmay-browserstack commented Dec 16, 2024 •

edited

Loading

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

Amit3200 Dec 16, 2024

chinmay-browserstack Dec 16, 2024

chinmay-browserstack Dec 16, 2024

	if (process.env.RESPONSIVE_CAPTURE_SCROLL_ENABLED) {
	if (process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL) {

	if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) {
	if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) {

	scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME);
	scrollSleep = parseFloat(process.env. PERCY_LAZY_LOAD_SCROLL_TIME);

	if (process.env.SLEEP_AFTER_SCROLL_DONE) {
	if (process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE) {

	sleepAfterScroll = parseFloat(process.env.SLEEP_AFTER_SCROLL_DONE);
	sleepAfterScroll = parseFloat(process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE);

	if (process.env.PERCY_RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) {
	if (process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT) {

Responsive snapshot capture + slow scrolling for CS #594

Responsive snapshot capture + slow scrolling for CS #594

Conversation

chinmay-browserstack commented Dec 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chinmay-browserstack commented Dec 16, 2024 •

edited

Loading