@applitools/visual-grid-cli-utils 1.21.43 → 1.21.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/visual-grid-cli-utils",
-  "version": "1.21.43",
+  "version": "1.21.44",
   "description": "",
   "main": "src/visual-grid-cli-utils.js",
   "engines": {

package/src/commons/build-safari-emulation-info.js

@@ -0,0 +1,27 @@
+'use strict'
+
+function buildSafariEmulationInfo({
+  safariEmulationDeviceName,
+  safariEmulationOrientation,
+  safariEmulationViewport,
+  safariEmulationPixelRatio,
+  safariEmulationUserAgent,
+}) {
+  const anyFlagSet = !!(
+    safariEmulationDeviceName ||
+    safariEmulationViewport ||
+    safariEmulationPixelRatio !== undefined ||
+    safariEmulationUserAgent
+  )
+  if (!anyFlagSet) return undefined
+
+  const info = {}
+  if (safariEmulationDeviceName) info.deviceName = safariEmulationDeviceName
+  if (safariEmulationViewport) info.viewport = safariEmulationViewport
+  if (safariEmulationPixelRatio !== undefined) info.pixelRatio = safariEmulationPixelRatio
+  if (safariEmulationUserAgent) info.userAgent = safariEmulationUserAgent
+  info.screenOrientation = safariEmulationOrientation || 'portrait'
+  return info
+}
+
+module.exports = buildSafariEmulationInfo

package/src/commons/parse-viewport.js

@@ -0,0 +1,11 @@
+'use strict'
+
+function parseViewport(arg) {
+  const match = /^(\d+)x(\d+)$/i.exec(arg)
+  if (!match) {
+    throw new Error(`invalid viewport "${arg}". Expected format: WIDTHxHEIGHT (e.g., 393x695)`)
+  }
+  return {width: parseInt(match[1], 10), height: parseInt(match[2], 10)}
+}
+
+module.exports = parseViewport

package/src/job-info.js

@@ -3,6 +3,7 @@ const {fetchAsJsonWithJsonBody} = require('@applitools/http-commons')
 const createSession = require('./commons/create-session')
 const {convertBrowserNameToCanary} = require('./commons/parse-browser')
 const parseJson = require('./commons/parse-json.js')
+const buildSafariEmulationInfo = require('./commons/build-safari-emulation-info')
 
 async function main({
   apiKey,
@@ -13,6 +14,11 @@ async function main({
   native,
   deviceEmulation,
   deviceOrientation,
+  safariEmulationDeviceName,
+  safariEmulationOrientation,
+  safariEmulationViewport,
+  safariEmulationPixelRatio,
+  safariEmulationUserAgent,
   iosDeviceName,
   iosDeviceOrientation,
   androidDeviceName,
@@ -29,6 +35,14 @@ async function main({
   options.chromeHeadless = headless
   const vgUrl = process.env.VG_URL || 'https://render-wus.applitools.com'
 
+  const safariEmulationInfo = buildSafariEmulationInfo({
+    safariEmulationDeviceName,
+    safariEmulationOrientation,
+    safariEmulationViewport,
+    safariEmulationPixelRatio,
+    safariEmulationUserAgent,
+  })
+
   const {webhook, authToken} = await createSession(apiKey, serverUrl)
 
   const renderInfoUrl = new URL('./job-info', vgUrl)
@@ -38,9 +52,11 @@ async function main({
       accountOverride,
       webhook,
       renderInfo: {
-        emulationInfo: deviceEmulation
-          ? {deviceName: deviceEmulation, screenOrientation: deviceOrientation}
-          : undefined,
+        emulationInfo:
+          safariEmulationInfo ||
+          (deviceEmulation
+            ? {deviceName: deviceEmulation, screenOrientation: deviceOrientation}
+            : undefined),
         iosDeviceInfo: iosDeviceName
           ? {
               name: iosDeviceName,
@@ -56,8 +72,8 @@ async function main({
             }
           : undefined,
         vhsType: androidDeviceName ? androidVhsType : undefined,
-        width: deviceEmulation || iosDeviceName ? undefined : width,
-        height: deviceEmulation || iosDeviceName ? undefined : height,
+        width: deviceEmulation || iosDeviceName || safariEmulationInfo ? undefined : width,
+        height: deviceEmulation || iosDeviceName || safariEmulationInfo ? undefined : height,
         target: 'full-page',
       },
       agentId: `visual-grid-cli-utils/${require('../package.json').version}`,

package/src/rerender.js

@@ -12,6 +12,7 @@ const {convertBrowserNameToCanary} = require('./commons/parse-browser')
 const parseJson = require('./commons/parse-json.js')
 const normalizeChainedSelectorsArray = require('./commons/normalizeChainedSelectorsArray')
 const normalizeChainedSelectorsToFindRegionsForArray = require('./commons/normalizeChainedSelectorsToFindRegionsForArray')
+const buildSafariEmulationInfo = require('./commons/build-safari-emulation-info')
 
 async function main({
   apiKey,
@@ -26,6 +27,11 @@ async function main({
   headless,
   deviceEmulation,
   deviceOrientation,
+  safariEmulationDeviceName,
+  safariEmulationOrientation,
+  safariEmulationViewport,
+  safariEmulationPixelRatio,
+  safariEmulationUserAgent,
   androidDeviceName,
   androidVersion,
   androidDeviceOrientation,
@@ -64,6 +70,14 @@ async function main({
   options.chromeHeadless = headless
   const vgUrl = process.env.VG_URL || 'https://render-wus.applitools.com'
 
+  const safariEmulationInfo = buildSafariEmulationInfo({
+    safariEmulationDeviceName,
+    safariEmulationOrientation,
+    safariEmulationViewport,
+    safariEmulationPixelRatio,
+    safariEmulationUserAgent,
+  })
+
   const finalOutputFile = outputFile || path.join(fs.mkdtempSync(os.tmpdir() + '/'), 'rerender.png')
   const domSnapshotOutputFile = finalOutputFile.replace(/\.[a-zA-Z0-0]+$/, '.json')
   const domSnapshotHtml = finalOutputFile.replace(/\.[a-zA-Z0-0]+$/, '.html')
@@ -75,9 +89,11 @@ async function main({
     accountOverride,
     webhook,
     renderInfo: {
-      emulationInfo: deviceEmulation
-        ? {deviceName: deviceEmulation, screenOrientation: deviceOrientation}
-        : undefined,
+      emulationInfo:
+        safariEmulationInfo ||
+        (deviceEmulation
+          ? {deviceName: deviceEmulation, screenOrientation: deviceOrientation}
+          : undefined),
       iosDeviceInfo: iosDeviceName
         ? {
             name: iosDeviceName,
@@ -99,8 +115,8 @@ async function main({
           }
         : undefined,
       vhsType: androidDeviceName ? androidVhsType : undefined,
-      width: deviceEmulation || iosDeviceName ? undefined : width,
-      height: deviceEmulation || iosDeviceName ? undefined : height,
+      width: deviceEmulation || iosDeviceName || safariEmulationInfo ? undefined : width,
+      height: deviceEmulation || iosDeviceName || safariEmulationInfo ? undefined : height,
       target,
       selector: selector
         ? {selector, type: selector.startsWith('//') ? 'xpath' : 'css'}

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

@@ -2,6 +2,7 @@
 const yargs = require('yargs')
 const {parseBrowser} = require('./commons/parse-browser')
 const parseRegion = require('./commons/parse-region')
+const parseViewport = require('./commons/parse-viewport')
 const splitApiKey = require('./commons/split-api-key')
 
 async function main(argv, {shouldExitOnError = false} = {}) {
@@ -128,6 +129,29 @@ async function main(argv, {shouldExitOnError = false} = {}) {
           choices: ['portrait', 'landscape'],
           default: 'portrait',
         })
+        .option('safari-emulation-device-name', {
+          describe: 'the device name to use for Safari emulation (e.g., "iPhone 16")',
+          type: 'string',
+        })
+        .option('safari-emulation-orientation', {
+          describe: 'portrait or landscape for Safari emulation',
+          type: 'string',
+          choices: ['portrait', 'landscape'],
+          default: 'portrait',
+        })
+        .option('safari-emulation-viewport', {
+          describe: 'viewport for Safari emulation, in WIDTHxHEIGHT format (e.g., 393x695)',
+          type: 'string',
+          coerce: parseViewport,
+        })
+        .option('safari-emulation-pixel-ratio', {
+          describe: 'device pixel ratio for Safari emulation (e.g., 3)',
+          type: 'number',
+        })
+        .option('safari-emulation-user-agent', {
+          describe: 'user-agent string for Safari emulation',
+          type: 'string',
+        })
         .option('android-device-name', {
           describe: 'the name of the Android device to use',
           type: 'string',
@@ -491,6 +515,29 @@ async function main(argv, {shouldExitOnError = false} = {}) {
           choices: ['portrait', 'landscape'],
           default: 'portrait',
         })
+        .option('safari-emulation-device-name', {
+          describe: 'the device name to use for Safari emulation (e.g., "iPhone 16")',
+          type: 'string',
+        })
+        .option('safari-emulation-orientation', {
+          describe: 'portrait or landscape for Safari emulation',
+          type: 'string',
+          choices: ['portrait', 'landscape'],
+          default: 'portrait',
+        })
+        .option('safari-emulation-viewport', {
+          describe: 'viewport for Safari emulation, in WIDTHxHEIGHT format (e.g., 393x695)',
+          type: 'string',
+          coerce: parseViewport,
+        })
+        .option('safari-emulation-pixel-ratio', {
+          describe: 'device pixel ratio for Safari emulation (e.g., 3)',
+          type: 'number',
+        })
+        .option('safari-emulation-user-agent', {
+          describe: 'user-agent string for Safari emulation',
+          type: 'string',
+        })
         .option('ios-device-name', {
           describe: 'the name of the iOS device to use',
           type: 'string',
@@ -810,7 +857,7 @@ async function main(argv, {shouldExitOnError = false} = {}) {
 
   const args = /**@type {object}*/ (commandLineOptions.parse())
 
-  if (args._ && args._[0]) {
+  if (args._ && args._[0] && !args.help) {
     try {
       return await require(`./${args._[0]}`)(normalizeArgs(args))
     } catch (err) {