@skyramp/skyramp 1.3.10 → 1.3.11

package/src/classes/SmartPlaywright.js

@@ -1,8 +1,10 @@
+/* global window */
 const { expect: playwrightExpect } = require('@playwright/test');
 const lib = require('../lib');
 const koffi = require('koffi');
 const fs = require('fs');
 const path = require('path');
+const { PDF_VIEWER_INJECTION_SCRIPT } = require('../pdfViewer');
 
 const responseType = koffi.struct({
   response: 'char*',
@@ -740,6 +742,14 @@ class SkyrampPlaywrightPage {
 
         this._page = page;
         this._testInfo = testInfo; // Store testInfo for screenshot auto-baseline
+
+        // Setup PDF viewer injection (store promise to await before navigation)
+        this._pdfSetupPromise = this._setupPdfInjection().catch(err => {
+            debug('[SmartPlaywright] PDF setup failed:', err);
+            // Return resolved promise to allow test to continue even if setup fails
+            return Promise.resolve();
+        });
+
         return new Proxy(this, {
             // The `get` trap is the key to forwarding.
             // This will foraward any methods not implemented in this struct
@@ -768,6 +778,280 @@ class SkyrampPlaywrightPage {
         return this._page;
     }
 
+    /**
+     * Sets up PDF viewer injection for this page and all future popups
+     * Called automatically from constructor
+     */
+    async _setupPdfInjection() {
+        try {
+            // Check if PDF injection is already set up for this context (prevent duplicate setup)
+            const context = this._page.context();
+            if (context.__pw_pdfInjectionSetup) {
+                debug('[SmartPlaywright] PDF injection already set up for this context, skipping');
+                return;
+            }
+
+            debug('[SmartPlaywright] Setting up PDF viewer injection...');
+
+            // 1. Add init script at CONTEXT level (applies to ALL pages including popups)
+            await context.addInitScript(PDF_VIEWER_INJECTION_SCRIPT);
+
+            // 2. Set up route interception for PDFs at CONTEXT level
+            // This ensures it applies to all pages (including popups) immediately
+            await context.route('**/*', async (route) => {
+                const url = route.request().url();
+                const resourceType = route.request().resourceType();
+
+                // Check if this is a PDF URL (must contain .pdf in the URL)
+                const isPdfUrl = url.toLowerCase().includes('.pdf');
+
+                // Debug logging
+                if (isPdfUrl) {
+                    debug(`[SmartPlaywright] PDF URL detected: ${url.substring(0, 100)}`);
+                    debug(`[SmartPlaywright] Resource type: ${resourceType}`);
+                }
+
+                if (!isPdfUrl) {
+                    // Not a PDF, continue normally
+                    await route.continue();
+                    return;
+                }
+
+                // Handle PDF document navigation (direct navigation to PDF URL)
+                if (resourceType === 'document') {
+                    debug('[SmartPlaywright] Intercepting PDF navigation:', url);
+
+                    try {
+                        // Fetch the PDF via Playwright's context (bypasses CORS)
+                        const response = await this._page.context().request.fetch(url);
+                        const pdfBuffer = await response.body();
+                        const base64Pdf = pdfBuffer.toString('base64');
+                        const dataUrl = `data:application/pdf;base64,${base64Pdf}`;
+
+                        // Extract filename from URL
+                        let filename = 'Document.pdf';
+                        try {
+                            const urlObj = new URL(url);
+                            const pathname = urlObj.pathname;
+                            const lastSlash = pathname.lastIndexOf('/');
+                            if (lastSlash !== -1) {
+                                filename = pathname.substring(lastSlash + 1);
+                                filename = decodeURIComponent(filename);
+                            }
+                        } catch (e) {
+                            // Use default filename
+                        }
+
+                        // Create HTML page with PDF.js viewer
+                        const html = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>${filename}</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div id="pw-pdf-viewer-container"></div>
+    <script>
+        // Wait for init script to load PdfJsViewer class, then render PDF directly
+        (function checkAndRender() {
+            // Check if PdfJsViewer class is available (from init script)
+            if (typeof PdfJsViewer !== 'undefined') {
+                console.log('[PW-PDF] Init script loaded, rendering PDF...');
+
+                const container = document.getElementById('pw-pdf-viewer-container');
+                container.setAttribute('data-pw-pdf-viewer', 'true');
+                container.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #525252;';
+
+                // Create PDF.js viewer instance and render
+                const viewer = new PdfJsViewer(container);
+                viewer.renderPdf({
+                    pdfDataUrl: '${dataUrl}',
+                    filename: '${filename}',
+                    onReady: () => {
+                        console.log('[PW-PDF] ✅ PDF rendered successfully');
+                    },
+                    onError: (error) => {
+                        console.error('[PW-PDF] ❌ Failed to render PDF:', error);
+                    }
+                });
+            } else {
+                // PdfJsViewer not loaded yet, wait and retry
+                setTimeout(checkAndRender, 50);
+            }
+        })();
+    </script>
+</body>
+</html>`;
+
+                        await route.fulfill({
+                            status: 200,
+                            headers: { 'Content-Type': 'text/html' },
+                            body: html
+                        });
+                    } catch (error) {
+                        debug('[SmartPlaywright] PDF navigation interception failed:', error.message);
+                        await route.abort('failed');
+                    }
+                    return;
+                }
+
+                // Handle PDF fetch/XHR requests (for embedded PDFs or downloads)
+                if (resourceType === 'fetch' || resourceType === 'xhr') {
+                    debug('[SmartPlaywright] Intercepting PDF fetch:', url);
+
+                    try {
+                        // Fetch via Playwright's context (bypasses CORS)
+                        const response = await this._page.context().request.fetch(url);
+                        const buffer = await response.body();
+
+                        // Store the PDF URL and data for potential blob URL handling
+                        await this._page.evaluate((pdfUrl) => {
+                            window.__pw_lastPdfUrl = pdfUrl;
+                        }, url).catch(() => {});
+
+                        await route.fulfill({
+                            status: 200,
+                            headers: { 'Content-Type': 'application/pdf' },
+                            body: buffer
+                        });
+                    } catch (error) {
+                        debug('[SmartPlaywright] PDF fetch failed:', error.message);
+                        await route.abort('failed');
+                    }
+                    return;
+                }
+
+                // Intercept blob: URLs (likely created after PDF fetch)
+                if (url.startsWith('blob:') && resourceType === 'document') {
+                    debug('[SmartPlaywright] Intercepting blob URL navigation (likely PDF)');
+
+                    // Get the last PDF URL that was fetched
+                    const lastPdfUrl = await this._page.evaluate(() => window.__pw_lastPdfUrl).catch(() => null);
+
+                    if (lastPdfUrl) {
+                        debug('[SmartPlaywright] Blob URL is for PDF, redirecting to HTML viewer');
+
+                        try {
+                            // Fetch the original PDF
+                            const response = await this._page.context().request.fetch(lastPdfUrl);
+                            const pdfBuffer = await response.body();
+                            const base64Pdf = pdfBuffer.toString('base64');
+                            const dataUrl = `data:application/pdf;base64,${base64Pdf}`;
+
+                            let filename = 'Document.pdf';
+                            try {
+                                const urlObj = new URL(lastPdfUrl);
+                                const pathname = urlObj.pathname;
+                                const lastSlash = pathname.lastIndexOf('/');
+                                if (lastSlash !== -1) {
+                                    filename = pathname.substring(lastSlash + 1);
+                                    filename = decodeURIComponent(filename);
+                                }
+                            } catch (e) {
+                                // Use default
+                            }
+
+                            const html = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>${filename}</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div id="pw-pdf-viewer-container"></div>
+    <script>
+        // Wait for init script to load PdfJsViewer class, then render PDF directly
+        (function checkAndRender() {
+            // Check if PdfJsViewer class is available (from init script)
+            if (typeof PdfJsViewer !== 'undefined') {
+                console.log('[PW-PDF] [BLOB] Init script loaded, rendering PDF...');
+
+                const container = document.getElementById('pw-pdf-viewer-container');
+                container.setAttribute('data-pw-pdf-viewer', 'true');
+                container.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #525252;';
+
+                // Create PDF.js viewer instance and render
+                const viewer = new PdfJsViewer(container);
+                viewer.renderPdf({
+                    pdfDataUrl: '${dataUrl}',
+                    filename: '${filename}',
+                    onReady: () => {
+                        console.log('[PW-PDF] [BLOB] ✅ PDF rendered successfully');
+                    },
+                    onError: (error) => {
+                        console.error('[PW-PDF] [BLOB] ❌ Failed to render PDF:', error);
+                    }
+                });
+            } else {
+                // PdfJsViewer not loaded yet, wait and retry
+                setTimeout(checkAndRender, 50);
+            }
+        })();
+    </script>
+</body>
+</html>`;
+
+                            await route.fulfill({
+                                status: 200,
+                                headers: { 'Content-Type': 'text/html' },
+                                body: html
+                            });
+                        } catch (error) {
+                            debug('[SmartPlaywright] Blob URL interception failed:', error.message);
+                            await route.continue();
+                        }
+                        return;
+                    }
+                }
+
+                // Other PDF resource types, continue normally
+                await route.continue();
+            });
+
+            // 3. Set up window.open() interception on the parent page
+            await this._page.evaluate(() => {
+                if (window.__pw_setupPdfPopupInterception) {
+                    window.__pw_setupPdfPopupInterception();
+                }
+            }).catch((err) => {
+                // Ignore errors if page is navigating - init script will handle it
+                debug('[SmartPlaywright] window.open() interception setup skipped (page navigating):', err.message);
+            });
+
+            // 4. Handle future popups (for debugging only)
+            // Note: Context-level routing and init scripts automatically apply to popups
+            this._page.on('popup', async () => {
+                debug('[SmartPlaywright] Popup detected - context-level routing will handle PDF interception');
+            });
+
+            // Mark context as having PDF injection set up (prevents duplicate setup)
+            context.__pw_pdfInjectionSetup = true;
+
+            debug('[SmartPlaywright] ✅ PDF viewer injection setup complete');
+        } catch (error) {
+            debug('[SmartPlaywright] ❌ PDF setup error:', error);
+            throw error;
+        }
+    }
+
     pushLocator(locator) {
         if (this.locators == undefined ) {
             this.locators = [];
@@ -853,6 +1137,11 @@ class SkyrampPlaywrightPage {
     }
 
     async goto(url, options) {
+        // Ensure PDF setup is complete before navigating
+        if (this._pdfSetupPromise) {
+            await this._pdfSetupPromise;
+        }
+
         const transformedUrl = transformUrlForDocker(url);
         const result = await this._page.goto(transformedUrl, options);
         const content = await this._page.content();
@@ -863,6 +1152,21 @@ class SkyrampPlaywrightPage {
         } else {
             debug(`javascript not detected when visiting ${this._page.url()}`);
         }
+
+        // If navigated directly to a PDF URL, trigger PDF viewer injection
+        if (url.toLowerCase().includes('.pdf')) {
+            try {
+                await this._page.evaluate(async () => {
+                    if (window.__pw_detectAndReplacePdfs) {
+                        await window.__pw_detectAndReplacePdfs();
+                    }
+                });
+                debug('[SmartPlaywright] PDF viewer injected for direct navigation');
+            } catch (error) {
+                debug('[SmartPlaywright] PDF injection skipped:', error.message);
+            }
+        }
+
         return result;
     }
 
@@ -947,6 +1251,28 @@ class SkyrampPageAssertions {
             return await this._playwrightExpectation.toHaveScreenshot(nameOrOptions, options);
         }
 
+        // Clip coordinates are document-relative (viewport coords + scrollX/Y at record time).
+        // Scroll to bring the clip into view at a fixed margin below the viewport top, then
+        // convert to viewport-relative coords for page.screenshot.
+        let adjustedOptions = options;
+        if (options && options.clip && typeof this._actualObject.evaluate === 'function') {
+            const clip = options.clip;
+            // TOP_MARGIN keeps the clip below any fixed headers (e.g. PDF toolbar = 56px).
+            const TOP_MARGIN = 100;
+            const scrolled = await this._actualObject.evaluate(({ y, margin }) => {
+                window.scrollTo(0, Math.max(0, y - margin));
+                return { x: window.scrollX || window.pageXOffset || 0, y: window.scrollY || window.pageYOffset || 0 };
+            }, { y: clip.y, margin: TOP_MARGIN });
+            adjustedOptions = {
+                ...options,
+                clip: {
+                    ...clip,
+                    x: clip.x - scrolled.x,
+                    y: clip.y - scrolled.y,
+                },
+            };
+        }
+
         // Use Playwright's official API to get snapshot path
         // playwright.config.js
         //export default {
@@ -970,14 +1296,14 @@ class SkyrampPageAssertions {
                 animations: 'disabled',
                 caret: 'hide',
                 scale: 'css',
-                ...options,
+                ...adjustedOptions,
                 path: snapshotPath  // Always use our computed path
             });
             debug(`Generated baseline: ${snapshotPath}`);
         }
 
         // Baseline exists (or just created): assert normally
-        return await this._playwrightExpectation.toHaveScreenshot(nameOrOptions, options);
+        return await this._playwrightExpectation.toHaveScreenshot(nameOrOptions, adjustedOptions);
     }
 }
 

package/src/pdfViewer/bundle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Skyramp Corporation.
+ *
+ * Bundled PDF.js viewer for execution-time injection
+ */
+
+/**
+ * Self-contained PDF viewer injection script
+ * This script will be injected into pages during test execution to replace Chrome's PDF plugin with PDF.js
+ */
+export declare const PDF_VIEWER_INJECTION_SCRIPT: string;