From 4fc82d66d1c249cdf6b8a8c5aaeda04db84a45c7 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 18:44:06 +0530 Subject: [PATCH 01/12] Reponsive snapshot capture + slow scrolling for CS --- index.js | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9eb781b..32ba9c9 100644 --- a/index.js +++ b/index.js @@ -67,10 +67,14 @@ 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) { + 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; } @@ -78,6 +82,14 @@ async function captureResponsiveDOM(driver, options) { 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) { + scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME); + } + await module.exports.slowScrollToBottom(driver, scrollSleep); + } + let domSnapshot = await captureSerializedDOM(driver, options); domSnapshot.width = width; domSnapshots.push(domSnapshot); @@ -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); + 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) { + 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.SLEEP_AFTER_SCROLL_DONE) { + sleepAfterScroll = parseFloat(process.env.SLEEP_AFTER_SCROLL_DONE); + } + await new Promise(resolve => setTimeout(resolve, sleepAfterScroll * 1000)); +}; From fa09ea5f6a4d7ecf1fe960345a1d0b8278e8995a Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 18:50:03 +0530 Subject: [PATCH 02/12] Release in alpha --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9d8feef..f67439d 100644 --- a/package.json +++ b/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", From 61b195c0274b3bd03e268e85d3d12cea43e17f99 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 19:02:20 +0530 Subject: [PATCH 03/12] Add PERCY_ before every env variable --- index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 32ba9c9..72ec9f0 100644 --- a/index.js +++ b/index.js @@ -68,7 +68,7 @@ async function captureResponsiveDOM(driver, options) { /* istanbul ignore next: no instrumenting injected code */ await driver.executeScript('PercyDOM.waitForResize()'); let height = currentHeight; - if (process.env.RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) { + if (process.env.PERCY_RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) { height = await driver.executeScript(`return window.outerHeight - window.innerHeight + ${utils.percy?.config?.snapshot?.minHeight}`); } for (let width of widths) { @@ -82,10 +82,10 @@ async function captureResponsiveDOM(driver, options) { await new Promise(resolve => setTimeout(resolve, parseInt(process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) * 1000)); } - if (process.env.RESPONSIVE_CAPTURE_SCROLL_ENABLED) { + if (process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_ENABLED) { let scrollSleep = 0.45; - if (process.env.RESPONSIVE_CAPTURE_SCROLL_TIME) { - scrollSleep = parseFloat(process.env.RESPONSIVE_CAPTURE_SCROLL_TIME); + if (process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_TIME) { + scrollSleep = parseFloat(process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_TIME); } await module.exports.slowScrollToBottom(driver, scrollSleep); } @@ -284,8 +284,8 @@ module.exports.slowScrollToBottom = async (driver, timeInSeconds = 0.45) => { // Get back to top 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); + if (process.env.PERCY_SLEEP_AFTER_SCROLL_DONE) { + sleepAfterScroll = parseFloat(process.env.PERCY_SLEEP_AFTER_SCROLL_DONE); } await new Promise(resolve => setTimeout(resolve, sleepAfterScroll * 1000)); }; From c048f3c95db1e41fd62b6ed5cbe850a3727b1756 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 19:04:54 +0530 Subject: [PATCH 04/12] Change env variable names --- index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 72ec9f0..3132ea8 100644 --- a/index.js +++ b/index.js @@ -12,6 +12,7 @@ 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 getWidthsForMultiDOM = (userPassedWidths, eligibleWidths) => { // Deep copy of eligible mobile widths @@ -82,10 +83,10 @@ async function captureResponsiveDOM(driver, options) { await new Promise(resolve => setTimeout(resolve, parseInt(process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) * 1000)); } - if (process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_ENABLED) { + if (process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL) { let scrollSleep = 0.45; - if (process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_TIME) { - scrollSleep = parseFloat(process.env.PERCY_RESPONSIVE_CAPTURE_SCROLL_TIME); + if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) { + scrollSleep = parseFloat(process.env.PERCY_LAZY_LOAD_SCROLL_TIME); } await module.exports.slowScrollToBottom(driver, scrollSleep); } @@ -272,7 +273,7 @@ module.exports.slowScrollToBottom = async (driver, timeInSeconds = 0.45) => { let page = 1; // Break the loop if maximum scroll height 25000px is reached - while (scrollHeight > current && current < 25000) { + while (scrollHeight > current && current < CS_MAX_SCREENSHOT_LIMIT) { current = clientHeight * page; page += 1; await driver.executeScript(`window.scrollTo(0, ${current})`); @@ -284,8 +285,8 @@ module.exports.slowScrollToBottom = async (driver, timeInSeconds = 0.45) => { // Get back to top await driver.executeScript('window.scrollTo(0, 0)'); let sleepAfterScroll = 1; - if (process.env.PERCY_SLEEP_AFTER_SCROLL_DONE) { - sleepAfterScroll = parseFloat(process.env.PERCY_SLEEP_AFTER_SCROLL_DONE); + 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)); }; From cd9c875f7d2cb4ce7a09c94d7bd8154a67db7d22 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 19:18:35 +0530 Subject: [PATCH 05/12] move sleep time to constant --- index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 3132ea8..57e1611 100644 --- a/index.js +++ b/index.js @@ -13,6 +13,7 @@ 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 @@ -69,7 +70,7 @@ async function captureResponsiveDOM(driver, options) { /* istanbul ignore next: no instrumenting injected code */ await driver.executeScript('PercyDOM.waitForResize()'); let height = currentHeight; - if (process.env.PERCY_RESPONSIVE_CAPTURE_USE_MIN_HEIGHT) { + 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) { @@ -84,7 +85,7 @@ async function captureResponsiveDOM(driver, options) { } if (process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL) { - let scrollSleep = 0.45; + let scrollSleep = SCROLL_DEFAULT_SLEEP_TIME; if (process.env.PERCY_LAZY_LOAD_SCROLL_TIME) { scrollSleep = parseFloat(process.env.PERCY_LAZY_LOAD_SCROLL_TIME); } @@ -266,7 +267,7 @@ module.exports.isPercyEnabled = async function isPercyEnabled() { return await utils.isPercyEnabled(); }; -module.exports.slowScrollToBottom = async (driver, timeInSeconds = 0.45) => { +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; From 22b0dc312ac174121237b764ec934c66c0ddcf74 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Mon, 16 Dec 2024 19:22:26 +0530 Subject: [PATCH 06/12] use constant variable instead of 25k --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 57e1611..36c0064 100644 --- a/index.js +++ b/index.js @@ -268,7 +268,7 @@ module.exports.isPercyEnabled = async function isPercyEnabled() { }; module.exports.slowScrollToBottom = async (driver, timeInSeconds = SCROLL_DEFAULT_SLEEP_TIME) => { - let scrollHeight = Math.min(await driver.executeScript('return document.documentElement.scrollHeight'), 25000); + let scrollHeight = Math.min(await driver.executeScript('return document.documentElement.scrollHeight'), CS_MAX_SCREENSHOT_LIMIT); const clientHeight = await driver.executeScript('return document.documentElement.clientHeight'); let current = 0; From 0fdb2aae0800ffe2ffd810b8267e84be9cf5a9d6 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Tue, 17 Dec 2024 01:21:52 +0530 Subject: [PATCH 07/12] Added tests --- test/index.test.mjs | 59 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/test/index.test.mjs b/test/index.test.mjs index 3d933e7..c9f8e22 100644 --- a/test/index.test.mjs +++ b/test/index.test.mjs @@ -3,7 +3,7 @@ import helpers from '@percy/sdk-utils/test/helpers'; import percySnapshot from '../index.js'; import utils from '@percy/sdk-utils'; import { Cache } from '../cache.js'; -const { percyScreenshot } = percySnapshot; +const { percyScreenshot, slowScrollToBottom } = percySnapshot; describe('percySnapshot', () => { let driver; @@ -14,7 +14,7 @@ describe('percySnapshot', () => { .forBrowser('firefox').build(); mockedDriver = { - getCapabilities: jasmine.createSpy('sendDevToolsCommand').and.returnValue({ getBrowserName: () => 'chrome'}), + getCapabilities: jasmine.createSpy('sendDevToolsCommand').and.returnValue({ getBrowserName: () => 'chrome' }), sendDevToolsCommand: jasmine.createSpy('sendDevToolsCommand').and.returnValue(Promise.resolve()), manage: jasmine.createSpy('manage').and.returnValue({ window: jasmine.createSpy('window').and.returnValue({ @@ -197,6 +197,34 @@ describe('percySnapshot', () => { delete process.env.RESPONSIVE_CAPTURE_SLEEP_TIME; }); + 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); + 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 () => { + process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL = true; + process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT = true; + utils.percy.config = { snapshot: { minHeight: 10 } }; + + const mockedScroll = spyOn(percySnapshot, 'slowScrollToBottom').and.resolveTo(true); + + await percySnapshot(mockedDriver, 'Test Snapshot', { responsiveSnapshotCapture: true }); + + expect(mockedDriver.executeScript.calls.allArgs()).toEqual(jasmine.arrayContaining([jasmine.arrayContaining(['return window.outerHeight - window.innerHeight + 900'])])); + expect(mockedScroll).toHaveBeenCalledWith(mockedDriver, 0.45); + delete process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL; + delete process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT; + }); + it('throw error in SDK if PERCY_RAISE_ERROR is true', async () => { process.env.PERCY_RAISE_ERROR = 'true'; await helpers.test('error', '/percy/healthcheck'); @@ -229,6 +257,33 @@ describe('percySnapshot', () => { }); }); +describe('#slowScrollToBottom', () => { + let mockedDriver = { executeScript: jasmine.createSpy('executeScript') }; + + it('should scroll to bottom and sleep 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(); + + await slowScrollToBottom(mockedDriver); + expect(setTimeout.calls.allArgs()).toEqual([[jasmine.any(Function), 450], [jasmine.any(Function), 450], [jasmine.any(Function), 2000]]); + expect(mockedDriver.executeScript).toHaveBeenCalledWith('window.scrollTo(0, 0)'); + expect(mockedDriver.executeScript).toHaveBeenCalledTimes(7); + delete process.env.PERCY_SLEEP_AFTER_LAZY_LOAD_COMPLETE; + }); + + 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); + spyOn(global, 'setTimeout').and.callThrough(); + + await slowScrollToBottom(mockedDriver, 2); + expect(setTimeout.calls.allArgs()).toEqual([[jasmine.any(Function), 2000], [jasmine.any(Function), 2000], [jasmine.any(Function), 1000]]); + expect(mockedDriver.executeScript).toHaveBeenCalledWith('window.scrollTo(0, 0)'); + expect(mockedDriver.executeScript).toHaveBeenCalledTimes(7); + }); +}); + describe('percyScreenshot', () => { class Browser { // Mocking WDIO driver constructor() { From 9b7f7633180c2da4ae05ec9ee54f18ab1008582c Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Tue, 17 Dec 2024 01:38:03 +0530 Subject: [PATCH 08/12] Fix test --- test/index.test.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/index.test.mjs b/test/index.test.mjs index c9f8e22..9b2908b 100644 --- a/test/index.test.mjs +++ b/test/index.test.mjs @@ -217,9 +217,10 @@ describe('percySnapshot', () => { const mockedScroll = spyOn(percySnapshot, 'slowScrollToBottom').and.resolveTo(true); + mockedDriver.executeScript.calls.reset(); await percySnapshot(mockedDriver, 'Test Snapshot', { responsiveSnapshotCapture: true }); - expect(mockedDriver.executeScript.calls.allArgs()).toEqual(jasmine.arrayContaining([jasmine.arrayContaining(['return window.outerHeight - window.innerHeight + 900'])])); + expect(mockedDriver.executeScript).toHaveBeenCalledTimes(4); expect(mockedScroll).toHaveBeenCalledWith(mockedDriver, 0.45); delete process.env.PERCY_ENABLE_LAZY_LOADING_SCROLL; delete process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT; From d2b64ff8c6d7afa7a78bc6c6f68d48d111911055 Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Tue, 17 Dec 2024 16:29:17 +0530 Subject: [PATCH 09/12] Add reload in responsive snapshot capture + tests --- index.js | 24 +++++++++++++++--------- test/index.test.mjs | 33 ++++++++++++++++++++++++++------- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index 36c0064..7891bc2 100644 --- a/index.js +++ b/index.js @@ -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); @@ -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; @@ -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)'); diff --git a/test/index.test.mjs b/test/index.test.mjs index 9b2908b..86da2e3 100644 --- a/test/index.test.mjs +++ b/test/index.test.mjs @@ -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()), @@ -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(); @@ -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 () => { @@ -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; }); @@ -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(); @@ -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); From 9b5d075d4af3fac4a45ba35c104c9d7d608ba8fa Mon Sep 17 00:00:00 2001 From: Chinmay Maheshwari Date: Tue, 17 Dec 2024 17:53:07 +0530 Subject: [PATCH 10/12] Release 2.2.2-alpha.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f67439d..b267e84 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@percy/selenium-webdriver", "description": "Selenium client library for visual testing with Percy", - "version": "2.2.2-alpha.0", + "version": "2.2.2-alpha.1", "license": "MIT", "author": "Perceptual Inc.", "repository": "https://github.com/percy/percy-selenium-js", From a075a0dd57ca940263eb02b1ca1b79839d8b3021 Mon Sep 17 00:00:00 2001 From: amit3200 Date: Wed, 18 Dec 2024 01:30:15 +0530 Subject: [PATCH 11/12] Disabling CDP Resize --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 7891bc2..833de7c 100644 --- a/index.js +++ b/index.js @@ -33,7 +33,7 @@ const getWidthsForMultiDOM = (userPassedWidths, eligibleWidths) => { async function changeWindowDimensionAndWait(driver, width, height, resizeCount) { try { const caps = await driver.getCapabilities(); - if (typeof driver?.sendDevToolsCommand === 'function' && caps.getBrowserName() === 'chrome') { + if (typeof driver?.sendDevToolsCommand === 'function' && caps.getBrowserName() === 'chrome' && process.env.PERCY_DISABLE_CDP_RESIZE !== 'true') { await driver?.sendDevToolsCommand('Emulation.setDeviceMetricsOverride', { height, width, From e6ef05c7400be91e82c33307b4312185c4d2199f Mon Sep 17 00:00:00 2001 From: amit3200 Date: Wed, 18 Dec 2024 01:31:34 +0530 Subject: [PATCH 12/12] release v2.2.2-alpha.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b267e84..bf17f3f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@percy/selenium-webdriver", "description": "Selenium client library for visual testing with Percy", - "version": "2.2.2-alpha.1", + "version": "2.2.2-alpha.2", "license": "MIT", "author": "Perceptual Inc.", "repository": "https://github.com/percy/percy-selenium-js",