@applitools/visual-grid-cli-utils 1.21.21 → 1.21.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/visual-grid-cli-utils",
-  "version": "1.21.21",
+  "version": "1.21.25",
   "description": "",
   "main": "src/visual-grid-cli-utils.js",
   "engines": {
@@ -17,6 +17,7 @@
     "vg-cli": "scripts/run-visual-grid-cli-utils.js"
   },
   "scripts": {
+    "distribute": "pkg scripts/run-visual-grid-cli-utils.js --out-path dist",
     "start": "scripts/run-visual-grid-cli-utils.js",
     "test:mocha": "mocha --no-timeouts --exit 'test/unit/*.test.js' 'test/it/*.test.js' 'test/e2e/*.test.js'",
     "test": "npm run eslint && npm run test:mocha",
@@ -36,6 +37,7 @@
   },
   "dependencies": {
     "@applitools/dom-snapshot": "^4.5.7",
+    "@applitools/eyes-images": "^4.21.0",
     "@applitools/functional-commons": "^1.6.0",
     "@applitools/http-commons": "^2.4.3",
     "@applitools/screenshot-stitching-client": "^8.0.15",
@@ -62,6 +64,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "mocha": "^8.3.2",
+    "pkg": "^5.5.2",
     "prettier": "^2.2.1"
   }
 }

package/src/commons/parse-browser.js

@@ -3,7 +3,7 @@ const {filterValues} = require('@applitools/functional-commons')
 
 function parseBrowser(arg) {
   const match =
-    /^(chrome|chrome-1|chrome-2|chrome-canary|edgechromium-canary|firefox|firefox-1|firefox-2|firefox-canary|ie11|ie10|edge|safari|safari-1|safari-2|safari-canary|safari-earlyaccess|ie-vmware|edgechromium|edgechromium-1|edgechromium-2|edgechromium-canary|edgelegacy)(\( *(\d+) *(x|,) *(\d+) *\))?$/.exec(
+    /^(chrome|chrome-1|chrome-2|chrome-canary|edgechromium-poc-canary|edgechromium-canary|firefox|firefox-1|firefox-2|firefox-canary|ie11|ie10|edge|safari|safari-1|safari-2|safari-canary|safari-earlyaccess|ie-vmware|edgechromium|edgechromium-1|edgechromium-2|edgechromium-canary|edgelegacy)(\( *(\d+) *(x|,) *(\d+) *\))?$/.exec(
       arg,
     )
 

package/src/commons/wait-for-rendering.js

@@ -12,13 +12,14 @@ async function waitForRendering(vgUrl, renderId, authToken, waitTimeout = 10 * 6
           `failed to get rendering status. Error from Visual Grid: ${await response.text()}`,
         )
       }
-      const {status, error, imageLocation, domLocation, selectorRegions} = await response.json()
+      const {status, error, imageLocation, domLocation, selectorRegions, fullPageSize} =
+        await response.json()
       if (status === 'error') {
         return [error]
       } else if (status === 'rendering') {
         throw new Error(``)
       } else {
-        return [undefined, imageLocation, domLocation, selectorRegions]
+        return [undefined, imageLocation, domLocation, selectorRegions, fullPageSize]
       }
     },
     {

package/src/compare.js

@@ -0,0 +1,50 @@
+'use strict'
+const {Eyes, Target, Configuration, BatchInfo} = require('@applitools/eyes-images')
+const rerender = require('./rerender')
+const { randomUUID } = require('crypto')
+
+async function main(args) {
+  async function runRerender(browser) {
+    const {finalOutputFile} = await rerender({...args, browser})
+    return {browser, image: finalOutputFile}
+  }
+
+  const results = await Promise.all([
+    runRerender(args.browser1.browser),
+    runRerender(args.browser2.browser),
+  ])
+  await compareWithEyes(results)
+}
+
+async function compareWithEyes(rerenderResults) {
+  const eyes = new Eyes()
+  try {
+    // Initialize the eyes configuration
+    const configuration = new Configuration()
+
+    // Set new batch
+    configuration.setBatch(new BatchInfo('VG-CLI compare'))
+
+    // Set the configuration to eyes
+    eyes.setConfiguration(configuration)
+
+    const uuid = randomUUID() 
+
+    let i = 0
+    for (const result of rerenderResults) {
+      const {browser: name, image: file} = result
+
+      await eyes.open('VG-CLI compare', `Compare browsers ${uuid}`, {width: 800, height: 600})
+      const resp = await eyes.check(name, Target.image(file))
+      console.log(`${name} resp ${i} = ${resp}`)
+      if (++i === rerenderResults.length - 1) {
+        console.log('\nBatch results: \n', eyes.getRunningSession().getUrl())
+      }
+      await eyes.close()
+    }
+  } finally {
+    await eyes.abortIfNotClosed()
+  }
+}
+
+module.exports = main

package/src/rerender.js

@@ -40,6 +40,7 @@ async function main({
   rca,
   native,
   viewRendering,
+  includeFullPageSize,
   canary,
   iosVersion,
   timeout,
@@ -85,7 +86,7 @@ async function main({
           ? {
               name: androidDeviceName,
               screenOrientation: androidDeviceOrientation,
-              version: androidVersion,
+              version: canary ? 'canary' : androidVersion,
             }
           : undefined,
         vhsType: androidDeviceName ? androidVhsType : undefined,
@@ -103,6 +104,7 @@ async function main({
         ? normalizeSelectorsToFindRegionsForArray(selectorsToFindRegionsFor)
         : undefined,
       enableMultipleResultsPerSelector: true,
+      includeFullPageSize,
       sendDom: rca,
       agentId: `visual-grid-cli-utils/${require('../package.json').version}`,
       // browser: {
@@ -128,7 +130,7 @@ async function main({
 
   const {renderId: reRenderId} = await response.json()
 
-  const [err, imageLocation, domLocation, selectorRegions] = await waitForRendering(
+  const [err, imageLocation, domLocation, selectorRegions, fullPageSize] = await waitForRendering(
     vgUrl,
     reRenderId,
     authToken,
@@ -180,7 +182,14 @@ async function main({
     console.log('\n' + calculateViewRenderingUrl(renderId, authToken))
   }
 
-  return {reRenderId}
+  if (includeFullPageSize) {
+    console.log('-----')
+    console.log(`Full page size:`)
+    console.log(JSON.stringify(fullPageSize, null, 2))
+    console.log('-----')
+  }
+
+  return {finalOutputFile, reRenderId}
 }
 
 function normalizeSelectorsToFindRegionsForArray(selectorsToFindRegionsFor) {

package/src/visual-grid-cli-utils.js

@@ -224,6 +224,12 @@ async function main(argv, {shouldExitOnError = false} = {}) {
           type: 'boolean',
           default: false,
         })
+        .option('includeFullPageSize', {
+          alias: 'f',
+          describe: 'output the full page size after rendering',
+          type: 'boolean',
+          default: false,
+        })
         .option('timeout', {
           alias: 't',
           describe: 'Timeout for operation (ms)',
@@ -235,6 +241,194 @@ async function main(argv, {shouldExitOnError = false} = {}) {
           type: 'string',
         }),
     )
+    .command(
+      'compare <renderId> <browser1> <browser2>',
+      'rerender a previous render to png',
+      (yargs) =>
+        yargs
+          .option('api-key', {
+            alias: 'k',
+            describe:
+              "alternative api key (an execute key, and if it's not a read key, comma then a read key)",
+            default: process.env.APPLITOOLS_API_KEY,
+            defaultDescription: 'APPLITOOLS_API_KEY env var',
+            type: 'string',
+          })
+          .option('server-url', {
+            describe: 'alternative Eyes server url',
+            default: process.env.APPLITOOLS_SERVER_URL || 'https://eyesapi.applitools.com',
+            defaultDescription: 'APPLITOOLS_SERVER_URL env var or default eyes server',
+            type: 'string',
+          })
+          .option('auth-token', {
+            describe: 'alternative authToken (for testing purposes only)',
+            type: 'string',
+          })
+          .option('account-override', {
+            alias: 'o',
+            describe: 'account that rendered (works for Visual Grid super-admins only!)',
+            default: process.env.ACCOUNT_OVERRIDE,
+            type: 'string',
+          })
+          .option('output', {
+            describe: 'wether to write results to disk or not',
+            type: 'boolean',
+            default: true,
+          })
+          .option('output-file', {
+            describe: 'to which file to write the result',
+            type: 'string',
+            defaultDescription: 'a random file in the tmp directory',
+          })
+          .positional('browser1', {
+            alias: 'b1',
+            demandOption: true,
+            describe: 'browser A',
+            type: 'string',
+            coerce: parseBrowser,
+            default: 'chrome',
+          })
+          .positional('browser2', {
+            alias: 'b2',
+            demandOption: true,
+            describe: 'browser B',
+            type: 'string',
+            coerce: parseBrowser,
+            default: 'edgechromium',
+          })
+          .option('headless', {
+            describe: 'render on headless chrome (use false for beta headful)',
+            default: true,
+            type: 'boolean',
+          })
+          .option('canary', {
+            describe: 'send the rendering to the canary browser (for internal purposes)',
+            default: false,
+            type: 'boolean',
+          })
+          .option('device-emulation', {
+            describe: 'the device name to use for chrome emulation',
+            type: 'string',
+          })
+          .option('device-orientation', {
+            describe: 'portrait or landscape',
+            type: 'string',
+            choices: ['portrait', 'landscape'],
+            default: 'portrait',
+          })
+          .option('android-device-name', {
+            describe: 'the name of the Android device to use',
+            type: 'string',
+          })
+          .option('android-version', {
+            describe:
+              'The Android version to use (latest, latest-1 or latest-2 - relative to the device)',
+            type: 'string',
+            default: 'latest',
+          })
+          .option('android-device-orientation', {
+            describe: 'screen orientation',
+            type: 'string',
+            choices: ['portrait', 'landscape'],
+            default: 'portrait',
+          })
+          .option('android-vhs-type', {
+            describe: 'vhs type',
+            type: 'string',
+            choices: ['android-x', 'android-support'],
+            default: 'android-x',
+          })
+          .option('ios-device-name', {
+            describe: 'the name of the iOS device to use',
+            type: 'string',
+          })
+          .option('ios-version', {
+            describe: 'The iOS version to use (none, latest, latest-1, etc)',
+            type: 'string',
+          })
+          .option('ios-device-orientation', {
+            describe: 'screen orientation',
+            type: 'string',
+            choices: ['portrait', 'landscapeLeft', 'landscapeRight'],
+            default: 'portrait',
+          })
+          .option('target', {
+            describe: 'what to render',
+            type: 'string',
+            choices: ['viewport', 'full-page', 'selector', 'full-selector'],
+            default: 'full-page',
+          })
+          .option('vhs-compatibility-params', {
+            describe:
+              'should specify vhs compatibility params if running ios native jobs. Specify the value of UIKitLinkTimeVersionNumber followed by the value of UIKitRunTimeVersionNumber - e.g. --vhs-compatibility-params 4555 5067',
+            type: 'array',
+          })
+          .option('selector', {
+            describe: 'target a specific element (via CSS selector)',
+            type: 'string',
+          })
+          .option('chained-selectors', {
+            describe:
+              'target an element inside a shadow-root or an iframe. Specify selectors in the following format: --chained-selectors "<selector1>" "<nodeType(iframe | shadow-root | element)>" "<selector2>" "<nodeType>"',
+            type: 'array',
+          })
+          .option('selectors-to-find-regions-for', {
+            describe:
+              'selectors to find regions for - Specify selectors in the following format: "<selector1>" "xpath || css" <selector2>" "xpath || css"...',
+            type: 'array',
+          })
+          .option('region', {
+            describe: 'target a specific region',
+            type: 'string',
+            coerce: parseRegion,
+          })
+          .option('width', {
+            describe: 'width of viewport',
+            type: 'number',
+            default: 1024,
+          })
+          .option('height', {
+            describe: 'height of viewport',
+            type: 'number',
+            default: 768,
+          })
+          .option('bcs-hook', {
+            describe: 'beforeCaptureScreenshot hook',
+            type: 'string',
+          })
+          .option('rca', {
+            describe: 'enable Root Cause Analysis',
+            type: 'boolean',
+            default: false,
+          })
+          .option('native', {
+            describe: 'Use native renderer',
+            type: 'boolean',
+            default: false,
+          })
+          .option('view-rendering', {
+            alias: 'v',
+            describe: 'also output the view-rendering url',
+            type: 'boolean',
+            default: false,
+          })
+          .option('includeFullPageSize', {
+            alias: 'f',
+            describe: 'output the full page size after rendering',
+            type: 'boolean',
+            default: false,
+          })
+          .option('timeout', {
+            alias: 't',
+            describe: 'Timeout for operation (ms)',
+            default: 60000,
+            type: 'number',
+          })
+          .option('options', {
+            describe: 'send visual grid options to rendering (json)',
+            type: 'string',
+          }),
+    )
     .command('job-info', 'get the job info for a rendering job', (yargs) =>
       yargs
         .option('api-key', {