From 7f49aeabd7d35fc534c596798bb30ae73e2900f9 Mon Sep 17 00:00:00 2001
From: Pinank Solanki <pinanks@lambdatest.com>
Date: Wed, 24 Apr 2024 20:16:08 +0530
Subject: [PATCH 1/3] Changes in dom serializer and resources capture

* Add poster as a resource in for video elements and remove src
* Add timeout in networkidle as some websites keeps making network requests
at intervals less than 500ms
---
 src/dom/dom-serializer.js  | 49 ++++++++++++++++++++------------------
 src/lib/processSnapshot.ts | 33 ++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/dom/dom-serializer.js b/src/dom/dom-serializer.js
index c0bbe0f..5eec6cf 100644
--- a/src/dom/dom-serializer.js
+++ b/src/dom/dom-serializer.js
@@ -332,32 +332,35 @@
       for (let video of dom.querySelectorAll('video')) {
         let videoId = video.getAttribute('data-smartui-element-id');
         let cloneEl = clone.querySelector(`[data-smartui-element-id="${videoId}"]`);
-        // if the video already has a poster image, no work for us to do
-        if (video.getAttribute('poster')) {
-          cloneEl.removeAttribute('src');
-          continue;
-        }
-        let canvas = document.createElement('canvas');
-        let width = canvas.width = video.videoWidth;
-        let height = canvas.height = video.videoHeight;
-        let dataUrl;
-        canvas.getContext('2d').drawImage(video, 0, 0, width, height);
-        try {
-          dataUrl = canvas.toDataURL();
-        } catch (e) {
-          warnings.add(`data-smartui-element-id="${videoId}" : ${e.toString()}`);
-        }
 
-        // if the canvas produces a blank image, skip
-        if (!dataUrl || dataUrl === 'data:,') continue;
+        // remove video sources
+        cloneEl.removeAttribute('src');
+        const sourceEls = cloneEl.querySelectorAll('source');
+        if (sourceEls.length) sourceEls.forEach((sourceEl) => sourceEl.remove());
+        
+        // if the video doesn't have a poster image
+        if (!video.getAttribute('poster')) {
+          let canvas = document.createElement('canvas');
+          let width = canvas.width = video.videoWidth;
+          let height = canvas.height = video.videoHeight;
+          let dataUrl;
+          canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+          try {
+            dataUrl = canvas.toDataURL();
+          } catch (e) {
+            warnings.add(`data-smartui-element-id="${videoId}" : ${e.toString()}`);
+          }
 
-        // create a resource from the serialized data url
-        // let resource = resourceFromDataURL(videoId, dataUrl);
-        // resources.add(resource);
+          // if the canvas produces a blank image, skip
+          if (!dataUrl || dataUrl === 'data:,') continue;
 
-        // use a data attribute to avoid making a real request
-        cloneEl.removeAttribute('src');
-        cloneEl.setAttribute('poster', dataUrl);
+          // create a resource from the serialized data url
+          let resource = resourceFromDataURL(videoId, dataUrl);
+          resources.add(resource);
+
+          // set poster attribute to resource url to avoid making a real request
+          cloneEl.setAttribute('poster', resource.url);
+        }
       }
     }
 
diff --git a/src/lib/processSnapshot.ts b/src/lib/processSnapshot.ts
index 12d323a..7a198ca 100644
--- a/src/lib/processSnapshot.ts
+++ b/src/lib/processSnapshot.ts
@@ -23,6 +23,12 @@ export default async (snapshot: Snapshot, ctx: Context): Promise<Record<string,
         const requestHostname = new URL(requestUrl).hostname;
 
         try {
+            // abort audio/video media requests
+            if (request.resourceType() === 'media' && /\.(mp3|mp4|wav|ogg|webm)$/i.test(request.url())) {
+                throw new Error('resource type mp3/mp4/wav/ogg/webm');
+            }
+
+            // handle discovery config
             ctx.config.allowedHostnames.push(new URL(snapshot.url).hostname);
             if (ctx.config.enableJavaScript) ALLOWED_RESOURCES.push('script');
 
@@ -118,15 +124,26 @@ export default async (snapshot: Snapshot, ctx: Context): Promise<Record<string,
     for (const { viewport, viewportString, fullPage } of renderViewports) {
         await page.setViewportSize({ width: viewport.width, height: viewport.height ||  MIN_VIEWPORT_HEIGHT });
         ctx.log.debug(`Page resized to ${viewport.width}x${viewport.height ||  MIN_VIEWPORT_HEIGHT}`);
+        
+        // navigate to snapshot url once
         if (!navigated) {
-            await page.goto(snapshot.url);
+            // domcontentloaded event is more reliable than load event
+            await page.goto(snapshot.url, { waitUntil: "domcontentloaded"});
+            // adding extra timeout since domcontentloaded event is fired pretty quickly
+            await new Promise(r => setTimeout(r, 1250));
+            if (ctx.config.waitForTimeout) await page.waitForTimeout(ctx.config.waitForTimeout);
             navigated = true;
             ctx.log.debug(`Navigated to ${snapshot.url}`);
         }
         if (fullPage) await page.evaluate(scrollToBottomAndBackToTop);
-        await page.waitForLoadState('networkidle');
-        ctx.log.debug('Network idle 500ms');
 
+        try {
+            await page.waitForLoadState('networkidle', { timeout: 5000 });
+            ctx.log.debug('Network idle 500ms');
+        } catch (error) {
+            ctx.log.debug(`Network idle failed due to ${error}`);
+        }
+        
         // snapshot options
         if (processedOptions.element) {
             let l = await page.locator(processedOptions.element).all()
@@ -162,6 +179,16 @@ export default async (snapshot: Snapshot, ctx: Context): Promise<Record<string,
     await page.close();
     await context.close();
 
+    // add dom resources to cache
+    if (snapshot.dom.resources.length) {
+        for (let resource of snapshot.dom.resources) {
+            cache[resource.url] = {
+                body: resource.content,
+                type: resource.mimetype
+            }
+        }	
+    }
+
     return {
         processedSnapshot: {
             name: snapshot.name,

From a21373efb601dcd148cdae3236e0d15ac74aab5c Mon Sep 17 00:00:00 2001
From: Pinank Solanki <pinanks@lambdatest.com>
Date: Fri, 26 Apr 2024 19:43:21 +0530
Subject: [PATCH 2/3] 3.0.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5579bc6..8805c34 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lambdatest/smartui-cli",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",
   "files": [
     "dist/**/*"

From 7dc22f0b37177f12b02054997029295af27d46af Mon Sep 17 00:00:00 2001
From: Pinank Solanki <pinanks@lambdatest.com>
Date: Fri, 26 Apr 2024 21:46:37 +0530
Subject: [PATCH 3/3] Remove type check for audio/video media requests

---
 src/lib/processSnapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/processSnapshot.ts b/src/lib/processSnapshot.ts
index 7a198ca..4d79ad5 100644
--- a/src/lib/processSnapshot.ts
+++ b/src/lib/processSnapshot.ts
@@ -24,7 +24,7 @@ export default async (snapshot: Snapshot, ctx: Context): Promise<Record<string,
 
         try {
             // abort audio/video media requests
-            if (request.resourceType() === 'media' && /\.(mp3|mp4|wav|ogg|webm)$/i.test(request.url())) {
+            if (/\.(mp3|mp4|wav|ogg|webm)$/i.test(request.url())) {
                 throw new Error('resource type mp3/mp4/wav/ogg/webm');
             }