@testivai/witness-playwright 0.1.6 → 0.1.8

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.
@@ -79,105 +83,196 @@ 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 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');
+    // 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;
       
-      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;
-    }
-    
-    // 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;
+        // 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);
+            }
+            // 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/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.6",
+  "version": "0.1.8",
   "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';
 
@@ -56,108 +57,223 @@ export async function snapshot(
   // 1. Capture full-page screenshot
   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 = [];
+  // 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');
+    }
     
-    // Process all elements to find and fix viewport-constraining styles
-    document.querySelectorAll('*').forEach(function(el) {
-      var computed = window.getComputedStyle(el);
+    try {
+      // Create a CDP session
+      const client = await page.context().newCDPSession(page);
       
-      // Check for overflow constraints
-      var hasOverflowConstraint = 
-        computed.overflow === 'auto' || 
-        computed.overflow === 'scroll' || 
-        computed.overflow === 'hidden' ||
-        computed.overflowY === 'auto' || 
-        computed.overflowY === 'scroll' ||
-        computed.overflowY === 'hidden';
+      // Enable Page domain
+      await client.send('Page.enable');
       
-      // 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 layout metrics to determine full page size
+      const layoutMetrics = await client.send('Page.getLayoutMetrics');
       
-      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
+      // 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
         });
-        
-        // 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.overflowY = 'visible';
-        el.style.maxHeight = 'none';
       }
-    });
+      
+      // 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');
+    }
     
-    // Also handle html and body elements specifically
-    var html = document.documentElement;
-    var body = document.body;
+    // Get viewport dimensions
+    const viewport = page.viewportSize();
+    const viewportWidth = viewport?.width || 1280;
+    const viewportHeight = viewport?.height || 720;
     
-    window.__testivaiRootStyles = {
-      html: {
-        overflow: html.style.overflow,
-        height: html.style.height
-      },
-      body: {
-        overflow: body.style.overflow,
-        height: body.style.height
+    // Find the main scrollable container and get its dimensions
+    const scrollableInfo = await page.evaluate(`
+    (function() {
+      var mainScrollable = null;
+      var maxScrollHeight = 0;
+      
+      // 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'
+        );
+        
+        if (isScrollable && el.scrollHeight > el.clientHeight) {
+          if (el.scrollHeight > maxScrollHeight) {
+            maxScrollHeight = el.scrollHeight;
+            mainScrollable = el;
+          }
+        }
+      });
+      
+      // 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
+      };
+    })()
+  `) as { 
+    hasScrollable: boolean; 
+    scrollableId: string | null; 
+    scrollHeight: number; 
+    clientHeight: number;
+    scrollTop: number;
+  };
   
-  // Wait for layout to stabilize after style changes
-  await page.waitForTimeout(300);
+  // Calculate number of screenshots needed
+  const totalHeight = scrollableInfo.scrollHeight;
+  const captureHeight = scrollableInfo.clientHeight;
+  const numCaptures = Math.ceil(totalHeight / captureHeight);
   
-  // Take full-page screenshot
-  await page.screenshot({ path: screenshotPath, fullPage: true });
+  // 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 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;
+  // 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[] = [];
+    
+    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);
     }
     
-    // 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;
+    // 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 = sharp({
+      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`);

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;
 }
 
 /**