Create in report support for webm video in the report output (#369)

A small PR to add video attachment support (webm) similar to the way image (png) is supported. This is change is primarily to support Playwright's video functionality. See documentation: https://playwright.dev/docs/videos Co-authored-by: MarcTaipala <[email protected]>
WasiqB · Sep 7, 2024 · 732ba1e · 732ba1e
1 parent 2c391d3
commit 732ba1e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/lib/generate-report.js b/lib/generate-report.js
@@ -445,6 +445,14 @@ function generateReport(options) {
               'data:image/png;base64,' + embedding.data,
             ]);
             step.embeddings[embeddingIndex] = {};
+          } else if (
+            embedding.mime_type === 'video/webm' ||
+            (embedding.media && embedding.media.type === 'video/webm')
+          ) {
+            step.video = (step.video ? step.video : []).concat([
+              'data:video/webm;base64,' + embedding.data,
+            ]);
+            step.embeddings[embeddingIndex] = {};
           } else {
             let embeddingType = 'text/plain';
             if (embedding.mime_type) {
@@ -479,6 +487,7 @@ function generateReport(options) {
         (step.hidden &&
           !step.text &&
           !step.image &&
+          !step.video &&
           _.size(step.attachments) === 0 &&
           step.result.status !== RESULT_STATUS.failed)
       ) {

diff --git a/templates/components/scenarios.tmpl b/templates/components/scenarios.tmpl
@@ -74,7 +74,7 @@
             <div class="x_content" style="display: none;">
                 <div class="scenario-step-container"><%= scenario.description %></div>
                     <% _.each(scenario.steps, function(step, stepIndex) { %>
-                        <% if(!step.hidden || step.image || step.text || step.html || step.attachment) { %>
+                        <% if(!step.hidden || step.image || step.video || step.text || step.html || step.attachment) { %>
                             <div class="scenario-step-container">
 
                                 <% if(step.result) { %>
@@ -156,7 +156,7 @@
                                     <% if (step.json) { %>
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-json" data-toggle="collapse">+ Show Info</a>
                                     <% } %>
-                                    
+
                                     <% if (step.text) { %>
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-text" data-toggle="collapse">+ Show Info</a>
                                     <% } %>
@@ -169,6 +169,10 @@
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-image" data-toggle="collapse">+ Screenshot</a>
                                     <% } %>
 
+                                    <% if (step.video) { %>
+                                        <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-video" data-toggle="collapse">+ Video</a>
+                                    <% } %>
+
                                     <% if (!_.isEmpty(step.attachments)) { %>
                                         <span>[</span>
                                             <% _.each(step.attachments, function(attachment, attachmentIndex) { %>
@@ -215,6 +219,16 @@
                                 </div>
                             <% } %>
 
+                            <% if (step.video) { %>
+                                <div id="info<%= scenarioIndex %>-<%= stepIndex %>-video" class="scenario-step-collapse collapse">
+                                    <% for( var i = 0; i < step.video.length; i++ ) { %>
+                                        <video class="videoCapture" controls>
+                                            <source type="video/webm" src="<%= step.video[i] %>"/>
+                                        </video>
+                                    <% } %>
+                                </div>
+                            <% } %>
+
                             <% if (!_.isEmpty(step.attachments)) { %>
                                 <% _.each(step.attachments, function(attachment, attachmentIndex) { %>
                                     <div id="info<%= scenarioIndex %>-<%= stepIndex %>-attachment<%= attachmentIndex %>" class="scenario-step-collapse collapse">

diff --git a/templates/style.css b/templates/style.css
@@ -381,6 +381,13 @@ ul.quick-list li i {
     max-width: 100%;
 }
 
+.videoCapture{
+    width: 50%;
+    height: 50%;
+    max-height: 100%;
+    max-width: 100%;
+}
+
 /* Features / Scenarios */
 ul.panel_toolbox li .step {
     border-radius: 50%;