@testivai/witness-playwright 0.1.5 → 0.1.6

package/dist/snapshot.js

@@ -79,36 +79,104 @@ async function snapshot(page, testInfo, name, config) {
     const baseFilename = `${timestamp}_${safeName}`;
     // 1. Capture full-page screenshot
     const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
-    // Temporarily disable overflow constraints to enable full-page capture
+    // 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 = [];
-    document.querySelectorAll('*').forEach((el) => {
-      const computed = window.getComputedStyle(el);
-      if (computed.overflow === 'auto' || computed.overflow === 'scroll' || 
-          computed.overflowY === 'auto' || computed.overflowY === 'scroll') {
+    
+    // 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');
+      
+      if (hasOverflowConstraint || hasHeightConstraint) {
         window.__testivaiOriginalStyles.push({
           element: el,
           overflow: el.style.overflow,
-          height: el.style.height
+          overflowY: el.style.overflowY,
+          height: el.style.height,
+          maxHeight: el.style.maxHeight,
+          minHeight: el.style.minHeight
         });
+        
+        // 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';
+        }
+        
+        // Remove overflow constraints
         el.style.overflow = 'visible';
-        el.style.height = 'auto';
+        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
+      }
+    };
+    
+    html.style.overflow = 'visible';
+    html.style.height = 'auto';
+    body.style.overflow = 'visible';
+    body.style.height = 'auto';
   `);
-    // Wait for layout to stabilize
-    await page.waitForTimeout(200);
+    // 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((item) => {
+      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;
     }
+    
+    // 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;
+    }
   `);
     // 2. Dump full-page DOM
     const domPath = path.join(outputDir, `${baseFilename}.html`);

package/package.json

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

package/progress.md

@@ -745,12 +745,47 @@ The Playwright SDK provides two main components that are production-ready:
 
 ---
 
+## Full-Page Screenshot Fix (January 10, 2026)
+
+### Issue: Windowed Screenshots Instead of Full-Page
+
+**Problem**: Screenshots were capturing only the visible viewport instead of the full scrollable page content.
+
+**Root Cause**: Modern SPA frameworks (React, Vue, Angular) commonly use fixed viewport layouts like:
+```css
+.container {
+  height: 100vh;       /* Fixed to viewport height */
+  overflow: hidden;    /* Prevents document scrolling */
+}
+.content {
+  overflow-y: auto;    /* Internal scrolling container */
+}
+```
+
+This pattern (e.g., TailwindCSS `h-screen overflow-hidden`) creates a scrollable container **inside** a fixed-height viewport. Playwright's `fullPage: true` captures the document height, but when the document is constrained to viewport height with internal scrolling, it only captures what's visible.
+
+**Solution**: Enhanced the snapshot function to:
+1. Detect and temporarily remove `overflow: hidden` (not just `auto`/`scroll`)
+2. Detect and remove `height: 100vh` constraints
+3. Remove `maxHeight` constraints that limit container expansion
+4. Explicitly handle `html` and `body` element styles
+5. Wait for layout to stabilize (300ms) before capturing
+6. Restore all original styles after capture
+
+**Files Modified**:
+- `src/snapshot.ts` - Enhanced full-page capture logic
+
+**Testing**: Run visual tests to verify full-page screenshots are now captured correctly.
+
+---
+
 **Last Updated**: January 10, 2026
 **Status**: 🎉 PUBLISHED TO NPM ✅ - Publicly available
-**NPM Package**: @testivai/witness-playwright@0.1.2
+**NPM Package**: @testivai/witness-playwright@0.1.5
 **Core Features**: Evidence capture, batch upload, and performance monitoring fully functional
 **Configuration**: ✅ COMPLETE - End-to-end flow working
 **Performance Metrics**: ✅ COMPLETE - Basic timing + optional Lighthouse
+**Full-Page Screenshots**: ✅ FIXED - Handles SPA fixed viewport layouts
 **API Key Format**: tstvai-{secure-random-string}
 **Known Issues**: Minor UX improvements (retry logic, progress reporting)
 **Blocker**: None - All critical features implemented

package/src/snapshot.ts

@@ -56,39 +56,107 @@ export async function snapshot(
   // 1. Capture full-page screenshot
   const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
   
-  // Temporarily disable overflow constraints to enable full-page capture
+  // 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 = [];
-    document.querySelectorAll('*').forEach((el) => {
-      const computed = window.getComputedStyle(el);
-      if (computed.overflow === 'auto' || computed.overflow === 'scroll' || 
-          computed.overflowY === 'auto' || computed.overflowY === 'scroll') {
+    
+    // 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');
+      
+      if (hasOverflowConstraint || hasHeightConstraint) {
         window.__testivaiOriginalStyles.push({
           element: el,
           overflow: el.style.overflow,
-          height: el.style.height
+          overflowY: el.style.overflowY,
+          height: el.style.height,
+          maxHeight: el.style.maxHeight,
+          minHeight: el.style.minHeight
         });
+        
+        // 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';
+        }
+        
+        // Remove overflow constraints
         el.style.overflow = 'visible';
-        el.style.height = 'auto';
+        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
+      }
+    };
+    
+    html.style.overflow = 'visible';
+    html.style.height = 'auto';
+    body.style.overflow = 'visible';
+    body.style.height = 'auto';
   `);
   
-  // Wait for layout to stabilize
-  await page.waitForTimeout(200);
+  // 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((item) => {
+      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;
     }
+    
+    // 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;
+    }
   `);
 
   // 2. Dump full-page DOM