@applitools/eyes-playwright 1.41.0 → 1.41.1

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## [1.41.1](https://github.com/Applitools-Dev/sdk/compare/js/eyes-playwright@1.41.0...js/eyes-playwright@1.41.1) (2025-11-09)
+
+
+### Bug Fixes
+
+* resolve html-report iframe flickering in dark mode ([#3324](https://github.com/Applitools-Dev/sdk/issues/3324)) ([3d31a90](https://github.com/Applitools-Dev/sdk/commit/3d31a90838148e93f84e7cf24ec1da25bb247140))
+
+
+### Dependencies
+
+* @applitools/utils bumped to 1.13.0
+  #### Features
+
+  * restart cache and keepalive | FLD-3773 ([#3326](https://github.com/Applitools-Dev/sdk/issues/3326)) ([0fd12ca](https://github.com/Applitools-Dev/sdk/commit/0fd12ca703b4546560b563076a38f9ada24acc75))
+* @applitools/dom-snapshot bumped to 4.15.0
+  #### Features
+
+  * add support for adopted stylesheets with nesting | FLD-3212 ([#3325](https://github.com/Applitools-Dev/sdk/issues/3325)) ([8587926](https://github.com/Applitools-Dev/sdk/commit/8587926b0d6ef820cfbd8f89ddb062a3d77f65ab))
+
+
+
+* @applitools/dom-capture bumped to 11.6.6
+  #### Performance Improvements
+
+  * remove dynamic loading of Dom capture and Dom snapshot ([#3322](https://github.com/Applitools-Dev/sdk/issues/3322)) ([7d15ee9](https://github.com/Applitools-Dev/sdk/commit/7d15ee98d5d39c7e478b6bfe3e14b8eea93937e5))
+
+
+
+* @applitools/socket bumped to 1.3.6
+
+* @applitools/req bumped to 1.8.5
+
+* @applitools/spec-driver-webdriver bumped to 1.5.1
+
+* @applitools/spec-driver-playwright bumped to 1.7.7
+
+* @applitools/spec-driver-puppeteer bumped to 1.6.7
+
+* @applitools/nml-client bumped to 1.11.10
+
+* @applitools/ufg-client bumped to 1.18.1
+
+* @applitools/core-base bumped to 1.29.0
+  #### Features
+
+  * restart cache and keepalive | FLD-3773 ([#3326](https://github.com/Applitools-Dev/sdk/issues/3326)) ([0fd12ca](https://github.com/Applitools-Dev/sdk/commit/0fd12ca703b4546560b563076a38f9ada24acc75))
+
+
+
+* @applitools/core bumped to 4.52.0
+  #### Features
+
+  * restart cache and keepalive | FLD-3773 ([#3326](https://github.com/Applitools-Dev/sdk/issues/3326)) ([0fd12ca](https://github.com/Applitools-Dev/sdk/commit/0fd12ca703b4546560b563076a38f9ada24acc75))
+
+
+  #### Performance Improvements
+
+  * remove dynamic loading of Dom capture and Dom snapshot ([#3322](https://github.com/Applitools-Dev/sdk/issues/3322)) ([7d15ee9](https://github.com/Applitools-Dev/sdk/commit/7d15ee98d5d39c7e478b6bfe3e14b8eea93937e5))
+
+
+
+* @applitools/logger bumped to 2.2.5
+
+* @applitools/image bumped to 1.2.4
+
+* @applitools/driver bumped to 1.24.1
+
+* @applitools/spec-driver-selenium bumped to 1.7.7
+
+* @applitools/screenshoter bumped to 3.12.8
+
+* @applitools/tunnel-client bumped to 1.11.3
+
+* @applitools/ec-client bumped to 1.12.12
+
+* @applitools/eyes bumped to 1.36.15
+
+* @applitools/test-server bumped to 1.3.4
+
+
 ## [1.41.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-playwright@1.40.7...js/eyes-playwright@1.41.0) (2025-11-03)
 
 

package/dist/fixture/report-plugin/ui/mockIframeRenderer.js

@@ -4,36 +4,170 @@
  *
  * This module provides functionality to create mock iframe elements that simulate
  * the Eyes test result viewer without actually loading the full iframe. This is
- * useful for testing and development purposes.
+ * useful for testing and development purposes, including testing visual appearance
+ * during CSS loading phases.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMockIframe = void 0;
+/**
+ * CSS content that will be loaded after a 1-second delay
+ * This simulates the delayed loading behavior to test visual appearance during loading
+ */
+const MOCK_CSS = `
+  body {
+    margin: 0;
+    padding: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    transition: all 0.3s ease;
+  }
+
+  .mock-container {
+    max-width: 600px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    padding: 30px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  }
+
+  h3 {
+    margin: 0 0 20px 0;
+    font-size: 24px;
+    font-weight: 600;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+    padding-bottom: 10px;
+  }
+
+  .info-item {
+    margin-bottom: 12px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    animation: slideIn 0.3s ease forwards;
+    opacity: 0;
+  }
+
+  .info-item:nth-child(1) { animation-delay: 0.1s; }
+  .info-item:nth-child(2) { animation-delay: 0.2s; }
+  .info-item:nth-child(3) { animation-delay: 0.3s; }
+  .info-item:nth-child(4) { animation-delay: 0.4s; }
+  .info-item:nth-child(5) { animation-delay: 0.5s; }
+  .info-item:nth-child(6) { animation-delay: 0.6s; }
+  .info-item:nth-child(7) { animation-delay: 0.7s; }
+
+  @keyframes slideIn {
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  strong {
+    opacity: 0.9;
+    font-weight: 600;
+  }
+
+  .link-container {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  a {
+    text-decoration: none;
+    padding: 10px 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    display: inline-block;
+    transition: all 0.2s ease;
+  }
+
+  a:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+  }
+`;
 /**
  * Creates a mock iframe element displaying Eyes test result information
+ * Uses the srcdoc attribute for inline HTML content and delays CSS loading
+ * to test visual appearance during loading phases
+ *
  * @param result - The Eyes test result to display
- * @returns HTML element representing a mock iframe
+ * @returns HTMLIFrameElement with mock content
  */
 function createMockIframe(result) {
-    const mockIframe = document.createElement('div');
-    mockIframe.classList.add('eyes-session-result', 'eyes-mock-iframe');
-    mockIframe.setAttribute('value', result.id);
-    mockIframe.innerHTML = `
-    <div style="padding: 20px; border: 2px solid #ddd; background: #f5f5f5; font-family: monospace;">
-      <h3 style="margin: 0 0 10px 0; color: #333;">Mock Eyes Iframe</h3>
-      <div style="margin-bottom: 8px;"><strong>Session ID:</strong> ${result.id}</div>
-      <div style="margin-bottom: 8px;"><strong>Status:</strong> ${result.status}</div>
-      <div style="margin-bottom: 8px;"><strong>Browser:</strong> ${result.hostApp}</div>
-      <div style="margin-bottom: 8px;"><strong>Viewport:</strong> ${result.hostDisplaySize.width}x${result.hostDisplaySize.height}</div>
-      <div style="margin-bottom: 8px;"><strong>Steps:</strong> ${result.steps}</div>
-      <div style="margin-bottom: 8px;"><strong>Is New:</strong> ${result.isNew}</div>
-      <div style="margin-bottom: 8px;"><strong>Has Differences:</strong> ${result.isDifferent}</div>
-      <div style="margin-top: 15px;">
-        <a href="${result.appUrls.session}" target="_blank" style="color: #0066cc;">
-          View in Eyes Dashboard →
-        </a>
-      </div>
-    </div>
+    const iframe = document.createElement('iframe');
+    iframe.classList.add('eyes-session-result', 'eyes-mock-iframe');
+    iframe.setAttribute('value', result.id);
+    iframe.style.visibility = 'hidden';
+    iframe.style.opacity = '0';
+    // Initial HTML content without styling (to show unstyled phase)
+    const htmlContent = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+         <meta name="color-scheme" content="light dark">
+        <meta charset="UTF-8">
+        <style id="loading-style">
+          body {
+            margin: 0;
+            padding: 20px;
+            font-family: monospace;
+          }
+          .loading-indicator {
+            font-size: 14px;
+            margin-bottom: 10px;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="loading-indicator">Loading styles...</div>
+        <div class="mock-container">
+          <h3>Mock Eyes Iframe</h3>
+          <div class="info-item"><strong>Session ID:</strong> ${result.id}</div>
+          <div class="info-item"><strong>Status:</strong> ${result.status}</div>
+          <div class="info-item"><strong>Browser:</strong> ${result.hostApp}</div>
+          <div class="info-item"><strong>Viewport:</strong> ${result.hostDisplaySize.width}x${result.hostDisplaySize.height}</div>
+          <div class="info-item"><strong>Steps:</strong> ${result.steps}</div>
+          <div class="info-item"><strong>Is New:</strong> ${result.isNew}</div>
+          <div class="info-item"><strong>Has Differences:</strong> ${result.isDifferent}</div>
+          <div class="link-container">
+            <a href="${result.appUrls.session}" target="_blank">
+              View in Eyes Dashboard →
+            </a>
+          </div>
+        </div>
+        <script>
+          // Simulate CSS loading after 1 second
+          setTimeout(function() {
+            // Remove loading indicator
+            const loadingIndicator = document.querySelector('.loading-indicator');
+            if (loadingIndicator) {
+              loadingIndicator.remove();
+            }
+
+            // Remove initial loading styles
+            const loadingStyle = document.getElementById('loading-style');
+            if (loadingStyle) {
+              loadingStyle.remove();
+            }
+
+            // Add the main styles
+            const styleElement = document.createElement('style');
+            styleElement.textContent = ${JSON.stringify(MOCK_CSS)};
+            document.head.appendChild(styleElement);
+          }, 500);
+        </script>
+      </body>
+    </html>
   `;
-    return mockIframe;
+    iframe.srcdoc = htmlContent;
+    iframe.onload = () => {
+        // Show iframe after load with a smooth transition
+        iframe.style.visibility = 'visible';
+        iframe.style.opacity = '1';
+    };
+    // Show iframe after it's loaded with a smooth transition
+    return iframe;
 }
 exports.createMockIframe = createMockIframe;

package/dist/fixture/report-plugin/ui/testDetailUI.js

@@ -192,11 +192,15 @@ class TestDetailUI {
         const iframe = document.createElement('iframe');
         iframe.classList.add('eyes-session-result');
         iframe.setAttribute('value', result.id);
+        iframe.style.visibility = 'hidden';
+        iframe.style.opacity = '0';
         const url = (0, urlManager_js_1.fixEyesUrl)(result.eyesServer.eyesServerUrl);
         iframe.onload = () => {
             const iframeUrl = `${url}app/html-report/index.html`;
             iframe.contentWindow.postMessage({ call: 'sendValue', value: result }, iframeUrl);
             iframe.classList.add('ready');
+            iframe.style.visibility = 'visible';
+            iframe.style.opacity = '1';
             window.addEventListener('message', async (event) => {
                 if (event.origin !== url && `${event.origin}/` !== url)
                     return;