@testivai/witness-playwright 0.1.6 → 0.1.7

package/dist/reporter.js

@@ -155,9 +155,15 @@ class TestivAIPlaywrightReporter {
                 headers: { 'X-API-KEY': this.options.apiKey },
             });
             console.log(`Testivai Reporter: Successfully uploaded ${snapshots.length} snapshots with Batch ID: ${batchId}`);
-            // Clean up temp files
-            await fs.emptyDir(this.tempDir);
-            console.log('Testivai Reporter: Cleaned up temporary evidence files.');
+            // Clean up temp files (skip if DEBUG mode is enabled)
+            const debugMode = process.env.TESTIVAI_DEBUG === 'true';
+            if (debugMode) {
+                console.log('Testivai Reporter: DEBUG mode enabled - keeping temporary evidence files in:', this.tempDir);
+            }
+            else {
+                await fs.emptyDir(this.tempDir);
+                console.log('Testivai Reporter: Cleaned up temporary evidence files.');
+            }
         }
         catch (error) {
             console.error('Testivai Reporter: An error occurred during the onEnd hook:', error.message);

package/dist/snapshot.js

@@ -32,11 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.snapshot = snapshot;
 const fs = __importStar(require("fs-extra"));
 const path = __importStar(require("path"));
 const url_1 = require("url");
+const sharp_1 = __importDefault(require("sharp"));
 const loader_1 = require("./config/loader");
 /**
  * Generates a safe filename from a URL.
@@ -77,107 +81,146 @@ async function snapshot(page, testInfo, name, config) {
     const timestamp = Date.now();
     const safeName = snapshotName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
     const baseFilename = `${timestamp}_${safeName}`;
-    // 1. Capture full-page screenshot
+    // 1. Capture full-page screenshot using scroll-and-stitch approach
+    // This is the same technique used by GoFullPage Chrome extension
     const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
-    // Temporarily disable overflow constraints and fixed heights to enable full-page capture
-    // This handles common SPA patterns like h-screen overflow-hidden with internal scrolling
-    /* eslint-disable no-eval */
-    await page.evaluate(`
-    window.__testivaiOriginalStyles = [];
-    
-    // Process all elements to find and fix viewport-constraining styles
-    document.querySelectorAll('*').forEach(function(el) {
-      var computed = window.getComputedStyle(el);
+    // 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;
       
-      // Check for overflow constraints
-      var hasOverflowConstraint = 
-        computed.overflow === 'auto' || 
-        computed.overflow === 'scroll' || 
-        computed.overflow === 'hidden' ||
-        computed.overflowY === 'auto' || 
-        computed.overflowY === 'scroll' ||
-        computed.overflowY === 'hidden';
-      
-      // Check for fixed height constraints (100vh, 100%, or specific pixel values on containers)
-      var hasHeightConstraint = 
-        computed.height === '100vh' ||
-        (computed.height.endsWith('px') && el.scrollHeight > el.clientHeight) ||
-        (computed.maxHeight && computed.maxHeight !== 'none');
-      
-      if (hasOverflowConstraint || hasHeightConstraint) {
-        window.__testivaiOriginalStyles.push({
-          element: el,
-          overflow: el.style.overflow,
-          overflowY: el.style.overflowY,
-          height: el.style.height,
-          maxHeight: el.style.maxHeight,
-          minHeight: el.style.minHeight
-        });
+      // Find the element with the most scrollable content
+      document.querySelectorAll('*').forEach(function(el) {
+        var computed = window.getComputedStyle(el);
+        var isScrollable = (
+          computed.overflowY === 'auto' || 
+          computed.overflowY === 'scroll'
+        );
         
-        // For scrollable containers, expand to full scroll height
-        if (hasOverflowConstraint && el.scrollHeight > el.clientHeight) {
-          el.style.height = el.scrollHeight + 'px';
-          el.style.minHeight = el.scrollHeight + 'px';
-        } else if (hasHeightConstraint) {
-          el.style.height = 'auto';
+        if (isScrollable && el.scrollHeight > el.clientHeight) {
+          if (el.scrollHeight > maxScrollHeight) {
+            maxScrollHeight = el.scrollHeight;
+            mainScrollable = el;
+          }
         }
-        
-        // Remove overflow constraints
-        el.style.overflow = 'visible';
-        el.style.overflowY = 'visible';
-        el.style.maxHeight = 'none';
-      }
-    });
-    
-    // Also handle html and body elements specifically
-    var html = document.documentElement;
-    var body = document.body;
-    
-    window.__testivaiRootStyles = {
-      html: {
-        overflow: html.style.overflow,
-        height: html.style.height
-      },
-      body: {
-        overflow: body.style.overflow,
-        height: body.style.height
+      });
+      
+      // If we found a scrollable container, add a temporary ID
+      if (mainScrollable) {
+        if (!mainScrollable.id) {
+          mainScrollable.id = '__testivai_scrollable_' + Date.now();
+        }
+        return {
+          hasScrollable: true,
+          scrollableId: mainScrollable.id,
+          scrollHeight: mainScrollable.scrollHeight,
+          clientHeight: mainScrollable.clientHeight,
+          scrollTop: mainScrollable.scrollTop
+        };
       }
-    };
-    
-    html.style.overflow = 'visible';
-    html.style.height = 'auto';
-    body.style.overflow = 'visible';
-    body.style.height = 'auto';
+      
+      // Fallback to document scroll
+      return {
+        hasScrollable: false,
+        scrollableId: null,
+        scrollHeight: document.documentElement.scrollHeight,
+        clientHeight: window.innerHeight,
+        scrollTop: window.scrollY
+      };
+    })()
   `);
-    // Wait for layout to stabilize after style changes
-    await page.waitForTimeout(300);
-    // Take full-page screenshot
-    await page.screenshot({ path: screenshotPath, fullPage: true });
-    // Restore original styles
-    await page.evaluate(`
-    // Restore element styles
-    if (window.__testivaiOriginalStyles) {
-      window.__testivaiOriginalStyles.forEach(function(item) {
-        item.element.style.overflow = item.overflow;
-        item.element.style.overflowY = item.overflowY;
-        item.element.style.height = item.height;
-        item.element.style.maxHeight = item.maxHeight;
-        item.element.style.minHeight = item.minHeight;
-      });
-      delete window.__testivaiOriginalStyles;
+    // 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
+        });
     }
-    
-    // Restore root element styles
-    if (window.__testivaiRootStyles) {
-      var html = document.documentElement;
-      var body = document.body;
-      html.style.overflow = window.__testivaiRootStyles.html.overflow;
-      html.style.height = window.__testivaiRootStyles.html.height;
-      body.style.overflow = window.__testivaiRootStyles.body.overflow;
-      body.style.height = window.__testivaiRootStyles.body.height;
-      delete window.__testivaiRootStyles;
+    // 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);
+        }
+        // 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,
+            };
+        });
+        // 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})`);
+        }
     }
-  `);
     // 2. Dump full-page DOM
     const domPath = path.join(outputDir, `${baseFilename}.html`);
     const htmlContent = await page.content();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testivai/witness-playwright",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Playwright sensor for Testivai Visual Regression Test system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,6 +33,7 @@
     "cross-fetch": "^4.0.0",
     "fs-extra": "^11.2.0",
     "playwright-lighthouse": "^4.0.0",
+    "sharp": "^0.34.5",
     "simple-git": "^3.21.0"
   },
   "devDependencies": {

package/src/reporter.ts

@@ -147,9 +147,14 @@ export class TestivAIPlaywrightReporter implements Reporter {
 
       console.log(`Testivai Reporter: Successfully uploaded ${snapshots.length} snapshots with Batch ID: ${batchId}`);
 
-      // Clean up temp files
-      await fs.emptyDir(this.tempDir);
-      console.log('Testivai Reporter: Cleaned up temporary evidence files.');
+      // Clean up temp files (skip if DEBUG mode is enabled)
+      const debugMode = process.env.TESTIVAI_DEBUG === 'true';
+      if (debugMode) {
+        console.log('Testivai Reporter: DEBUG mode enabled - keeping temporary evidence files in:', this.tempDir);
+      } else {
+        await fs.emptyDir(this.tempDir);
+        console.log('Testivai Reporter: Cleaned up temporary evidence files.');
+      }
 
     } catch (error: any) {
       console.error('Testivai Reporter: An error occurred during the onEnd hook:', error.message);

package/src/snapshot.ts

@@ -2,6 +2,7 @@ import { Page, TestInfo } from '@playwright/test';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import { URL } from 'url';
+import sharp from 'sharp';
 import { SnapshotPayload, LayoutData, TestivAIConfig, PerformanceTimings, LighthouseResults } from './types';
 import { loadConfig, mergeTestConfig } from './config/loader';
 
@@ -53,111 +54,166 @@ export async function snapshot(
   const safeName = snapshotName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
   const baseFilename = `${timestamp}_${safeName}`;
 
-  // 1. Capture full-page screenshot
+  // 1. Capture full-page screenshot using scroll-and-stitch approach
+  // This is the same technique used by GoFullPage Chrome extension
   const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
   
-  // Temporarily disable overflow constraints and fixed heights to enable full-page capture
-  // This handles common SPA patterns like h-screen overflow-hidden with internal scrolling
-  /* eslint-disable no-eval */
-  await page.evaluate(`
-    window.__testivaiOriginalStyles = [];
-    
-    // Process all elements to find and fix viewport-constraining styles
-    document.querySelectorAll('*').forEach(function(el) {
-      var computed = window.getComputedStyle(el);
-      
-      // Check for overflow constraints
-      var hasOverflowConstraint = 
-        computed.overflow === 'auto' || 
-        computed.overflow === 'scroll' || 
-        computed.overflow === 'hidden' ||
-        computed.overflowY === 'auto' || 
-        computed.overflowY === 'scroll' ||
-        computed.overflowY === 'hidden';
-      
-      // Check for fixed height constraints (100vh, 100%, or specific pixel values on containers)
-      var hasHeightConstraint = 
-        computed.height === '100vh' ||
-        (computed.height.endsWith('px') && el.scrollHeight > el.clientHeight) ||
-        (computed.maxHeight && computed.maxHeight !== 'none');
+  // 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;
       
-      if (hasOverflowConstraint || hasHeightConstraint) {
-        window.__testivaiOriginalStyles.push({
-          element: el,
-          overflow: el.style.overflow,
-          overflowY: el.style.overflowY,
-          height: el.style.height,
-          maxHeight: el.style.maxHeight,
-          minHeight: el.style.minHeight
-        });
+      // Find the element with the most scrollable content
+      document.querySelectorAll('*').forEach(function(el) {
+        var computed = window.getComputedStyle(el);
+        var isScrollable = (
+          computed.overflowY === 'auto' || 
+          computed.overflowY === 'scroll'
+        );
         
-        // For scrollable containers, expand to full scroll height
-        if (hasOverflowConstraint && el.scrollHeight > el.clientHeight) {
-          el.style.height = el.scrollHeight + 'px';
-          el.style.minHeight = el.scrollHeight + 'px';
-        } else if (hasHeightConstraint) {
-          el.style.height = 'auto';
+        if (isScrollable && el.scrollHeight > el.clientHeight) {
+          if (el.scrollHeight > maxScrollHeight) {
+            maxScrollHeight = el.scrollHeight;
+            mainScrollable = el;
+          }
         }
-        
-        // Remove overflow constraints
-        el.style.overflow = 'visible';
-        el.style.overflowY = 'visible';
-        el.style.maxHeight = 'none';
+      });
+      
+      // If we found a scrollable container, add a temporary ID
+      if (mainScrollable) {
+        if (!mainScrollable.id) {
+          mainScrollable.id = '__testivai_scrollable_' + Date.now();
+        }
+        return {
+          hasScrollable: true,
+          scrollableId: mainScrollable.id,
+          scrollHeight: mainScrollable.scrollHeight,
+          clientHeight: mainScrollable.clientHeight,
+          scrollTop: mainScrollable.scrollTop
+        };
       }
+      
+      // Fallback to document scroll
+      return {
+        hasScrollable: false,
+        scrollableId: null,
+        scrollHeight: document.documentElement.scrollHeight,
+        clientHeight: window.innerHeight,
+        scrollTop: window.scrollY
+      };
+    })()
+  `) as { 
+    hasScrollable: boolean; 
+    scrollableId: string | null; 
+    scrollHeight: number; 
+    clientHeight: number;
+    scrollTop: number;
+  };
+  
+  // 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: Buffer[] = [];
     
-    // Also handle html and body elements specifically
-    var html = document.documentElement;
-    var body = document.body;
+    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);
+    }
+    
+    // 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,
+      };
+    });
     
-    window.__testivaiRootStyles = {
-      html: {
-        overflow: html.style.overflow,
-        height: html.style.height
-      },
-      body: {
-        overflow: body.style.overflow,
-        height: body.style.height
+    // Create the final stitched image
+    const finalImage = sharp({
+      create: {
+        width: viewportWidth,
+        height: totalHeight,
+        channels: 4,
+        background: { r: 255, g: 255, b: 255, alpha: 1 }
       }
-    };
+    });
     
-    html.style.overflow = 'visible';
-    html.style.height = 'auto';
-    body.style.overflow = 'visible';
-    body.style.height = 'auto';
-  `);
-  
-  // Wait for layout to stabilize after style changes
-  await page.waitForTimeout(300);
-  
-  // Take full-page screenshot
-  await page.screenshot({ path: screenshotPath, fullPage: true });
-  
-  // Restore original styles
-  await page.evaluate(`
-    // Restore element styles
-    if (window.__testivaiOriginalStyles) {
-      window.__testivaiOriginalStyles.forEach(function(item) {
-        item.element.style.overflow = item.overflow;
-        item.element.style.overflowY = item.overflowY;
-        item.element.style.height = item.height;
-        item.element.style.maxHeight = item.maxHeight;
-        item.element.style.minHeight = item.minHeight;
-      });
-      delete window.__testivaiOriginalStyles;
-    }
+    // Composite all screenshots
+    const stitchedImage = await finalImage
+      .composite(compositeInputs)
+      .png()
+      .toBuffer();
     
-    // Restore root element styles
-    if (window.__testivaiRootStyles) {
-      var html = document.documentElement;
-      var body = document.body;
-      html.style.overflow = window.__testivaiRootStyles.html.overflow;
-      html.style.height = window.__testivaiRootStyles.html.height;
-      body.style.overflow = window.__testivaiRootStyles.body.overflow;
-      body.style.height = window.__testivaiRootStyles.body.height;
-      delete window.__testivaiRootStyles;
+    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})`);
     }
-  `);
+  }
 
   // 2. Dump full-page DOM
   const domPath = path.join(outputDir, `${baseFilename}.html`);