Adding PoA FullPage Support (#1431)

* Adding FullPage Support * Using tile based response * Fixing metadata * Fixing coverage * Adding coverage * Resolving comments * Resolving conflicts * Removing conflict * Resolving conflicts * Adding endl * Fixing tests * Fixing ignoreRegions for POA Full Page (#1466) * Fixing ignoreRegions for POA Full Page * Adding specs * Fixing coverage * Cleaning specs * Resolving comments * Resolving comments * Sending screenshotType to API (#1473) --------- Co-authored-by: rishigupta1599 <[email protected]> Co-authored-by: rishigupta1599 <[email protected]>
percy · Dec 20, 2023 · 4080a78 · 4080a78
1 parent bb2bfad
commit 4080a78
Show file tree

Hide file tree

Showing 8 changed files with 472 additions and 221 deletions.
diff --git a/packages/client/test/client.test.js b/packages/client/test/client.test.js
@@ -861,7 +861,8 @@ describe('PercyClient', () => {
         consideredElementsData: consideredElementsData,
         domInfoSha: 'abcd=',
         metadata: {
-          windowHeight: 1947
+          windowHeight: 1947,
+          screenshotType: 'singlepage'
         }
       })).toBeResolved();
 
@@ -874,7 +875,8 @@ describe('PercyClient', () => {
             'consider-elements-data': consideredElementsData,
             'dom-info-sha': 'abcd=',
             metadata: {
-              windowHeight: 1947
+              windowHeight: 1947,
+              screenshotType: 'singlepage'
             }
           },
           relationships: {
@@ -1010,6 +1012,7 @@ describe('PercyClient', () => {
         externalDebugUrl: 'https://automate.browserstack.com/builds/acs',
         metadata: {
           windowHeight: 1947,
+          screenshotType: 'fullpage',
           abc: 123
         }
       };

diff --git a/packages/core/src/config.js b/packages/core/src/config.js
@@ -545,7 +545,8 @@ export const comparisonSchema = {
           minimum: 0
         },
         cliScreenshotStartTime: { type: 'integer', default: 0 },
-        cliScreenshotEndTime: { type: 'integer', default: 0 }
+        cliScreenshotEndTime: { type: 'integer', default: 0 },
+        screenshotType: { type: 'string', default: 'singlepage' }
       }
     },
     tag: {

diff --git a/packages/core/src/utils.js b/packages/core/src/utils.js
@@ -48,7 +48,8 @@ export function percyAutomateRequestHandler(req, percy) {
     ignoreRegionSelectors: percy.config.snapshot.ignoreRegions?.ignoreRegionSelectors,
     ignoreRegionXpaths: percy.config.snapshot.ignoreRegions?.ignoreRegionXpaths,
     considerRegionSelectors: percy.config.snapshot.considerRegions?.considerRegionSelectors,
-    considerRegionXpaths: percy.config.snapshot.considerRegions?.considerRegionXpaths
+    considerRegionXpaths: percy.config.snapshot.considerRegions?.considerRegionXpaths,
+    version: 'v2'
   },
   camelCasedOptions
   ], (path, prev, next) => {

diff --git a/packages/core/test/api.test.js b/packages/core/test/api.test.js
@@ -307,7 +307,8 @@ describe('API Server', () => {
         percyCSS: '.global { color: blue }\n.percy-screenshot: { color: red }',
         ignoreRegionSelectors: ['.selector-global'],
         ignoreRegionXpaths: ['/xpath-per-screenshot'],
-        considerRegionXpaths: ['/xpath-global', '/xpath-per-screenshot']
+        considerRegionXpaths: ['/xpath-global', '/xpath-per-screenshot'],
+        version: 'v2'
       }
     }));
 

diff --git a/packages/webdriver-utils/src/providers/automateProvider.js b/packages/webdriver-utils/src/providers/automateProvider.js
@@ -123,15 +123,16 @@ export default class AutomateProvider extends GenericProvider {
     });
   }
 
-  async getTiles(headerHeight, footerHeight, fullscreen) {
+  async getTiles(fullscreen) {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
     log.debug('Starting actual screenshotting phase');
     const dpr = await this.metaData.devicePixelRatio();
+    const screenshotType = this.options?.fullPage ? 'fullpage' : 'singlepage';
     const response = await TimeIt.run('percyScreenshot:screenshot', async () => {
       return await this.browserstackExecutor('percyScreenshot', {
         state: 'screenshot',
         percyBuildId: this.buildInfo.id,
-        screenshotType: 'singlepage',
+        screenshotType: screenshotType,
         scaleFactor: dpr,
         options: this.options
       });
@@ -146,20 +147,18 @@ export default class AutomateProvider extends GenericProvider {
     const tiles = [];
     const tileResponse = JSON.parse(responseValue.result);
     log.debug('Tiles captured successfully');
-    const windowHeight = responseValue?.metadata?.window_height || 0;
-    for (let tileData of tileResponse.sha) {
+    for (let tileData of tileResponse.tiles) {
       tiles.push(new Tile({
-        statusBarHeight: tileResponse.header_height || 0,
-        navBarHeight: tileResponse.footer_height || 0,
-        headerHeight,
-        footerHeight,
+        statusBarHeight: tileData.status_bar || 0,
+        navBarHeight: tileData.nav_bar || 0,
+        headerHeight: tileData.header_height || 0,
+        footerHeight: tileData.footer_height || 0,
         fullscreen,
-        sha: tileData.split('-')[0] // drop build id
+        sha: tileData.sha.split('-')[0] // drop build id
       }));
     }
-
     const metadata = {
-      windowHeight: Math.ceil(windowHeight * dpr)
+      screenshotType: screenshotType
     };
     return { tiles: tiles, domInfoSha: tileResponse.dom_sha, metadata: metadata };
   }

diff --git a/packages/webdriver-utils/src/providers/genericProvider.js b/packages/webdriver-utils/src/providers/genericProvider.js
@@ -38,7 +38,7 @@ export default class GenericProvider {
     this.pageYShiftFactor = 0;
     this.currentTag = null;
     this.removeElementShiftFactor = 50000;
-    this.initialScrollFactor = { value: [0, 0] };
+    this.initialScrollLocation = null;
   }
 
   addDefaultOptions() {
@@ -69,16 +69,24 @@ export default class GenericProvider {
     }
   }
 
-  async getInitialPosition() {
-    if (this.currentTag.osName === 'iOS') {
-      this.initialScrollFactor = await this.driver.executeScript({ script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];', args: [] });
-    }
+  isIOS() {
+    return this.currentTag?.osName === 'iOS';
+  }
+
+  async getScrollDetails() {
+    return await this.driver.executeScript({ script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];', args: [] });
   }
 
-  async scrollToInitialPosition(x, y) {
-    if (this.currentTag.osName === 'iOS') {
-      await this.driver.executeScript({ script: `window.scrollTo(${x}, ${y})`, args: [] });
+  async getInitialScrollLocation() {
+    if (this.initialScrollLocation) {
+      return this.initialScrollLocation;
     }
+    this.initialScrollLocation = await this.getScrollDetails();
+    return this.initialScrollLocation;
+  }
+
+  async scrollToPosition(x, y) {
+    await this.driver.executeScript({ script: `window.scrollTo(${x}, ${y})`, args: [] });
   }
 
   async screenshot(name, {
@@ -101,7 +109,7 @@ export default class GenericProvider {
     const tag = await this.getTag();
     log.debug(`[${name}] : Tag ${JSON.stringify(tag)}`);
 
-    const tiles = await this.getTiles(this.header, this.footer, fullscreen);
+    const tiles = await this.getTiles(fullscreen);
     log.debug(`[${name}] : Tiles ${JSON.stringify(tiles)}`);
 
     this.currentTag = tag;
@@ -146,7 +154,7 @@ export default class GenericProvider {
     return await this.driver.executeScript({ script: 'return window.innerHeight', args: [] }); ;
   }
 
-  async getTiles(headerHeight, footerHeight, fullscreen) {
+  async getTiles(fullscreen) {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
     const base64content = await this.driver.takeScreenshot();
     log.debug('Tiles captured successfully');
@@ -156,8 +164,8 @@ export default class GenericProvider {
           content: base64content,
           statusBarHeight: 0,
           navBarHeight: 0,
-          headerHeight,
-          footerHeight,
+          headerHeight: this.header,
+          footerHeight: this.footer,
           fullscreen
         })
       ],
@@ -212,6 +220,9 @@ export default class GenericProvider {
     document.head.appendChild(e);`;
 
     await this.driver.executeScript({ script: jsScript, args: [] });
+    if (this.options?.fullPage || this.isIOS()) {
+      await this.getInitialScrollLocation();
+    }
   }
 
   async undoTransformations(data) {
@@ -245,15 +256,21 @@ export default class GenericProvider {
 
   async getRegionObjectFromBoundingBox(selector, element) {
     const scaleFactor = await this.metaData.devicePixelRatio();
+    let scrollX = 0, scrollY = 0;
+    if (this.options?.fullPage) {
+      scrollX = this.initialScrollLocation.value[0];
+      scrollY = this.initialScrollLocation.value[1];
+    }
+
     let headerAdjustment = 0;
-    if (this.currentTag.osName === 'iOS') {
+    if (this.isIOS()) {
       headerAdjustment = this.statusBarHeight;
     }
     const coOrdinates = {
-      top: Math.floor(element.y * scaleFactor) + Math.floor(headerAdjustment),
-      bottom: Math.ceil((element.y + element.height) * scaleFactor) + Math.ceil(headerAdjustment),
-      left: Math.floor(element.x * scaleFactor),
-      right: Math.ceil((element.x + element.width) * scaleFactor)
+      top: Math.floor((element.y + scrollY) * scaleFactor) + Math.floor(headerAdjustment),
+      bottom: Math.ceil((element.y + element.height + scrollY) * scaleFactor) + Math.ceil(headerAdjustment),
+      left: Math.floor((element.x + scrollX) * scaleFactor),
+      right: Math.ceil((element.x + element.width + scrollX) * scaleFactor)
     };
 
     const jsonObject = {
@@ -280,16 +297,15 @@ export default class GenericProvider {
     return regionsArray;
   }
 
-  async updatePageShiftFactor(location, scaleFactor) {
-    const scrollFactors = await this.driver.executeScript({ script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];', args: [] });
-    if (this.currentTag.osName === 'iOS' || (this.currentTag.osName === 'OS X' && parseInt(this.currentTag.browserVersion) > 13 && this.currentTag.browserName.toLowerCase() === 'safari')) {
+  async updatePageShiftFactor(location, scaleFactor, scrollFactors) {
+    if (this.isIOS() || (this.currentTag.osName === 'OS X' && parseInt(this.currentTag.browserVersion) > 13 && this.currentTag.browserName.toLowerCase() === 'safari')) {
       this.pageYShiftFactor = this.statusBarHeight;
     } else {
       this.pageYShiftFactor = this.statusBarHeight - (scrollFactors.value[1] * scaleFactor);
     }
-    this.pageXShiftFactor = this.currentTag.osName === 'iOS' ? 0 : (-(scrollFactors.value[0] * scaleFactor));
-    if (this.currentTag.osName === 'iOS') {
-      if (scrollFactors.value[0] !== this.initialScrollFactor.value[0] || scrollFactors.value[1] !== this.initialScrollFactor.value[1]) {
+    this.pageXShiftFactor = this.isIOS() ? 0 : (-(scrollFactors.value[0] * scaleFactor));
+    if (this.isIOS() && !this.options?.fullPage) {
+      if (scrollFactors.value[0] !== this.initialScrollLocation.value[0] || scrollFactors.value[1] !== this.initialScrollLocation.value[1]) {
         this.pageXShiftFactor = (-1 * this.removeElementShiftFactor);
         this.pageYShiftFactor = (-1 * this.removeElementShiftFactor);
       } else if (location.y === 0) {
@@ -303,16 +319,23 @@ export default class GenericProvider {
     const rect = await this.driver.rect(elementId);
     const location = { x: rect.x, y: rect.y };
     const size = { height: rect.height, width: rect.width };
+    let scrollX = 0, scrollY = 0;
+    const scrollFactors = await this.getScrollDetails();
+    if (this.options?.fullPage) {
+      scrollX = scrollFactors.value[0];
+      scrollY = scrollFactors.value[1];
+    }
+
     // Update pageShiftFactor Element is not visible in viewport
     // In case of iOS if the element is not visible in viewport it gives 0 for x-y coordinate.
     // In case of iOS if the element is partially visible it gives negative x-y coordinate.
     // Subtracting ScrollY/ScrollX ensures if the element is visible in viewport or not.
-    await this.updatePageShiftFactor(location, scaleFactor);
+    await this.updatePageShiftFactor(location, scaleFactor, scrollFactors);
     const coOrdinates = {
-      top: Math.floor(location.y * scaleFactor) + Math.floor(this.pageYShiftFactor),
-      bottom: Math.ceil((location.y + size.height) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
-      left: Math.floor(location.x * scaleFactor) + Math.floor(this.pageXShiftFactor),
-      right: Math.ceil((location.x + size.width) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
+      top: Math.floor((location.y + scrollY) * scaleFactor) + Math.floor(this.pageYShiftFactor),
+      bottom: Math.ceil((location.y + size.height + scrollY) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
+      left: Math.floor((location.x + scrollX) * scaleFactor) + Math.floor(this.pageXShiftFactor),
+      right: Math.ceil((location.x + size.width + scrollX) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
     };
 
     const jsonObject = {
@@ -325,7 +348,6 @@ export default class GenericProvider {
 
   async getSeleniumRegionsByElement(elements) {
     const regionsArray = [];
-    await this.getInitialPosition();
     for (let index = 0; index < elements.length; index++) {
       try {
         const selector = `element: ${index}`;
@@ -336,7 +358,10 @@ export default class GenericProvider {
         log.debug(e.toString());
       }
     }
-    await this.scrollToInitialPosition(this.initialScrollFactor.value[0], this.initialScrollFactor.value[1]);
+
+    if (this.isIOS()) {
+      await this.scrollToPosition(this.initialScrollLocation.value[0], this.initialScrollLocation.value[1]);
+    }
     return regionsArray;
   }