pw trace attachment

allure-generator/src/main/javascript/blocks/attachment-row/attachment-row.hbs

@@ -1,6 +1,8 @@
 <div>
-    <div class="attachment-row" data-uid="{{uid}}">
-        <span class="attachment-row__arrow block__arrow">{{angle}}</span>
+    <div class="attachment-row" data-uid="{{uid}}" data-type="{{type}}">
+        {{#unless (eq type "application/vnd.allure.playwright-trace")}}
+            <span class="attachment-row__arrow block__arrow">{{angle}}</span>
+        {{/unless}}
         <div class="attachment-row__icon">
             <span class="{{fileicon type}}" data-tooltip="{{type}}"></span>
         </div>

allure-generator/src/main/javascript/components/attachment/AttachmentView.hbs

@@ -48,6 +48,15 @@
             </p>
         {{/each}}
     </div>
+{{else if (eq type "playwright-trace")}}
+    <div class="{{b 'attachment__trace-container' fullscreen=fullScreen}}">
+        <iframe
+            id="pw-trace-iframe"
+            width="100%"
+            height="100%"
+            src="https://trace.playwright.dev/next/"
+        ></iframe>
+    </div>
 {{else if (eq type "html")}}
         <iframe class="{{b 'attachment__iframe' fullscreen=fullScreen}}" frameborder="0" src="{{sourceUrl}}"></iframe>
 {{else}}

allure-generator/src/main/javascript/components/attachment/AttachmentView.js

@@ -23,7 +23,7 @@ class AttachmentView extends View {
   }
 
   onRender() {
-    if (!this.sourceUrl) {
+    if (!this.sourceUrl && this.attachmentInfo.type !== "playwright-trace") {
       reportDataUrl(`data/attachments/${this.attachment.source}`, this.attachment.type)
         .then((sourceUrl) => {
           this.sourceUrl = sourceUrl;
@@ -35,6 +35,29 @@ class AttachmentView extends View {
         })
         .then(this.render);
     }
+    if (this.attachmentInfo.type === "playwright-trace" && !this.content) {
+          reportDataUrl(`data/attachments/${this.attachment.source}`, this.attachment.type)
+              .then((url) => fetch(url))
+              .then((res) => res.blob())
+              .then((blob) => {
+                  this.content = blob;
+                  this.sourceUrl = URL.createObjectURL(blob);
+              })
+            .then(this.render);
+          return
+    }
+
+      if (this.attachmentInfo.type === "playwright-trace" && this.content instanceof Blob) {
+          const iframe = document.getElementById("pw-trace-iframe");
+          if (iframe && this.content instanceof Blob) {
+              iframe.onload = () => {
+                  iframe.contentWindow?.postMessage(
+                      {method: "load", params: {trace: this.content}},
+                      "https://trace.playwright.dev/next"
+                  );
+              };
+          }
+      }
 
     if (this.attachmentInfo.type === "custom") {
       this.showChildView(

allure-generator/src/main/javascript/components/attachment/styles.scss

@@ -70,4 +70,8 @@
       height: 85vh;
     }
   }
+  &__trace-container {
+    overflow: hidden;
+    height: calc(100vh - 96px); //48px header, 48px footer space
+  }
 }

allure-generator/src/main/javascript/components/testresult-execution/TestResultExecutionView.js

@@ -53,6 +53,9 @@ class TestResultExecutionView extends View {
 
   @on("click .attachment-row")
   onAttachmentClick(e) {
+    if (e.currentTarget.attributes["data-type"].nodeValue=== "application/vnd.allure.playwright-trace") {
+        return
+    }
     const attachmentUid = $(e.currentTarget).data("uid");
     const name = `attachment__${attachmentUid}`;
 

allure-generator/src/main/javascript/utils/attachmentType.js

@@ -92,6 +92,11 @@ export default function typeByMime(type) {
         type: "archive",
         icon: "fa fa-file-archive-o",
       };
+    case "application/vnd.allure.playwright-trace":
+      return {
+        type: "playwright-trace",
+        icon: "fa fa-file-code-o",
+      };
     default:
       return {
         type: null,