Feat: Send domInfoSha & PoA optimizations

packages/cli-exec/src/exec.js

@@ -59,6 +59,8 @@ export const exec = command('exec', {
     log.warn('Percy is disabled');
   } else {
     try {
+      percy.projectType = percy.client.tokenType();
+      percy.skipDiscovery = percy.projectType !== 'web';
       yield* percy.yield.start();
     } catch (error) {
       if (error.name === 'AbortError') throw error;

packages/client/src/client.js

@@ -366,9 +366,9 @@ export class PercyClient {
     return snapshot;
   }
 
-  async createComparison(snapshotId, { tag, tiles = [], externalDebugUrl, ignoredElementsData } = {}) {
+  async createComparison(snapshotId, { tag, tiles = [], externalDebugUrl, ignoredElementsData, domInfoSha } = {}) {
     validateId('snapshot', snapshotId);
-
+    // Remove post percy api deploy
     this.log.debug(`Creating comparision: ${tag.name}...`);
 
     for (let tile of tiles) {
@@ -386,7 +386,8 @@ export class PercyClient {
         type: 'comparisons',
         attributes: {
           'external-debug-url': externalDebugUrl || null,
-          'ignore-elements-data': ignoredElementsData || null
+          'ignore-elements-data': ignoredElementsData || null,
+          'dom-info-sha': domInfoSha || null
         },
         relationships: {
           tag: {
@@ -398,7 +399,9 @@ export class PercyClient {
                 height: tag.height || null,
                 'os-name': tag.osName || null,
                 'os-version': tag.osVersion || null,
-                orientation: tag.orientation || null
+                orientation: tag.orientation || null,
+                browser_name: tag.browserName || null,
+                browser_version: tag.browserVersion || null
               }
             }
           },
@@ -504,6 +507,26 @@ export class PercyClient {
     await this.finalizeComparison(comparison.data.id);
     return comparison;
   }
+
+  // decides project type
+  tokenType() {
+    let token = this.token || this.env.token;
+    if (!token || typeof token !== 'string') { throw new Error('Missing Percy token'); }
+
+    const type = token.split('_')[0];
+    switch (type) {
+      case 'auto':
+        return 'automate';
+      case 'web':
+        return 'web';
+      case 'app':
+        return 'app';
+      case 'ss':
+        return 'generic';
+      default:
+        return 'web';
+    }
+  }
 }
 
 export default PercyClient;

packages/client/test/client.test.js

@@ -810,7 +810,9 @@ describe('PercyClient', () => {
           height: 1024,
           osName: 'fooOS',
           osVersion: '0.1.0',
-          orientation: 'portrait'
+          orientation: 'portrait',
+          browserName: 'chrome',
+          browserVersion: '111.0.0'
         },
         tiles: [{
           statusBarHeight: 40,
@@ -835,15 +837,17 @@ describe('PercyClient', () => {
           sha: sha256hash('somesha')
         }],
         externalDebugUrl: 'http://debug.localhost',
-        ignoredElementsData: ignoredElementsData
+        ignoredElementsData: ignoredElementsData,
+        domInfoSha: 'abcd='
       })).toBeResolved();
 
       expect(api.requests['/snapshots/4567/comparisons'][0].body).toEqual({
         data: {
           type: 'comparisons',
           attributes: {
             'external-debug-url': 'http://debug.localhost',
-            'ignore-elements-data': ignoredElementsData
+            'ignore-elements-data': ignoredElementsData,
+            'dom-info-sha': 'abcd='
           },
           relationships: {
             tag: {
@@ -855,7 +859,9 @@ describe('PercyClient', () => {
                   height: 1024,
                   'os-name': 'fooOS',
                   'os-version': '0.1.0',
-                  orientation: 'portrait'
+                  orientation: 'portrait',
+                  browser_name: 'chrome',
+                  browser_version: '111.0.0'
                 }
               }
             },
@@ -907,7 +913,8 @@ describe('PercyClient', () => {
           type: 'comparisons',
           attributes: {
             'external-debug-url': null,
-            'ignore-elements-data': null
+            'ignore-elements-data': null,
+            'dom-info-sha': null
           },
           relationships: {
             tag: {
@@ -919,7 +926,9 @@ describe('PercyClient', () => {
                   height: null,
                   'os-name': null,
                   'os-version': null,
-                  orientation: null
+                  orientation: null,
+                  browser_name: null,
+                  browser_version: null
                 }
               }
             },
@@ -1156,7 +1165,8 @@ describe('PercyClient', () => {
           type: 'comparisons',
           attributes: {
             'external-debug-url': null,
-            'ignore-elements-data': null
+            'ignore-elements-data': null,
+            'dom-info-sha': null
           },
           relationships: {
             tag: {
@@ -1168,7 +1178,9 @@ describe('PercyClient', () => {
                   height: null,
                   'os-name': null,
                   'os-version': null,
-                  orientation: null
+                  orientation: null,
+                  browser_name: null,
+                  browser_version: null
                 }
               }
             },
@@ -1207,4 +1219,49 @@ describe('PercyClient', () => {
       expect(api.requests['/comparisons/891011/finalize']).toBeDefined();
     });
   });
+
+  describe('#tokenType', () => {
+    let client;
+
+    beforeEach(() => {
+      client = new PercyClient({
+        token: 'PERCY_TOKEN'
+      });
+    });
+
+    it('should return web for default token', () => {
+      client.token = '<<PERCY_TOKEN>>';
+      expect(client.tokenType()).toBe('web');
+    });
+
+    it('should return web for web tokens', () => {
+      client.token = 'web_abc';
+      expect(client.tokenType()).toBe('web');
+    });
+
+    it('should return app for app tokens', () => {
+      client.token = 'app_abc';
+      expect(client.tokenType()).toBe('app');
+    });
+
+    it('should return automate for auto tokens', () => {
+      client.token = 'auto_abc';
+      expect(client.tokenType()).toBe('automate');
+    });
+
+    it('should return generic for ss tokens', () => {
+      client.token = 'ss_abc';
+      expect(client.tokenType()).toBe('generic');
+    });
+
+    it('should return web for default token', () => {
+      client.token = 'abcdef123';
+      expect(client.tokenType()).toBe('web');
+    });
+
+    it('should throw error for no token', () => {
+      client.token = '';
+      expect(() => { client.tokenType(); }).toThrowError('Missing Percy token');
+    });
+  });
 });

packages/core/src/api.js

@@ -3,7 +3,7 @@ import path from 'path';
 import { createRequire } from 'module';
 import logger from '@percy/logger';
 import { normalize } from '@percy/config/utils';
-import { getPackageJSON, Server } from './utils.js';
+import { getPackageJSON, Server, percyAutomateRequestHandler } from './utils.js';
 // TODO Remove below esline disable once we publish webdriver-util
 import WebdriverUtils from '@percy/webdriver-utils'; // eslint-disable-line import/no-extraneous-dependencies
 
@@ -63,7 +63,8 @@ export function createPercyServer(percy, port) {
       build: percy.testing?.build ?? percy.build,
       loglevel: percy.loglevel(),
       config: percy.config,
-      success: true
+      success: true,
+      type: percy.client.tokenType()
     }))
   // get or set config options
     .route(['get', 'post'], '/percy/config', async (req, res) => res.json(200, {
@@ -117,9 +118,12 @@ export function createPercyServer(percy, port) {
     .route('post', '/percy/flush', async (req, res) => res.json(200, {
       success: await percy.flush(req.body).then(() => true)
     }))
-    .route('post', '/percy/automateScreenshot', async (req, res) => res.json(200, {
-      success: await (percy.upload(await new WebdriverUtils(req.body).automateScreenshot())).then(() => true)
-    }))
+    .route('post', '/percy/automateScreenshot', async (req, res) => {
+      req = percyAutomateRequestHandler(req);
+      res.json(200, {
+        success: await (percy.upload(await new WebdriverUtils(req.body).automateScreenshot())).then(() => true)
+      });
+    })
   // stops percy at the end of the current event loop
     .route('/percy/stop', (req, res) => {
       setImmediate(() => percy.stop());

packages/core/src/config.js

@@ -397,6 +397,7 @@ export const comparisonSchema = {
   properties: {
     name: { type: 'string' },
     externalDebugUrl: { type: 'string' },
+    domInfoSha: { type: 'string' },
     tag: {
       type: 'object',
       additionalProperties: false,
@@ -418,7 +419,9 @@ export const comparisonSchema = {
         orientation: {
           type: 'string',
           enum: ['portrait', 'landscape']
-        }
+        },
+        browserName: { type: 'string' },
+        browserVersion: { type: 'string' }
       }
     },
     tiles: {

packages/core/src/utils.js

@@ -23,6 +23,20 @@ export function normalizeURL(url) {
   return `${protocol}//${host}${pathname}${search}`;
 }
 
+// Returns the body for automateScreenshot in structure
+export function percyAutomateRequestHandler(req) {
+  if (req.body.client_info) {
+    req.body.clientInfo = req.body.client_info;
+  }
+  if (req.body.environment_info) {
+    req.body.environmentInfo = req.body.environment_info;
+  }
+  if (!req.body.options) {
+    req.body.options = {};
+  }
+  return req;
+}
+
 // Creates a local resource object containing the resource URL, mimetype, content, sha, and any
 // other additional resources attributes.
 export function createResource(url, content, mimetype, attrs) {

packages/core/test/api.test.js

@@ -54,7 +54,8 @@ describe('API Server', () => {
         id: '123',
         number: 1,
         url: 'https://percy.io/test/test/123'
-      }
+      },
+      type: percy.client.tokenType()
     });
   });
 

packages/core/test/unit/utils.test.js

@@ -2,7 +2,8 @@ import {
   generatePromise,
   AbortController,
   yieldTo,
-  yieldAll
+  yieldAll,
+  percyAutomateRequestHandler
 } from '../../src/utils.js';
 
 describe('Unit / Utils', () => {
@@ -165,4 +166,32 @@ describe('Unit / Utils', () => {
         { done: true, value: [2, 4, null, 3, 6] });
     });
   });
+
+  describe('percyAutomateRequestHandler', () => {
+    let req;
+    beforeAll(() => {
+      req = {
+        body: {
+          name: 'abc',
+          client_info: 'client',
+          environment_info: 'environment'
+        }
+      };
+    });
+
+    it('converts client_info to clientInfo', () => {
+      const nreq = percyAutomateRequestHandler(req);
+      expect(nreq.body.clientInfo).toBe('client');
+    });
+
+    it('converts environment_info to environmentInfo', () => {
+      const nreq = percyAutomateRequestHandler(req);
+      expect(nreq.body.environmentInfo).toBe('environment');
+    });
+
+    it('adds options', () => {
+      const nreq = percyAutomateRequestHandler(req);
+      expect(nreq.body.options).toEqual({});
+    });
+  });
 });

packages/sdk-utils/src/index.js

@@ -8,6 +8,8 @@ import postSnapshot from './post-snapshot.js';
 import postComparison from './post-comparison.js';
 import flushSnapshots from './flush-snapshots.js';
 import captureAutomateScreenshot from './post-screenshot.js';
+import TimeIt from './timing.js';
+import Undefined from './validations.js';
 
 export {
   logger,
@@ -19,7 +21,9 @@ export {
   postSnapshot,
   postComparison,
   flushSnapshots,
-  captureAutomateScreenshot
+  captureAutomateScreenshot,
+  TimeIt,
+  Undefined
 };
 
 // export the namespace by default