@dev-blinq/cucumber_client 1.0.1237-dev → 1.0.1237-stage

package/bin/assets/scripts/snapshot_capturer.js

@@ -0,0 +1,155 @@
+class SnapshotCapturer {
+    constructor(options = {}) {
+        const {
+            inlineImages = true,
+            inlineStyles = true,
+            excludeSelectors = []
+        } = options;
+        // this.options = {
+        //     inlineImages,
+        //     inlineStyles,
+        //     excludeSelectors
+        // };
+        this.inlineImages = inlineImages;
+        this.inlineStyles = inlineStyles;
+        this.excludeSelectors = excludeSelectors;
+    }
+    imageToDataURL(img, document) {
+        try {
+            // Create canvas to draw the image
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth || img.width;
+            canvas.height = img.naturalHeight || img.height;
+            const ctx = canvas.getContext('2d');
+
+            // Draw image to canvas and convert to data URL
+            ctx.drawImage(img, 0, 0);
+            return canvas.toDataURL('image/png');
+        } catch (error) {
+            console.warn(`Failed to inline image: ${img.src}`, error);
+            return img.src; // Fall back to original source
+        }
+    }
+    processStyles(document) {
+        if (!this.inlineStyles) return;
+
+        const stylesheets = Array.from(document.styleSheets);
+        for (const sheet of stylesheets) {
+            try {
+                if (!sheet.href) continue; // Skip inline styles
+                const styleEl = document.createElement('style');
+                let text = ""
+                const cssRules = Array.from(sheet.cssRules || []);
+                for (const rule of cssRules) {
+                    if (rule.cssText) {
+                        text += rule.cssText + '\n';
+                    }
+                }
+                styleEl.textContent = text;
+
+                // Replace the link with our new style element
+                if (sheet.ownerNode && sheet.ownerNode.parentNode) {
+                    sheet.ownerNode.parentNode.replaceChild(styleEl, sheet.ownerNode);
+                } else if (sheet.ownerNode) {
+                    // If the owner node is not in the document, just append it
+                    document.head.appendChild(styleEl);
+                }
+
+            } catch (error) {
+                console.warn(`Error processing stylesheet: ${sheet.href}`, error);
+            }
+        }
+    }
+    processImages(document) {
+        if (!this.inlineImages) return;
+
+        const images = document.querySelectorAll('img');
+        images.forEach(img => {
+            // Skip SVGs and already data URLs
+            if (img.src.startsWith('data:') || img.src.endsWith('.svg')) return;
+
+            // Skip if the image is excluded
+            if (this.excludeSelectors.some(selector => img.matches(selector))) return;
+
+            // Only inline complete images
+            if (img.complete && img.naturalWidth !== 0) {
+                try {
+                    img.setAttribute('src', this.imageToDataURL(img, document));
+                } catch (e) {
+                    console.warn(`Failed to process image: ${img.src}`, e);
+                }
+            }
+        });
+    }
+    removeExcludedElements(document) {
+        this.excludeSelectors.forEach(selector => {
+            const elements = document.querySelectorAll(selector);
+            elements.forEach(el => {
+                el.parentNode?.removeChild(el);
+            });
+        });
+    }
+    processComputedStyles(document) {
+        const elements = document.querySelectorAll('*');
+
+        elements.forEach(el => {
+            // Skip excluded elements
+            if (this.excludeSelectors.some(selector => el.matches(selector))) return;
+
+            // Get computed style
+            const style = window.getComputedStyle(el);
+
+            // Copy important styles to inline style
+            const importantStyles = [
+                'display', 'position', 'width', 'height', 'margin', 'padding',
+                'color', 'background-color', 'font-family', 'font-size',
+                'text-align', 'line-height', 'border', 'box-shadow', 'opacity'
+                // Add more styles as needed
+            ];
+
+            const inlineStyles = [];
+
+            importantStyles.forEach(prop => {
+                const value = style.getPropertyValue(prop);
+                if (value) {
+                    inlineStyles.push(`${prop}: ${value}`);
+                }
+            });
+
+            // Set inline style
+            if (inlineStyles.length > 0) {
+                const currentStyle = el.getAttribute('style') || '';
+                el.setAttribute('style', currentStyle + inlineStyles.join('; ') + ';');
+            }
+        });
+
+    }
+    createSnapshot() {
+        // Clone the document to avoid modifying the original
+        const docClone = window.document.cloneNode(true);
+
+        // Store the original document
+        const originalDoc = window.document;
+
+        // Temporarily "swap" the document for processing
+        // (We're just using this as a convention - it doesn't actually replace the global document)
+        const doc = docClone;
+
+        // Process the clone
+        this.processStyles(doc);
+        this.processImages(doc);
+        this.removeExcludedElements(doc);
+        this.processComputedStyles(doc);
+
+        // Generate HTML with doctype
+        const doctype = originalDoc.doctype ?
+            new XMLSerializer().serializeToString(originalDoc.doctype) : '<!DOCTYPE html>';
+
+        // Get the HTML content
+        const htmlContent = doc.documentElement.outerHTML;
+
+        // Combine doctype and HTML content
+        return `${doctype}${htmlContent}`;
+    }
+}
+export default SnapshotCapturer;