@applitools/visual-grid-cli-utils 1.21.40-FLD-3978.0 → 1.21.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/visual-grid-cli-utils",
-  "version": "1.21.40-FLD-3978.0",
+  "version": "1.21.42",
   "description": "",
   "main": "src/visual-grid-cli-utils.js",
   "engines": {

package/src/commons/normalizeChainedSelectorsToFindRegionsForArray.js

@@ -0,0 +1,76 @@
+'use strict'
+
+/**
+ * Normalizes chained selectors for selectorsToFindRegionsFor
+ * Input can be:
+ * - A single array (when flag used once): ["sel1", "nt1", "type1", "sel2", "nt2", "type2"]
+ * - An array of arrays (when flag used multiple times): [
+ *     ["sel1", "nt1", "type1", "sel2", "nt2", "type2"],
+ *     ["sel3", "nt3", "type3", "sel4", "nt4", "type4"]
+ *   ]
+ * 
+ * Output: Array of chained selector arrays
+ * [
+ *   [{selector, nodeType, type}, ...],
+ *   [{selector, nodeType, type}, ...]
+ * ]
+ */
+function normalizeChainedSelectorsToFindRegionsForArray(chainedSelectorsInput) {
+  if (!chainedSelectorsInput) return []
+
+  // Check if it's an array of arrays (multiple flag usages) or a single array
+  const isMultiple = Array.isArray(chainedSelectorsInput[0])
+  
+  const chainedSelectorsArrays = isMultiple ? chainedSelectorsInput : [chainedSelectorsInput]
+
+  return chainedSelectorsArrays.map(chainedSelectors => {
+    const normalized = []
+    
+    // Process in groups of 3: selector, nodeType, type
+    for (let i = 0; i < chainedSelectors.length; i += 3) {
+      const selector = chainedSelectors[i]
+      const nodeType = chainedSelectors[i + 1]
+      const type = chainedSelectors[i + 2]
+
+      if (!selector) {
+        throw new Error(`Missing selector at position ${i} in chained-selectors-to-find-regions-for`)
+      }
+      
+      if (!nodeType) {
+        throw new Error(`Missing nodeType at position ${i + 1} for selector "${selector}"`)
+      }
+      
+      if (!type) {
+        throw new Error(`Missing type at position ${i + 2} for selector "${selector}"`)
+      }
+
+      // Validate nodeType
+      if (!['iframe', 'shadow-root', 'element'].includes(nodeType)) {
+        throw new Error(`Invalid nodeType "${nodeType}" for selector "${selector}". Must be one of: iframe, shadow-root, element`)
+      }
+
+      // Validate type
+      if (!['css', 'xpath'].includes(type)) {
+        throw new Error(`Invalid type "${type}" for selector "${selector}". Must be one of: css, xpath`)
+      }
+
+      normalized.push({
+        selector,
+        nodeType,
+        type,
+      })
+    }
+
+    // Ensure the last item has nodeType 'element'
+    if (normalized.length > 0) {
+      const lastItem = normalized[normalized.length - 1]
+      if (lastItem.nodeType !== 'element') {
+        throw new Error(`The last selector in a chained selector must have nodeType 'element', but got '${lastItem.nodeType}'`)
+      }
+    }
+
+    return normalized
+  })
+}
+
+module.exports = normalizeChainedSelectorsToFindRegionsForArray

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-poc-canary|edgechromium-canary|firefox|firefox-1|firefox-2|firefox-canary|ie11|ie10|edge|safari|safari-1|safari-2|safari-canary|iossafari|iossafari-1|iossafari-2|iossafari-canary|webkit|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|webkit|safari-earlyaccess|ie-vmware|edgechromium|edgechromium-1|edgechromium-2|edgechromium-canary|edgelegacy)(\( *(\d+) *(x|,) *(\d+) *\))?$/.exec(
       arg,
     )
 

package/src/rerender.js

@@ -11,6 +11,7 @@ const {plotDomCaptureToHtml} = require('./plot-dom-capture-to-html')
 const {convertBrowserNameToCanary} = require('./commons/parse-browser')
 const parseJson = require('./commons/parse-json.js')
 const normalizeChainedSelectorsArray = require('./commons/normalizeChainedSelectorsArray')
+const normalizeChainedSelectorsToFindRegionsForArray = require('./commons/normalizeChainedSelectorsToFindRegionsForArray')
 
 async function main({
   apiKey,
@@ -46,6 +47,7 @@ async function main({
   timeout,
   options: optionsAsString,
   selectorsToFindRegionsFor,
+  chainedSelectorsToFindRegionsFor,
   vhsCompatibilityParams,
   globalResourceMapPath,
   originUrl,
@@ -107,9 +109,19 @@ async function main({
         : undefined,
       region: region,
     },
-    selectorsToFindRegionsFor: selectorsToFindRegionsFor
-      ? normalizeSelectorsToFindRegionsForArray(selectorsToFindRegionsFor)
-      : undefined,
+    selectorsToFindRegionsFor: (() => {
+      const normalizedRegularSelectors = selectorsToFindRegionsFor
+        ? normalizeSelectorsToFindRegionsForArray(selectorsToFindRegionsFor)
+        : []
+
+      const normalizedChainedSelectors = chainedSelectorsToFindRegionsFor
+        ? normalizeChainedSelectorsToFindRegionsForArray(chainedSelectorsToFindRegionsFor)
+        : []
+
+      const combined = [...normalizedRegularSelectors, ...normalizedChainedSelectors]
+
+      return combined.length > 0 ? combined : undefined
+    })(),
     enableMultipleResultsPerSelector: true,
     includeFullPageSize,
     sendDom: rca,

package/src/view-rendering.js

@@ -1,10 +1,118 @@
 'use strict'
 const {exec} = require('child_process')
+const retry = require('p-retry')
 const createSession = require('./commons/create-session')
 const calculateViewRenderingUrl = require('./commons/view-rendering-url')
 const {fetch, throwErrorFromBadStatus} = require('@applitools/http-commons')
 const fs = require('fs')
 
+async function waitForParsedStatus(vgUrl, renderId, authToken, waitTimeout = 5 * 60 * 1000) {
+  console.log(`[2/3] Waiting for parsing to complete...`)
+  let attemptCount = 0
+  const startTime = Date.now()
+  return await retry(
+    async () => {
+      attemptCount++
+      const response = await fetch(`${vgUrl}/render-status?render-id=${renderId}`, {
+        headers: {'X-Auth-Token': authToken},
+      })
+      if (!response.ok) {
+        throw new Error(
+          `failed to get rendering status. Error from Visual Grid: ${await response.text()}`,
+        )
+      }
+      const {status, error, rdvsMetadata, url} = await response.json()
+      if (status === 'error') {
+        throw new retry.AbortError(`Rendering failed: ${error}`)
+      } else if (status === 'parsed') {
+        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1)
+        console.log(`      ✓ Parsing completed (${elapsed}s)`)
+        // Return the rdvsMetadata and url from the job
+        return {
+          rdvsMetadata,
+          url,
+        }
+      } else {
+        // Only log every 5 attempts to reduce noise
+        if (attemptCount % 5 === 0) {
+          const elapsed = ((Date.now() - startTime) / 1000).toFixed(0)
+          console.log(`      Status: ${status} (${elapsed}s elapsed)...`)
+        }
+        // Still processing (rendering or other status)
+        throw new Error(`Status is ${status}, waiting for parsed`)
+      }
+    },
+    {
+      forever: true,
+      minTimeout: 1000,
+      maxTimeout: 1000,
+      maxRetryTime: waitTimeout,
+      onFailedAttempt: () => {}, // Suppress default error logging
+    },
+  )
+}
+
+async function tryNewViewRenderingEndpoint(vgUrl, renderId, authToken, apiKey, serverUrl) {
+  try {
+    console.log(`[1/3] Starting resource parsing for render: ${renderId}`)
+    // Step 1: Call rerender API with parseResourcesOnly flag
+    const renderUrl = new URL('./render', vgUrl)
+    const {webhook, authToken: sessionAuthToken} = await createSession(apiKey, serverUrl)
+
+    const rerenderResponse = await fetch(renderUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Auth-Token': sessionAuthToken,
+      },
+      body: JSON.stringify({
+        reRenderId: renderId,
+        webhook,
+        parseResourcesOnly: true,
+        agentId: `visual-grid-cli-utils/${require('../package.json').version}`,
+        options: {
+          parseResourcesOnly: true,
+        },
+      }),
+    })
+
+    if (!rerenderResponse.ok) {
+      const errorBody = await rerenderResponse.text()
+      return {
+        success: false,
+        error: `Rerender API failed - HTTP ${rerenderResponse.status}: ${errorBody}`,
+      }
+    }
+
+    const {renderId: parseRenderId} = await rerenderResponse.json()
+    console.log(`      ✓ Parse job created: ${parseRenderId}`)
+
+    // Step 2: Wait for "parsed" status
+    const parsedResult = await waitForParsedStatus(vgUrl, parseRenderId, sessionAuthToken)
+
+    // Step 3: Check if we have the required data
+    if (parsedResult.rdvsMetadata && parsedResult.url) {
+      console.log(`[3/3] Building view URL...`)
+      console.log(`      ✓ Resource tree ready`)
+      return {
+        success: true,
+        url: parsedResult.url,
+        rdvsMetadata: parsedResult.rdvsMetadata,
+      }
+    } else {
+      return {
+        success: false,
+        error: `Parsed result missing required fields (rdvsMetadata, url)`,
+      }
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message || String(error),
+    }
+  }
+}
+
 async function main({
   apiKey,
   browser,
@@ -24,7 +132,26 @@ async function main({
     ? {authToken}
     : await createSession(apiKey, serverUrl)
 
-  const viewRenderingUrl = calculateViewRenderingUrl(renderId, finalAuthToken, accountOverride)
+  const vgUrl = process.env.VG_URL || 'https://render-wus.applitools.com'
+
+  // Try new view-rendering endpoint with rerender API
+  const result = await tryNewViewRenderingEndpoint(
+    vgUrl,
+    renderId,
+    finalAuthToken,
+    apiKey,
+    serverUrl,
+  )
+
+  let viewRenderingUrl
+  if (result.success) {
+    console.log('\n✓ Successfully generated view URL via new endpoint')
+    viewRenderingUrl = result.url
+  } else {
+    console.log('\n⚠ New endpoint unavailable, using legacy method')
+    console.log(`  Reason: ${result.error}`)
+    viewRenderingUrl = calculateViewRenderingUrl(renderId, finalAuthToken, accountOverride)
+  }
 
   if (downloadVhsFolder) {
     let response = await fetch(viewRenderingUrl)
@@ -42,9 +169,12 @@ async function main({
     const resource = await response.buffer()
     const fname = `${downloadVhsFolder}/${renderId}.vhs`
     fs.writeFileSync(fname, resource)
-    console.log('Wrote file: ' + fname)
+    console.log('\n✓ Wrote file: ' + fname)
   } else {
+    console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')
+    console.log('View Rendering URL:')
     console.log(viewRenderingUrl)
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')
   }
 
   if (browser) {

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

@@ -189,6 +189,11 @@ async function main(argv, {shouldExitOnError = false} = {}) {
             'selectors to find regions for - Specify selectors in the following format: "<selector1>" "xpath || css" <selector2>" "xpath || css"...',
           type: 'array',
         })
+        .option('chained-selectors-to-find-regions-for', {
+          describe:
+            'chained selectors to find regions for (can be used multiple times). Specify each chained selector in the following format: --chained-selectors-to-find-regions-for "<selector1>" "<nodeType>" "<type>" "<selector2>" "<nodeType>" "<type>" ...',
+          type: 'array',
+        })
         .option('region', {
           describe: 'target a specific region',
           type: 'string',