Skip to content

Commit

Permalink
Add reload in responsive snapshot capture + tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinmay-browserstack
chinmay-browserstack committed Dec 17, 2024
1 parent 9b7f763 commit d2b64ff
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 16 deletions.
24 changes: 15 additions & 9 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,17 @@ async function captureResponsiveDOM(driver, options) {
lastWindowWidth = width;
}

if (process.env.PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE) {
await driver.navigate().refresh();
await driver.executeScript(await utils.fetchPercyDOM());
}

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);
await module.exports.slowScrollToBottom(driver);
}

let domSnapshot = await captureSerializedDOM(driver, options);
Expand Down Expand Up @@ -267,8 +268,13 @@ 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'), CS_MAX_SCREENSHOT_LIMIT);
module.exports.slowScrollToBottom = async (driver, scrollSleep = SCROLL_DEFAULT_SLEEP_TIME) => {
if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) {
scrollSleep = parseFloat(process.env.PERCY_LAZY_LOAD_SCROLL_TIME);
}

const scrollHeightCommand = 'return Math.max(document.body.scrollHeight, document.body.clientHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight, document.documentElement.offsetHeight);';
let scrollHeight = Math.min(await driver.executeScript(scrollHeightCommand), CS_MAX_SCREENSHOT_LIMIT);
const clientHeight = await driver.executeScript('return document.documentElement.clientHeight');
let current = 0;

Expand All @@ -278,10 +284,10 @@ module.exports.slowScrollToBottom = async (driver, timeInSeconds = SCROLL_DEFAUL
current = clientHeight * page;
page += 1;
await driver.executeScript(`window.scrollTo(0, ${current})`);
await new Promise(resolve => setTimeout(resolve, timeInSeconds * 1000));
await new Promise(resolve => setTimeout(resolve, scrollSleep * 1000));

// Recalculate scroll height for dynamically loaded pages
scrollHeight = await driver.executeScript('return document.documentElement.scrollHeight');
scrollHeight = await driver.executeScript(scrollHeightCommand);
}
// Get back to top
await driver.executeScript('window.scrollTo(0, 0)');
Expand Down
33 changes: 26 additions & 7 deletions test/index.test.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ describe('percySnapshot', () => {
mockedDriver = {
getCapabilities: jasmine.createSpy('sendDevToolsCommand').and.returnValue({ getBrowserName: () => 'chrome' }),
sendDevToolsCommand: jasmine.createSpy('sendDevToolsCommand').and.returnValue(Promise.resolve()),
navigate: jasmine.createSpy('navigate').and.returnValue({ refresh: jasmine.createSpy('refresh') }),
manage: jasmine.createSpy('manage').and.returnValue({
window: jasmine.createSpy('window').and.returnValue({
setRect: jasmine.createSpy('setRect').and.returnValue(Promise.resolve()),
Expand Down Expand Up @@ -187,6 +188,13 @@ describe('percySnapshot', () => {
expect(mockedDriver.executeScript).not.toHaveBeenCalledWith('return window.resizeCount');
});

it('should reload page if PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE is set', async () => {
process.env.PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE = true;
await percySnapshot(mockedDriver, 'Test Snapshot', { responsiveSnapshotCapture: true });
expect(mockedDriver.navigate().refresh).toHaveBeenCalled();
delete process.env.PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE;
});

it('should wait if RESPONSIVE_CAPTURE_SLEEP_TIME is set', async () => {
process.env.RESPONSIVE_CAPTURE_SLEEP_TIME = 1;
spyOn(global, 'setTimeout').and.callThrough();
Expand All @@ -199,15 +207,11 @@ describe('percySnapshot', () => {

it('should scroll if PERCY_ENABLE_LAZY_LOADING_SCROLL is set', async () => {
process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL = true;
process.env.PERCY_LAZY_LOAD_SCROLL_TIME = '1.2';

const mockedScroll = spyOn(percySnapshot, 'slowScrollToBottom').and.resolveTo(true);

await percySnapshot(mockedDriver, 'Test Snapshot', { responsiveSnapshotCapture: true });

expect(mockedScroll).toHaveBeenCalledWith(mockedDriver, 1.2);
expect(mockedScroll).toHaveBeenCalledWith(mockedDriver);
delete process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL;
delete process.env.PERCY_LAZY_LOAD_SCROLL_TIME;
});

it('should use minHeight if PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT is set', async () => {
Expand All @@ -221,7 +225,7 @@ describe('percySnapshot', () => {
await percySnapshot(mockedDriver, 'Test Snapshot', { responsiveSnapshotCapture: true });

expect(mockedDriver.executeScript).toHaveBeenCalledTimes(4);
expect(mockedScroll).toHaveBeenCalledWith(mockedDriver, 0.45);
expect(mockedScroll).toHaveBeenCalledWith(mockedDriver);
delete process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL;
delete process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT;
});
Expand Down Expand Up @@ -260,8 +264,11 @@ describe('percySnapshot', () => {

describe('#slowScrollToBottom', () => {
let mockedDriver = { executeScript: jasmine.createSpy('executeScript') };
beforeEach(() => {
mockedDriver.executeScript.calls.reset();
});

it('should scroll to bottom and sleep as set in env', async () => {
it('should scroll to bottom and sleep after loading as set in env', async () => {
process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE = 2;
mockedDriver.executeScript.and.returnValues(9, 5, true, 9, true, 9, true);
spyOn(global, 'setTimeout').and.callThrough();
Expand All @@ -273,6 +280,18 @@ describe('#slowScrollToBottom', () => {
delete process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE;
});

it('should scroll to bottom and sleep as set in env', async () => {
process.env.PERCY_LAZY_LOAD_SCROLL_TIME = '1.2';
mockedDriver.executeScript.and.returnValues(9, 5, true, 9, true, 9, true);
spyOn(global, 'setTimeout').and.callThrough();

await slowScrollToBottom(mockedDriver);
expect(setTimeout.calls.allArgs()).toEqual([[jasmine.any(Function), 1200], [jasmine.any(Function), 1200], [jasmine.any(Function), 1000]]);
expect(mockedDriver.executeScript).toHaveBeenCalledWith('window.scrollTo(0, 0)');
expect(mockedDriver.executeScript).toHaveBeenCalledTimes(7);
delete process.env.PERCY_LAZY_LOAD_SCROLL_TIME;
});

it('should scroll upto 25k px and sleep as passed in function', async () => {
mockedDriver.executeScript = jasmine.createSpy('executeScript');
mockedDriver.executeScript.and.returnValues(30000, 15000, true, 30000, true, 30000, true);
Expand Down

0 comments on commit d2b64ff

Please sign in to comment.