Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive snapshot capture + slow scrolling for CS #594

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+125 −5
Open

Responsive snapshot capture + slow scrolling for CS #594

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4fc82d6
Reponsive snapshot capture + slow scrolling for CS
chinmay-browserstack Dec 16, 2024
fa09ea5
Release in alpha
chinmay-browserstack Dec 16, 2024
61b195c
Add PERCY_ before every env variable
chinmay-browserstack Dec 16, 2024
c048f3c
Change env variable names
chinmay-browserstack Dec 16, 2024
cd9c875
move sleep time to constant
chinmay-browserstack Dec 16, 2024
22b0dc3
use constant variable instead of 25k
chinmay-browserstack Dec 16, 2024
0fdb2aa
Added tests
chinmay-browserstack Dec 16, 2024
9b7f763
Fix test
chinmay-browserstack Dec 16, 2024
d2b64ff
Add reload in responsive snapshot capture + tests
chinmay-browserstack Dec 17, 2024
9b5d075
Release 2.2.2-alpha.1
chinmay-browserstack Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 38 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add prefix of PERCY_

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

let scrollSleep = 0.45;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Constant variable?

if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_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);
Expand Down Expand Up @@ -252,3 +264,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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't the constant variable be used here?

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 < 25000) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

25000 read it from constants

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default sleep? variable?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is sleep after we get back to top

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (process.env.SLEEP_AFTER_SCROLL_DONE) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

sleepAfterScroll = parseFloat(process.env.SLEEP_AFTER_SCROLL_DONE);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}
await new Promise(resolve => setTimeout(resolve, sleepAfterScroll * 1000));
};
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -12,7 +12,7 @@
],
"publishConfig": {
"access": "public",
"tag": "beta"
"tag": "alpha"
},
"main": "index.js",
"types": "types/index.d.ts",
Expand Down
Loading