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?.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, domSha } = {}) {
     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': domSha || 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
               }
             }
           },

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,
+        domSha: '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
                 }
               }
             },

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.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' },
+    domSha: { 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/percy.js

@@ -360,6 +360,25 @@ export class Percy {
       }
     }.call(this));
   }
+
+  // decides project type
+  tokenType() {
+    if (!process.env.PERCY_TOKEN || typeof process.env.PERCY_TOKEN !== 'string') { throw new Error('Missing Percy token'); }
+
+    const type = process.env.PERCY_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 Percy;

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.tokenType()
     });
   });
 

packages/core/test/percy.test.js

@@ -843,4 +843,45 @@ describe('Percy', () => {
       expect(api.requests['/builds/123/snapshots']).toBeUndefined();
     });
   });
+
+  describe('#tokenType', () => {
+    afterEach(() => {
+      delete process.env.PERCY_TOKEN;
+    });
+
+    it('should return web for default token', () => {
+      process.env.PERCY_TOKEN = '<<PERCY_TOKEN>>';
+      expect(percy.tokenType()).toBe('web');
+    });
+
+    it('should return web for web tokens', () => {
+      process.env.PERCY_TOKEN = 'web_abc';
+      expect(percy.tokenType()).toBe('web');
+    });
+
+    it('should return app for app tokens', () => {
+      process.env.PERCY_TOKEN = 'app_abc';
+      expect(percy.tokenType()).toBe('app');
+    });
+
+    it('should return automate for auto tokens', () => {
+      process.env.PERCY_TOKEN = 'auto_abc';
+      expect(percy.tokenType()).toBe('automate');
+    });
+
+    it('should return generic for ss tokens', () => {
+      process.env.PERCY_TOKEN = 'ss_abc';
+      expect(percy.tokenType()).toBe('generic');
+    });
+
+    it('should return web for default token', () => {
+      process.env.PERCY_TOKEN = 'abcdef123';
+      expect(percy.tokenType()).toBe('web');
+    });
+
+    it('should throw error for no token', () => {
+      process.env.PERCY_TOKEN = '';
+      expect(() => { percy.tokenType(); }).toThrowError('Missing Percy token');
+    });
+  });
 });

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/webdriver-utils/src/index.js

@@ -4,7 +4,17 @@ import { camelcase } from '@percy/config/utils';
 
 export default class WebdriverUtils {
   log = utils.logger('webdriver-utils:main');
-  constructor({ sessionId, commandExecutorUrl, capabilities, sessionCapabilites, snapshotName, options = {} }) {
+  constructor(
+    {
+      sessionId,
+      commandExecutorUrl,
+      capabilities,
+      sessionCapabilites,
+      snapshotName,
+      clientInfo,
+      environmentInfo,
+      options = {}
+    }) {
     this.sessionId = sessionId;
     this.commandExecutorUrl = commandExecutorUrl;
     this.capabilities = capabilities;
@@ -16,11 +26,13 @@ export default class WebdriverUtils {
       camelCasedOptions[newKey] = options[key];
     });
     this.options = camelCasedOptions;
+    this.clientInfo = clientInfo;
+    this.environmentInfo = environmentInfo;
   }
 
   async automateScreenshot() {
     this.log.info('Starting automate screenshot');
-    const automate = ProviderResolver.resolve(this.sessionId, this.commandExecutorUrl, this.capabilities, this.sessionCapabilites);
+    const automate = ProviderResolver.resolve(this.sessionId, this.commandExecutorUrl, this.capabilities, this.sessionCapabilites, this.clientInfo, this.environmentInfo, this.options);
     await automate.createDriver();
     return await automate.screenshot(this.snapshotName, this.options);
   }

packages/webdriver-utils/src/metadata/desktopMetaData.js

@@ -8,21 +8,26 @@ export default class DesktopMetaData {
     return this.capabilities.browserName.toLowerCase();
   }
 
+  browserVersion() {
+    return this.capabilities.browserVersion.split('.')[0];
+  }
+
   osName() {
-    let osName = this.capabilities.osVersion;
+    let osName = this.capabilities.os;
     if (osName) return osName.toLowerCase();
 
     osName = this.capabilities.platform;
     return osName;
   }
 
-  // desktop will show this as browser version
+  // showing major version
   osVersion() {
-    return this.capabilities.version.split('.')[0];
+    return this.capabilities.osVersion.toLowerCase();
   }
 
+  // combination of browserName + browserVersion + osVersion + osName
   deviceName() {
-    return this.browserName() + '_' + this.osVersion() + '_' + this.osName();
+    return this.browserName() + '_' + this.browserVersion() + '_' + this.osVersion() + '_' + this.osName();
   }
 
   orientation() {