design-clone 1.1.1 → 2.1.0

package/src/core/multi-page-screenshot.js

@@ -16,7 +16,7 @@ import { getBrowser, getPage, disconnectBrowser } from '../utils/browser.js';
 import { captureViewport, VIEWPORTS, DEFAULT_SCROLL_DELAY } from './screenshot.js';
 import { waitForDomStable, waitForPageReady } from './page-readiness.js';
 import { dismissCookieBanner } from './cookie-handler.js';
-import { extractCleanHtml, JS_FRAMEWORK_PATTERNS, MAX_HTML_SIZE } from './html-extractor.js';
+import { extractAndEnhanceHtml, JS_FRAMEWORK_PATTERNS, MAX_HTML_SIZE } from './html-extractor.js';
 import { extractAllCss, MAX_CSS_SIZE } from './css-extractor.js';
 import { filterCssFile } from './filter-css.js';
 
@@ -69,7 +69,7 @@ async function createOutputStructure(outputDir, viewports) {
 
 /**
  * Capture a single page (all viewports + HTML/CSS extraction)
- * @param {Page} page - Puppeteer page instance
+ * @param {Page} page - Playwright page instance
  * @param {Object} pageInfo - Page info { path, name, url }
  * @param {string} outputDir - Output directory
  * @param {Object} options - Capture options
@@ -91,7 +91,7 @@ async function captureSinglePage(page, pageInfo, outputDir, options) {
   try {
     // Navigate to page
     await page.goto(pageInfo.url, {
-      waitUntil: ['load', 'networkidle0'],
+      waitUntil: 'networkidle',
       timeout: options.timeout
     });
 
@@ -104,10 +104,11 @@ async function captureSinglePage(page, pageInfo, outputDir, options) {
     // Extra stabilization
     await waitForDomStable(page, 300, 3000);
 
-    // Extract HTML
+    // Extract HTML with semantic enhancement
     if (options.extractHtml) {
       try {
-        const htmlResult = await extractCleanHtml(page, JS_FRAMEWORK_PATTERNS);
+        const enhanceSemantic = options.enhanceSemantic !== false;
+        const htmlResult = await extractAndEnhanceHtml(page, { enhanceSemantic });
         const htmlSize = Buffer.byteLength(htmlResult.html, 'utf-8');
 
         if (htmlSize > MAX_HTML_SIZE) {
@@ -118,7 +119,9 @@ async function captureSinglePage(page, pageInfo, outputDir, options) {
           result.html = {
             path: htmlPath,
             size: htmlSize,
-            elementCount: htmlResult.elementCount
+            elementCount: htmlResult.elementCount,
+            semanticEnhanced: enhanceSemantic,
+            semanticStats: htmlResult.semanticStats || null
           };
           if (htmlResult.warnings.length > 0) {
             result.warnings.push(...htmlResult.warnings);

package/src/core/page-readiness.js

@@ -32,7 +32,7 @@ export const CONTENT_SELECTORS = [
 
 /**
  * Wait for fonts to finish loading
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {number} timeout - Max wait time in ms
  */
 export async function waitForFontsLoaded(page, timeout = FONT_LOAD_TIMEOUT) {
@@ -51,13 +51,13 @@ export async function waitForFontsLoaded(page, timeout = FONT_LOAD_TIMEOUT) {
 
 /**
  * Wait for styles to stabilize (no new style mutations)
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {number} stableMs - How long to wait without changes
  * @param {number} timeout - Max wait time in ms
  */
 export async function waitForStylesStable(page, stableMs = 500, timeout = 5000) {
   try {
-    await page.evaluate(async (stable, max) => {
+    await page.evaluate(async ({ stable, max }) => {
       return new Promise((resolve) => {
         let lastChange = Date.now();
         let checkInterval;
@@ -88,7 +88,7 @@ export async function waitForStylesStable(page, stableMs = 500, timeout = 5000)
           }
         }, 100);
       });
-    }, stableMs, timeout);
+    }, { stable: stableMs, max: timeout });
   } catch {
     // Error in style stability check, continue anyway
   }
@@ -96,7 +96,7 @@ export async function waitForStylesStable(page, stableMs = 500, timeout = 5000)
 
 /**
  * Wait for DOM to stabilize (element count unchanged)
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {number} threshold - Stability duration in ms
  * @param {number} timeout - Max wait time in ms
  */
@@ -116,7 +116,7 @@ export async function waitForDomStable(page, threshold = DOM_STABLE_THRESHOLD, t
 
 /**
  * Wait for page to be ready (loading complete, content visible)
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {number} timeout - Max wait time
  */
 export async function waitForPageReady(page, timeout = PAGE_READY_TIMEOUT) {
@@ -125,7 +125,7 @@ export async function waitForPageReady(page, timeout = PAGE_READY_TIMEOUT) {
   const minContentElements = Math.max(100, initialCount * 2);
 
   while (Date.now() - startTime < timeout) {
-    const result = await page.evaluate((loadingSels, contentSels, minElements) => {
+    const result = await page.evaluate(({ loadingSels, contentSels, minElements }) => {
       const elementCount = document.querySelectorAll('*').length;
 
       const loadingGone = loadingSels.every(sel => {
@@ -148,7 +148,7 @@ export async function waitForPageReady(page, timeout = PAGE_READY_TIMEOUT) {
         loadingGone,
         contentExists
       };
-    }, LOADING_SELECTORS, CONTENT_SELECTORS, minContentElements);
+    }, { loadingSels: LOADING_SELECTORS, contentSels: CONTENT_SELECTORS, minElements: minContentElements });
 
     if (result.ready) break;
     await new Promise(r => setTimeout(r, 200));

package/src/core/screenshot.js

@@ -17,6 +17,12 @@
  *   --extract-html  Extract cleaned HTML (default: false)
  *   --extract-css   Extract all CSS from page (default: false)
  *   --filter-unused Filter CSS to remove unused selectors (default: true)
+ *   --capture-hover Capture hover state screenshots and CSS (default: false)
+ *   --video         Record scroll preview video (default: false)
+ *   --video-format  Video format: webm, mp4, gif (default: webm)
+ *   --video-duration Video duration in ms (default: 12000)
+ *   --section-mode  Enable section-based capture for AI analysis (default: false)
+ *   --no-semantic   Disable WordPress semantic HTML enhancement (default: false)
  */
 
 import path from 'path';
@@ -30,10 +36,15 @@ import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, output
 import { waitForDomStable, waitForFontsLoaded, waitForStylesStable, waitForPageReady } from './page-readiness.js';
 import { dismissCookieBanner } from './cookie-handler.js';
 import { forceLazyImages, forceAnimatedElementsVisible, triggerLazyLoad, waitForAllImages, LAZY_LOAD_MAX_ITERATIONS } from './lazy-loader.js';
-import { extractCleanHtml, JS_FRAMEWORK_PATTERNS, MAX_HTML_SIZE } from './html-extractor.js';
+import { extractCleanHtml, extractAndEnhanceHtml, JS_FRAMEWORK_PATTERNS, MAX_HTML_SIZE } from './html-extractor.js';
+import { extractContentCounts, generateContentSummary } from './content-counter.js';
 import { extractAllCss, MAX_CSS_SIZE } from './css-extractor.js';
 import { extractComponentDimensions } from './dimension-extractor.js';
 import { buildDimensionsOutput, generateAISummary } from './dimension-output.js';
+import { extractDOMHierarchy } from './dom-tree-analyzer.js';
+import { extractAnimations, generateAnimationsCss, generateAnimationTokens } from './animation-extractor.js';
+import { captureAllHoverStates, generateHoverCss } from './state-capture.js';
+import { captureVideo, hasFfmpeg, FFMPEG_REQUIRED_FORMATS } from './video-capture.js';
 
 // Try to import Sharp for compression
 let sharp = null;
@@ -95,7 +106,7 @@ async function compressIfNeeded(filePath, maxSizeMB = 5) {
  * Capture screenshot for a single viewport
  */
 async function captureViewport(page, viewport, outputPath, fullPage = true, maxSize = 5, scrollDelay = DEFAULT_SCROLL_DELAY) {
-  await page.setViewport(VIEWPORTS[viewport]);
+  await page.setViewportSize(VIEWPORTS[viewport]);
   await new Promise(r => setTimeout(r, VIEWPORT_SETTLE_DELAY));
   await waitForDomStable(page, 300, 5000);
   await waitForFontsLoaded(page, 3000);
@@ -103,13 +114,23 @@ async function captureViewport(page, viewport, outputPath, fullPage = true, maxS
 
   const componentDimensions = await extractComponentDimensions(page, viewport);
 
+  // Extract DOM hierarchy (desktop only for efficiency)
+  let domHierarchy = null;
+  if (viewport === 'desktop') {
+    try {
+      domHierarchy = await extractDOMHierarchy(page, { maxDepth: 8 });
+    } catch (err) {
+      console.error(`[WARN] DOM hierarchy extraction failed: ${err.message}`);
+    }
+  }
+
   const lazyStats = await forceLazyImages(page);
   const scrollInfo = await triggerLazyLoad(page, LAZY_LOAD_MAX_ITERATIONS, scrollDelay);
   await forceLazyImages(page);
   const imageStats = await waitForAllImages(page, 15000);
 
   try {
-    await page.waitForNetworkIdle({ timeout: NETWORK_IDLE_TIMEOUT });
+    await page.waitForLoadState('networkidle', { timeout: NETWORK_IDLE_TIMEOUT });
   } catch {
     // Timeout ok
   }
@@ -135,6 +156,7 @@ async function captureViewport(page, viewport, outputPath, fullPage = true, maxS
     path: path.resolve(outputPath),
     dimensions: VIEWPORTS[viewport],
     componentDimensions,
+    domHierarchy,  // DOM hierarchy (desktop only)
     scrollInfo,
     imageStats,
     size: compression.finalSize,
@@ -166,6 +188,13 @@ async function captureMultiViewport() {
   const extractHtml = args['extract-html'] === 'true';
   const extractCss = args['extract-css'] === 'true';
   const filterUnused = args['filter-unused'] !== 'false';
+  const captureHover = args['capture-hover'] === 'true';
+  const captureVideoFlag = args['video'] === 'true';
+  const videoFormat = args['video-format'] || 'webm';
+  const videoDuration = args['video-duration']
+    ? parseInt(args['video-duration'], 10)
+    : 12000;
+  const sectionMode = args['section-mode'] === 'true';
 
   for (const vp of requestedViewports) {
     if (!VIEWPORTS[vp]) {
@@ -201,8 +230,8 @@ async function captureMultiViewport() {
         currentHeadless = headless;
 
         if (navigateUrl) {
-          await page.setViewport(VIEWPORTS.desktop);
-          await page.goto(navigateUrl, { waitUntil: ['load', 'networkidle0'], timeout: 60000 });
+          await page.setViewportSize(VIEWPORTS.desktop);
+          await page.goto(navigateUrl, { waitUntil: 'domcontentloaded', timeout: 90000 });
           await new Promise(r => setTimeout(r, 3000));
           cookieResult = await dismissCookieBanner(page);
           await waitForPageReady(page);
@@ -221,9 +250,40 @@ async function captureMultiViewport() {
     if (extractHtml || extractCss) {
       extraction = { html: null, css: null, warnings: [] };
 
+      // Extract content counts BEFORE cleaning HTML (to count hidden items too)
       if (extractHtml) {
         try {
-          const htmlResult = await extractCleanHtml(page, JS_FRAMEWORK_PATTERNS);
+          const contentCounts = await extractContentCounts(page);
+          const countsPath = path.join(args.output, 'content-counts.json');
+          await fs.writeFile(countsPath, JSON.stringify(contentCounts, null, 2), 'utf-8');
+
+          // Generate summary for structure analysis
+          const contentSummary = generateContentSummary(contentCounts);
+          const summaryPath = path.join(args.output, 'content-summary.md');
+          await fs.writeFile(summaryPath, contentSummary, 'utf-8');
+
+          extraction.contentCounts = {
+            path: path.resolve(countsPath),
+            summaryPath: path.resolve(summaryPath),
+            summary: contentCounts.summary
+          };
+
+          if (process.stderr.isTTY) {
+            console.error(`[INFO] Content counts: ${contentCounts.grids.total} grids, ${contentCounts.repeatedItems.total} items`);
+          }
+        } catch (error) {
+          extractionWarnings.push(`Content counting failed: ${error.message}`);
+        }
+      }
+
+      if (extractHtml) {
+        try {
+          // Use semantic enhancement unless --no-semantic flag is set
+          const enhanceSemantic = args['no-semantic'] !== 'true';
+          const htmlResult = enhanceSemantic
+            ? await extractAndEnhanceHtml(page, { enhanceSemantic: true })
+            : await extractCleanHtml(page, JS_FRAMEWORK_PATTERNS);
+
           const html = htmlResult.html;
           const htmlSize = Buffer.byteLength(html, 'utf-8');
 
@@ -233,7 +293,13 @@ async function captureMultiViewport() {
 
           const htmlPath = path.join(args.output, 'source.html');
           await fs.writeFile(htmlPath, html, 'utf-8');
-          extraction.html = { path: path.resolve(htmlPath), size: htmlSize, elementCount: htmlResult.elementCount };
+          extraction.html = {
+            path: path.resolve(htmlPath),
+            size: htmlSize,
+            elementCount: htmlResult.elementCount,
+            semanticEnhanced: enhanceSemantic,
+            semanticStats: htmlResult.semanticStats || null
+          };
           if (htmlResult.warnings.length > 0) extractionWarnings.push(...htmlResult.warnings);
         } catch (error) {
           extraction.html = { error: error.message, failed: true };
@@ -294,12 +360,118 @@ async function captureMultiViewport() {
         }
       }
 
+      // Extract animations (enabled by default with CSS extraction)
+      const extractAnimationsFlag = args['extract-animations'] !== 'false';
+      if (extractCss && extractAnimationsFlag && extraction?.css?.path && !extraction.css.failed) {
+        try {
+          const rawCss = await fs.readFile(extraction.css.path, 'utf-8');
+          const animData = await extractAnimations(rawCss);
+
+          if (!animData.error) {
+            // Write animations.css
+            const animCss = generateAnimationsCss(animData);
+            const animPath = path.join(args.output, 'animations.css');
+            await fs.writeFile(animPath, animCss, 'utf-8');
+
+            // Generate animation tokens
+            const animTokens = generateAnimationTokens(animData);
+
+            // Write animation-tokens.json
+            const animTokensPath = path.join(args.output, 'animation-tokens.json');
+            await fs.writeFile(animTokensPath, JSON.stringify({
+              keyframes: animData.keyframes,
+              transitions: animData.transitions,
+              animatedElements: animData.animatedElements,
+              summary: animTokens
+            }, null, 2), 'utf-8');
+
+            extraction.animations = {
+              path: path.resolve(animPath),
+              tokensPath: path.resolve(animTokensPath),
+              keyframeCount: animTokens.keyframeCount,
+              transitionCount: animTokens.transitions,
+              animatedElementCount: animTokens.animatedElements,
+              tokens: animTokens
+            };
+
+            if (process.stderr.isTTY) {
+              console.error(`[INFO] Animations: ${animTokens.keyframeCount} keyframes, ${animTokens.transitions} transitions`);
+            }
+          } else {
+            extraction.animations = { error: animData.error, failed: true };
+            extractionWarnings.push(`Animation extraction failed: ${animData.error}`);
+          }
+        } catch (error) {
+          extraction.animations = { error: error.message, failed: true };
+          extractionWarnings.push(`Animation extraction failed: ${error.message}`);
+        }
+      }
+
       extraction.warnings = extractionWarnings;
       if (extractionWarnings.length > 0 && process.stderr.isTTY) {
         extractionWarnings.forEach(w => console.error(`[WARN] ${w}`));
       }
     }
 
+    // Capture hover states (requires headless mode per Playwright #5255)
+    let hoverResult = null;
+    if (captureHover) {
+      try {
+        // Try headed mode first, fallback to headless (per validation decision)
+        const wasHeadless = currentHeadless;
+        let hoverCaptureSuccess = false;
+
+        // Attempt headed mode first
+        if (!wasHeadless) {
+          try {
+            const cssContent = extraction?.css?.path
+              ? await fs.readFile(extraction.css.path, 'utf-8')
+              : null;
+            hoverResult = await captureAllHoverStates(page, cssContent, args.output);
+            hoverCaptureSuccess = hoverResult.captured > 0;
+          } catch (headedError) {
+            if (process.stderr.isTTY) {
+              console.error(`[WARN] Headed hover capture failed, switching to headless: ${headedError.message}`);
+            }
+          }
+        }
+
+        // Fallback to headless if headed failed or was already headless
+        if (!hoverCaptureSuccess) {
+          if (!currentHeadless) {
+            await initBrowser(true, args.url);
+          }
+
+          const cssContent = extraction?.css?.path
+            ? await fs.readFile(extraction.css.path, 'utf-8')
+            : null;
+          hoverResult = await captureAllHoverStates(page, cssContent, args.output);
+        }
+
+        // Generate hover.css from captured diffs
+        if (hoverResult && hoverResult.elements && hoverResult.captured > 0) {
+          const hoverCss = generateHoverCss(hoverResult.elements);
+          const hoverCssPath = path.join(args.output, 'hover.css');
+          await fs.writeFile(hoverCssPath, hoverCss, 'utf-8');
+          hoverResult.generatedCss = path.resolve(hoverCssPath);
+        }
+
+        if (process.stderr.isTTY && hoverResult) {
+          console.error(`[INFO] Hover states: ${hoverResult.captured}/${hoverResult.detected} captured`);
+        }
+
+        // Restore browser mode for viewport captures if needed
+        if (!wasHeadless && currentHeadless && requestedViewports.some(v => !getHeadlessForViewport(v))) {
+          await initBrowser(false, args.url);
+        }
+      } catch (error) {
+        if (process.stderr.isTTY) {
+          console.error(`[WARN] Hover capture failed: ${error.message}`);
+        }
+        hoverResult = { error: error.message, failed: true };
+      }
+    }
+
     // Capture viewports
     const screenshots = [];
     const browserRestarts = [];
@@ -316,6 +488,45 @@ async function captureMultiViewport() {
       screenshots.push(result);
     }
 
+    // Capture video (opt-in, after screenshots)
+    let videoResult = null;
+    if (captureVideoFlag) {
+      try {
+        // Check if ffmpeg is needed but not available
+        if (FFMPEG_REQUIRED_FORMATS.includes(videoFormat)) {
+          const hasFf = await hasFfmpeg();
+          if (!hasFf && process.stderr.isTTY) {
+            console.error(`[WARN] ffmpeg not found. Will output WebM instead of ${videoFormat}`);
+            console.error('[WARN] Install: npm install fluent-ffmpeg @ffmpeg-installer/ffmpeg');
+          }
+        }
+
+        // Use desktop viewport for video
+        await page.setViewportSize(VIEWPORTS.desktop);
+        await new Promise(r => setTimeout(r, 1000));
+
+        if (process.stderr.isTTY) {
+          console.error(`[INFO] Recording video (${videoDuration / 1000}s)...`);
+        }
+
+        videoResult = await captureVideo(page, args.output, {
+          format: videoFormat,
+          duration: videoDuration,
+          filename: 'preview'
+        });
+
+        if (process.stderr.isTTY) {
+          const outputFormat = videoResult.output.split('.').pop();
+          console.error(`[INFO] Video saved: ${outputFormat} (${(videoResult.duration / 1000).toFixed(1)}s)`);
+        }
+      } catch (error) {
+        if (process.stderr.isTTY) {
+          console.error(`[WARN] Video capture failed: ${error.message}`);
+        }
+        videoResult = { error: error.message, failed: true };
+      }
+    }
+
     // Build dimension output
     const allViewportDimensions = {};
     for (const screenshot of screenshots) {
@@ -332,6 +543,77 @@ async function captureMultiViewport() {
     const summaryPath = path.join(args.output, 'dimensions-summary.json');
     await fs.writeFile(summaryPath, JSON.stringify(aiSummary, null, 2));
 
+    // Write DOM hierarchy if available (from desktop capture)
+    const desktopScreenshot = screenshots.find(s => s.viewport === 'desktop');
+    let hierarchyPath = null;
+    if (desktopScreenshot?.domHierarchy) {
+      hierarchyPath = path.join(args.output, 'dom-hierarchy.json');
+      await fs.writeFile(hierarchyPath, JSON.stringify(desktopScreenshot.domHierarchy, null, 2));
+
+      if (process.stderr.isTTY) {
+        const stats = desktopScreenshot.domHierarchy.stats || {};
+        console.error(`[INFO] DOM hierarchy: ${stats.totalNodes || 0} nodes, ${stats.landmarkCount || 0} landmarks, ${stats.extractionTimeMs || 0}ms`);
+      }
+    }
+
+    // Section-based capture (for improved AI analysis)
+    let sectionResult = null;
+    if (sectionMode && desktopScreenshot) {
+      try {
+        // Lazy import section modules
+        const { detectSections } = await import('./section-detector.js');
+        const { cropSections } = await import('./section-cropper.js');
+
+        // Reset to desktop viewport for section detection
+        await page.setViewportSize(VIEWPORTS.desktop);
+        await new Promise(r => setTimeout(r, 500));
+
+        if (process.stderr.isTTY) {
+          console.error('[INFO] Detecting sections...');
+        }
+
+        const sections = await detectSections(page, {
+          padding: 40,
+          minSections: 3,
+          fallbackToViewport: true
+        });
+
+        if (process.stderr.isTTY) {
+          console.error(`[INFO] Found ${sections.length} sections, cropping...`);
+        }
+
+        const croppedResult = await cropSections(
+          desktopScreenshot.path,
+          sections,
+          args.output
+        );
+
+        sectionResult = {
+          enabled: true,
+          count: croppedResult.sections.length,
+          skipped: croppedResult.skipped.length,
+          sections: croppedResult.sections.map(s => ({
+            index: s.index,
+            name: s.name,
+            path: s.relativePath,
+            bounds: s.bounds,
+            role: s.role
+          })),
+          directory: croppedResult.directory,
+          summary: croppedResult.summary
+        };
+
+        if (process.stderr.isTTY) {
+          console.error(`[INFO] Sections: ${croppedResult.sections.length} cropped, ${croppedResult.skipped.length} skipped`);
+        }
+      } catch (err) {
+        sectionResult = { enabled: true, error: err.message };
+        if (process.stderr.isTTY) {
+          console.error(`[WARN] Section processing failed: ${err.message}`);
+        }
+      }
+    }
+
     const totalContainers = Object.values(dimensionsOutput.viewports).reduce((sum, vp) => sum + (vp.containers?.length || 0), 0);
     const totalCards = Object.values(dimensionsOutput.viewports).reduce((sum, vp) => sum + (vp.cards?.length || 0), 0);
     const totalGrids = Object.values(dimensionsOutput.viewports).reduce((sum, vp) => sum + (vp.gridLayouts?.length || 0), 0);
@@ -346,6 +628,23 @@ async function captureMultiViewport() {
       outputDir: path.resolve(args.output),
       cookieHandling: cookieResult,
       extraction,
+      hoverStates: hoverResult && !hoverResult.failed ? {
+        directory: hoverResult.directory,
+        detected: hoverResult.detected,
+        captured: hoverResult.captured,
+        summaryPath: hoverResult.summaryPath,
+        generatedCss: hoverResult.generatedCss
+      } : (hoverResult?.error ? { error: hoverResult.error } : undefined),
+      video: videoResult && !videoResult.failed ? {
+        path: videoResult.output,
+        format: videoResult.output.split('.').pop(),
+        duration: videoResult.duration,
+        pageHeight: videoResult.pageHeight,
+        webm: videoResult.webm,
+        mp4: videoResult.mp4,
+        gif: videoResult.gif,
+        conversionError: videoResult.conversionError
+      } : (videoResult?.error ? { error: videoResult.error } : undefined),
       componentDimensions: {
         full: path.resolve(dimensionsPath),
         summary: path.resolve(summaryPath),
@@ -353,6 +652,11 @@ async function captureMultiViewport() {
         stats: { containers: totalContainers, cards: totalCards, gridLayouts: totalGrids,
           typography: Object.values(dimensionsOutput.viewports).reduce((sum, vp) => sum + (vp.typography?.length || 0), 0) }
       },
+      domHierarchy: desktopScreenshot?.domHierarchy ? {
+        path: path.resolve(hierarchyPath),
+        stats: desktopScreenshot.domHierarchy.stats
+      } : undefined,
+      sections: sectionResult,
       screenshots,
       browserRestarts: browserRestarts.length > 0 ? browserRestarts : undefined,
       scrollDelay,