Merge pull request #72 from LambdaTest/stage

Release 3.0.4

Author: riteshcgk

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/**/*"

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);
+        }
       }
     }
 

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 (/\.(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,