Using tile based response

percy · Nov 16, 2023 · 5a9a8ff · 5a9a8ff
1 parent b2aa4bd
commit 5a9a8ff
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 30 deletions.
diff --git a/packages/webdriver-utils/src/providers/automateProvider.js b/packages/webdriver-utils/src/providers/automateProvider.js
@@ -110,10 +110,11 @@ 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();
+    this.options.version = 'v2';
     const response = await TimeIt.run('percyScreenshot:screenshot', async () => {
       return await this.browserstackExecutor('percyScreenshot', {
         state: 'screenshot',
@@ -133,22 +134,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)
-    };
-    return { tiles: tiles, domInfoSha: tileResponse.dom_sha, metadata: metadata };
+    return { tiles: tiles, domInfoSha: tileResponse.dom_sha };
   }
 
   async browserstackExecutor(action, args) {

diff --git a/packages/webdriver-utils/src/providers/genericProvider.js b/packages/webdriver-utils/src/providers/genericProvider.js
@@ -83,7 +83,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)}`);
 
     const ignoreRegions = await this.findRegions(
@@ -125,7 +125,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');
@@ -135,8 +135,8 @@ export default class GenericProvider {
           content: base64content,
           statusBarHeight: 0,
           navBarHeight: 0,
-          headerHeight,
-          footerHeight,
+          headerHeight: this.header,
+          footerHeight: this.footer,
           fullscreen
         })
       ],

diff --git a/packages/webdriver-utils/test/providers/automateProvider.test.js b/packages/webdriver-utils/test/providers/automateProvider.test.js
@@ -220,27 +220,43 @@ describe('AutomateProvider', () => {
     beforeEach(async () => {
       spyOn(Driver.prototype, 'getCapabilites');
       browserstackExecutorSpy = spyOn(AutomateProvider.prototype, 'browserstackExecutor')
-        .and.returnValue(Promise.resolve({ value: '{ "result": "{\\"dom_sha\\": \\"abc\\", \\"sha\\": [\\"abc-1\\", \\"xyz-2\\"]}", "success":true }' }));
+        .and.returnValue(Promise.resolve({ value: '{"success": true, "result": "{\\"tiles\\":[{\\"sha\\":\\"abc\\",\\"status_bar\\":0,\\"nav_bar\\":156,\\"header_height\\":0,\\"footer_height\\":156,\\"index\\":0},{\\"sha\\":\\"cde\\",\\"status_bar\\":0,\\"nav_bar\\":156,\\"header_height\\":0.0,\\"footer_height\\":156.0,\\"index\\":1}],\\"dom_sha\\":\\"def\\"}"}' }));
       executeScriptSpy = spyOn(Driver.prototype, 'executeScript')
         .and.returnValue(Promise.resolve(1));
     });
 
     it('should return tiles when success', async () => {
       await automateProvider.createDriver();
-      const res = await automateProvider.getTiles(123, 456, false);
+      const res = await automateProvider.getTiles(false);
+      const expectedOutput = {
+        tiles: [
+          new Tile({
+            statusBarHeight: 0,
+            navBarHeight: 156,
+            headerHeight: 0,
+            footerHeight: 156,
+            fullscreen: false,
+            sha: 'abc'
+          }),
+          new Tile({
+            statusBarHeight: 0,
+            navBarHeight: 156,
+            headerHeight: 0,
+            footerHeight: 156,
+            fullscreen: false,
+            sha: 'cde'
+          })
+        ],
+        domInfoSha: 'def'
+      };
       expect(browserstackExecutorSpy).toHaveBeenCalledTimes(1);
       expect(executeScriptSpy).toHaveBeenCalledTimes(1);
-      expect(Object.keys(res).length).toEqual(3);
-      expect(res.domInfoSha).toBe('abc');
+      expect(Object.keys(res).length).toEqual(2);
+      expect(res.domInfoSha).toBe('def');
       expect(res.tiles.length).toEqual(2);
       expect(res.tiles[0]).toBeInstanceOf(Tile);
       expect(res.tiles[1]).toBeInstanceOf(Tile);
-      expect(res.tiles[0].sha).toEqual('abc');
-      expect(res.tiles[1].sha).toEqual('xyz');
-      expect(res.tiles[0].headerHeight).toEqual(123);
-      expect(res.tiles[0].footerHeight).toEqual(456);
-      expect(res.tiles[0].navBarHeight).toEqual(0);
-      expect(res.tiles[0].statusBarHeight).toEqual(0);
+      expect(res).toEqual(expectedOutput);
     });
 
     it('throws error when response is false', async () => {

diff --git a/packages/webdriver-utils/test/providers/genericProvider.test.js b/packages/webdriver-utils/test/providers/genericProvider.test.js
@@ -40,12 +40,12 @@ describe('GenericProvider', () => {
     it('creates tiles from screenshot', async () => {
       genericProvider = new GenericProvider('123', 'http:executorUrl', { platform: 'win' }, {}, 'local-poc-poa', 'staging-poc-poa', {});
       genericProvider.createDriver();
-      const tiles = await genericProvider.getTiles(123, 456, false);
+      const tiles = await genericProvider.getTiles(false);
       expect(tiles.tiles.length).toEqual(1);
       expect(tiles.tiles[0].navBarHeight).toEqual(0);
       expect(tiles.tiles[0].statusBarHeight).toEqual(0);
-      expect(tiles.tiles[0].footerHeight).toEqual(456);
-      expect(tiles.tiles[0].headerHeight).toEqual(123);
+      expect(tiles.tiles[0].footerHeight).toEqual(0);
+      expect(tiles.tiles[0].headerHeight).toEqual(0);
       expect(Object.keys(tiles)).toContain('domInfoSha');
     });
 
@@ -147,7 +147,7 @@ describe('GenericProvider', () => {
       await genericProvider.createDriver();
       let res = await genericProvider.screenshot('mock-name', {});
       expect(getTagSpy).toHaveBeenCalledTimes(1);
-      expect(getTilesSpy).toHaveBeenCalledOnceWith(0, 0, false);
+      expect(getTilesSpy).toHaveBeenCalledOnceWith(false);
       expect(res).toEqual({
         name: 'mock-name',
         tag: 'mock-tag',