@testivai/witness-playwright 0.1.7 → 0.1.9

package/dist/snapshot.js

@@ -75,21 +75,80 @@ async function snapshot(page, testInfo, name, config) {
     // Load project configuration and merge with test-specific overrides
     const projectConfig = await (0, loader_1.loadConfig)();
     const effectiveConfig = (0, loader_1.mergeTestConfig)(projectConfig, config);
+    // Debug: Log config
+    if (process.env.TESTIVAI_DEBUG === 'true') {
+        console.log('[TestivAI] Config:', {
+            projectConfig,
+            testConfig: config,
+            effectiveConfig
+        });
+    }
     const outputDir = path.join(process.cwd(), '.testivai', 'temp');
     await fs.ensureDir(outputDir);
     const snapshotName = name || getSnapshotNameFromUrl(page.url());
     const timestamp = Date.now();
     const safeName = snapshotName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
     const baseFilename = `${timestamp}_${safeName}`;
-    // 1. Capture full-page screenshot using scroll-and-stitch approach
-    // This is the same technique used by GoFullPage Chrome extension
+    // 1. Capture full-page screenshot
     const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
-    // Get viewport dimensions
-    const viewport = page.viewportSize();
-    const viewportWidth = viewport?.width || 1280;
-    const viewportHeight = viewport?.height || 720;
-    // Find the main scrollable container and get its dimensions
-    const scrollableInfo = await page.evaluate(`
+    // Check if CDP approach is enabled
+    if (effectiveConfig.useCDP) {
+        // Use Chrome DevTools Protocol for full-page capture
+        if (process.env.TESTIVAI_DEBUG === 'true') {
+            console.log('[TestivAI] Using CDP approach for full-page screenshot');
+        }
+        try {
+            // Create a CDP session
+            const client = await page.context().newCDPSession(page);
+            // Enable Page domain
+            await client.send('Page.enable');
+            // Get layout metrics to determine full page size
+            const layoutMetrics = await client.send('Page.getLayoutMetrics');
+            // Calculate full page dimensions
+            const pageWidth = Math.ceil(layoutMetrics.contentSize.width);
+            const pageHeight = Math.ceil(layoutMetrics.contentSize.height);
+            if (process.env.TESTIVAI_DEBUG === 'true') {
+                console.log('[TestivAI] CDP Layout metrics:', {
+                    pageWidth,
+                    pageHeight,
+                    viewportWidth: layoutMetrics.layoutViewport.clientWidth,
+                    viewportHeight: layoutMetrics.layoutViewport.clientHeight
+                });
+            }
+            // Capture screenshot with captureBeyondViewport: true
+            const screenshot = await client.send('Page.captureScreenshot', {
+                format: 'png',
+                captureBeyondViewport: true,
+                clip: {
+                    x: 0,
+                    y: 0,
+                    width: pageWidth,
+                    height: pageHeight,
+                    scale: 1
+                }
+            });
+            // Save the screenshot
+            await fs.writeFile(screenshotPath, Buffer.from(screenshot.data, 'base64'));
+            // Close CDP session
+            await client.detach();
+        }
+        catch (error) {
+            console.error('[TestivAI] CDP screenshot failed:', error.message);
+            // Fallback to regular screenshot
+            await page.screenshot({ path: screenshotPath, fullPage: true });
+        }
+    }
+    else {
+        // Use scroll-and-stitch approach (default)
+        if (process.env.TESTIVAI_DEBUG === 'true') {
+            console.log('[TestivAI] Using scroll-and-stitch approach for full-page screenshot');
+        }
+        // Get viewport dimensions
+        const viewport = page.viewportSize();
+        const viewportWidth = viewport?.width || 1280;
+        const viewportHeight = viewport?.height || 720;
+        // Find the main scrollable container and get its dimensions
+        const scrollableInfo = await page.evaluate(`
     (function() {
       var mainScrollable = null;
       var maxScrollHeight = 0;
@@ -134,91 +193,92 @@ async function snapshot(page, testInfo, name, config) {
       };
     })()
   `);
-    // Calculate number of screenshots needed
-    const totalHeight = scrollableInfo.scrollHeight;
-    const captureHeight = scrollableInfo.clientHeight;
-    const numCaptures = Math.ceil(totalHeight / captureHeight);
-    // Debug logging (only when TESTIVAI_DEBUG is enabled)
-    if (process.env.TESTIVAI_DEBUG === 'true') {
-        console.log(`[TestivAI] Scroll-and-stitch info:`, {
-            hasScrollable: scrollableInfo.hasScrollable,
-            scrollableId: scrollableInfo.scrollableId,
-            totalHeight,
-            captureHeight,
-            numCaptures,
-            viewportWidth,
-            viewportHeight
-        });
-    }
-    // If only one capture needed, just take a regular screenshot
-    if (numCaptures <= 1) {
-        await page.screenshot({ path: screenshotPath, fullPage: true });
-    }
-    else {
-        // Scroll-and-stitch approach
-        const screenshots = [];
-        for (let i = 0; i < numCaptures; i++) {
-            const scrollPosition = i * captureHeight;
-            // Scroll to position
-            if (scrollableInfo.hasScrollable && scrollableInfo.scrollableId) {
-                await page.evaluate(`
+        // Calculate number of screenshots needed
+        const totalHeight = scrollableInfo.scrollHeight;
+        const captureHeight = scrollableInfo.clientHeight;
+        const numCaptures = Math.ceil(totalHeight / captureHeight);
+        // Debug logging (only when TESTIVAI_DEBUG is enabled)
+        if (process.env.TESTIVAI_DEBUG === 'true') {
+            console.log(`[TestivAI] Scroll-and-stitch info:`, {
+                hasScrollable: scrollableInfo.hasScrollable,
+                scrollableId: scrollableInfo.scrollableId,
+                totalHeight,
+                captureHeight,
+                numCaptures,
+                viewportWidth,
+                viewportHeight
+            });
+        }
+        // If only one capture needed, just take a regular screenshot
+        if (numCaptures <= 1) {
+            await page.screenshot({ path: screenshotPath, fullPage: true });
+        }
+        else {
+            // Scroll-and-stitch approach
+            const screenshots = [];
+            for (let i = 0; i < numCaptures; i++) {
+                const scrollPosition = i * captureHeight;
+                // Scroll to position
+                if (scrollableInfo.hasScrollable && scrollableInfo.scrollableId) {
+                    await page.evaluate(`
           document.getElementById('${scrollableInfo.scrollableId}').scrollTop = ${scrollPosition};
         `);
+                }
+                else {
+                    await page.evaluate(`window.scrollTo(0, ${scrollPosition})`);
+                }
+                // Wait for scroll and any lazy-loaded content
+                await page.waitForTimeout(100);
+                // Capture this viewport
+                const screenshotBuffer = await page.screenshot({ fullPage: false });
+                screenshots.push(screenshotBuffer);
             }
-            else {
-                await page.evaluate(`window.scrollTo(0, ${scrollPosition})`);
-            }
-            // Wait for scroll and any lazy-loaded content
-            await page.waitForTimeout(100);
-            // Capture this viewport
-            const screenshotBuffer = await page.screenshot({ fullPage: false });
-            screenshots.push(screenshotBuffer);
-        }
-        // Stitch screenshots together using sharp
-        // Calculate the actual height of the last capture (may be partial)
-        const lastCaptureHeight = totalHeight - (captureHeight * (numCaptures - 1));
-        // Create composite image
-        const compositeInputs = screenshots.map((buffer, index) => {
-            const isLast = index === screenshots.length - 1;
-            const yOffset = index * captureHeight;
-            // For the last screenshot, we need to crop from the bottom
-            if (isLast && lastCaptureHeight < captureHeight) {
+            // Stitch screenshots together using sharp
+            // Calculate the actual height of the last capture (may be partial)
+            const lastCaptureHeight = totalHeight - (captureHeight * (numCaptures - 1));
+            // Create composite image
+            const compositeInputs = screenshots.map((buffer, index) => {
+                const isLast = index === screenshots.length - 1;
+                const yOffset = index * captureHeight;
+                // For the last screenshot, we need to crop from the bottom
+                if (isLast && lastCaptureHeight < captureHeight) {
+                    return {
+                        input: buffer,
+                        top: yOffset,
+                        left: 0,
+                        // We'll handle the cropping separately
+                    };
+                }
                 return {
                     input: buffer,
                     top: yOffset,
                     left: 0,
-                    // We'll handle the cropping separately
                 };
-            }
-            return {
-                input: buffer,
-                top: yOffset,
-                left: 0,
-            };
-        });
-        // Create the final stitched image
-        const finalImage = (0, sharp_1.default)({
-            create: {
-                width: viewportWidth,
-                height: totalHeight,
-                channels: 4,
-                background: { r: 255, g: 255, b: 255, alpha: 1 }
-            }
-        });
-        // Composite all screenshots
-        const stitchedImage = await finalImage
-            .composite(compositeInputs)
-            .png()
-            .toBuffer();
-        await fs.writeFile(screenshotPath, stitchedImage);
-        // Restore original scroll position
-        if (scrollableInfo.hasScrollable && scrollableInfo.scrollableId) {
-            await page.evaluate(`
+            });
+            // Create the final stitched image
+            const finalImage = (0, sharp_1.default)({
+                create: {
+                    width: viewportWidth,
+                    height: totalHeight,
+                    channels: 4,
+                    background: { r: 255, g: 255, b: 255, alpha: 1 }
+                }
+            });
+            // Composite all screenshots
+            const stitchedImage = await finalImage
+                .composite(compositeInputs)
+                .png()
+                .toBuffer();
+            await fs.writeFile(screenshotPath, stitchedImage);
+            // Restore original scroll position
+            if (scrollableInfo.hasScrollable && scrollableInfo.scrollableId) {
+                await page.evaluate(`
         document.getElementById('${scrollableInfo.scrollableId}').scrollTop = ${scrollableInfo.scrollTop};
       `);
-        }
-        else {
-            await page.evaluate(`window.scrollTo(0, ${scrollableInfo.scrollTop})`);
+            }
+            else {
+                await page.evaluate(`window.scrollTo(0, ${scrollableInfo.scrollTop})`);
+            }
         }
     }
     // 2. Dump full-page DOM

package/dist/types.d.ts

@@ -133,6 +133,8 @@ export interface TestivAIConfig {
     performance?: Partial<PerformanceConfig>;
     /** Element selectors to capture (existing option) */
     selectors?: string[];
+    /** Use Chrome DevTools Protocol for full-page capture (default: false - uses scroll-and-stitch) */
+    useCDP?: boolean;
 }
 /**
  * Layout/Bounding box data for an element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testivai/witness-playwright",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Playwright sensor for Testivai Visual Regression Test system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/snapshot.ts

@@ -46,6 +46,15 @@ export async function snapshot(
   const projectConfig = await loadConfig();
   const effectiveConfig = mergeTestConfig(projectConfig, config);
   
+  // Debug: Log config
+  if (process.env.TESTIVAI_DEBUG === 'true') {
+    console.log('[TestivAI] Config:', {
+      projectConfig,
+      testConfig: config,
+      effectiveConfig
+    });
+  }
+  
   const outputDir = path.join(process.cwd(), '.testivai', 'temp');
   await fs.ensureDir(outputDir);
 
@@ -54,17 +63,76 @@ export async function snapshot(
   const safeName = snapshotName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
   const baseFilename = `${timestamp}_${safeName}`;
 
-  // 1. Capture full-page screenshot using scroll-and-stitch approach
-  // This is the same technique used by GoFullPage Chrome extension
+  // 1. Capture full-page screenshot
   const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
   
-  // Get viewport dimensions
-  const viewport = page.viewportSize();
-  const viewportWidth = viewport?.width || 1280;
-  const viewportHeight = viewport?.height || 720;
-  
-  // Find the main scrollable container and get its dimensions
-  const scrollableInfo = await page.evaluate(`
+  // Check if CDP approach is enabled
+  if (effectiveConfig.useCDP) {
+    // Use Chrome DevTools Protocol for full-page capture
+    if (process.env.TESTIVAI_DEBUG === 'true') {
+      console.log('[TestivAI] Using CDP approach for full-page screenshot');
+    }
+    
+    try {
+      // Create a CDP session
+      const client = await page.context().newCDPSession(page);
+      
+      // Enable Page domain
+      await client.send('Page.enable');
+      
+      // Get layout metrics to determine full page size
+      const layoutMetrics = await client.send('Page.getLayoutMetrics');
+      
+      // Calculate full page dimensions
+      const pageWidth = Math.ceil(layoutMetrics.contentSize.width);
+      const pageHeight = Math.ceil(layoutMetrics.contentSize.height);
+      
+      if (process.env.TESTIVAI_DEBUG === 'true') {
+        console.log('[TestivAI] CDP Layout metrics:', {
+          pageWidth,
+          pageHeight,
+          viewportWidth: layoutMetrics.layoutViewport.clientWidth,
+          viewportHeight: layoutMetrics.layoutViewport.clientHeight
+        });
+      }
+      
+      // Capture screenshot with captureBeyondViewport: true
+      const screenshot = await client.send('Page.captureScreenshot', {
+        format: 'png',
+        captureBeyondViewport: true,
+        clip: {
+          x: 0,
+          y: 0,
+          width: pageWidth,
+          height: pageHeight,
+          scale: 1
+        }
+      });
+      
+      // Save the screenshot
+      await fs.writeFile(screenshotPath, Buffer.from(screenshot.data, 'base64'));
+      
+      // Close CDP session
+      await client.detach();
+      
+    } catch (error: any) {
+      console.error('[TestivAI] CDP screenshot failed:', error.message);
+      // Fallback to regular screenshot
+      await page.screenshot({ path: screenshotPath, fullPage: true });
+    }
+  } else {
+    // Use scroll-and-stitch approach (default)
+    if (process.env.TESTIVAI_DEBUG === 'true') {
+      console.log('[TestivAI] Using scroll-and-stitch approach for full-page screenshot');
+    }
+    
+    // Get viewport dimensions
+    const viewport = page.viewportSize();
+    const viewportWidth = viewport?.width || 1280;
+    const viewportHeight = viewport?.height || 720;
+    
+    // Find the main scrollable container and get its dimensions
+    const scrollableInfo = await page.evaluate(`
     (function() {
       var mainScrollable = null;
       var maxScrollHeight = 0;
@@ -213,6 +281,7 @@ export async function snapshot(
     } else {
       await page.evaluate(`window.scrollTo(0, ${scrollableInfo.scrollTop})`);
     }
+    }
   }
 
   // 2. Dump full-page DOM

package/src/types.ts

@@ -141,6 +141,8 @@ export interface TestivAIConfig {
   performance?: Partial<PerformanceConfig>;
   /** Element selectors to capture (existing option) */
   selectors?: string[];
+  /** Use Chrome DevTools Protocol for full-page capture (default: false - uses scroll-and-stitch) */
+  useCDP?: boolean;
 }
 
 /**