odhin-reports-playwright 1.1.8 → 1.2.2

package/README.md

@@ -18,10 +18,31 @@
 </div>
 </div>
 
+## Report layout
+
+The reporter generates one self-contained report by default:
+
+```ts
+reporter: [["odhin-reports-playwright", {
+	singleFile: true,
+	embedAssets: true,
+	embedAttachments: true,
+}]]
+```
+
+Set `singleFile: false` to keep each test detail, screenshot, video, and trace in `tests/<test-id>/`. In this mode, `embedAssets` and `embedAttachments` are always disabled and the report can be opened directly from disk.
+
+```ts
+reporter: [["odhin-reports-playwright", {
+	singleFile: false,
+}]]
+```
+
 &nbsp;
 &nbsp;
 &nbsp;
 
+
 ### [Full documentation](https://odhin-reports.gitlab.io/playwright/#/v1/)
 
 &nbsp;

package/lib/generate.js

@@ -19,7 +19,7 @@ class Generate {
         this.TEST_FOLDER = "tests";
         this.THEME = "light";
         this.INDEX_FILE = "index.html";
-        this.CURRENT_VERSION = "1.1.8";
+        this.CURRENT_VERSION = "1.2.2";
         this.execOptions = execOptions;
         this.totalDuration = 0;
         this.help = new help_1.default(this.execOptions);
@@ -54,14 +54,22 @@ class Generate {
             this.execOptions.project !== undefined ? this.execOptions.project : "";
         this.execOptions.release =
             this.execOptions.release !== undefined ? this.execOptions.release : "";
+        this.execOptions.singleFile =
+            this.execOptions.singleFile !== undefined
+                ? this.execOptions.singleFile
+                : true;
         this.execOptions.embedAssets =
-            this.execOptions.embedAssets !== undefined
+            this.execOptions.singleFile && this.execOptions.embedAssets !== undefined
                 ? this.execOptions.embedAssets
                 : true;
         this.execOptions.embedAttachments =
-            this.execOptions.embedAttachments !== undefined
+            this.execOptions.singleFile && this.execOptions.embedAttachments !== undefined
                 ? this.execOptions.embedAttachments
                 : true;
+        if (this.execOptions.singleFile === false) {
+            this.execOptions.embedAssets = false;
+            this.execOptions.embedAttachments = false;
+        }
         this.execOptions.outputFolder =
             this.execOptions.outputFolder !== undefined
                 ? this.execOptions.outputFolder
@@ -742,6 +750,12 @@ class Generate {
             let testCaseId = testCase.testCase.id + "-" + testCase.result.retry;
             let testCaseHtml = this.testCaseTemplate;
             testCaseHtml = testCaseHtml.replaceAll("{{.ModalID}}", testCaseId);
+            testCaseHtml = testCaseHtml.replaceAll("{{.TestDetailsAttributes}}", this.execOptions.singleFile
+                ? `data-bs-toggle="modal" data-bs-target="#${testCaseId}"`
+                : `data-modal-id="${testCaseId}" data-test-details-url="tests/${encodeURIComponent(testCaseId)}/details.js"`);
+            testCaseHtml = testCaseHtml.replaceAll("{{.TestDetailsAction}}", this.execOptions.singleFile
+                ? "showHideScroll('hide')"
+                : "showTestDetails(this)");
             if (showRetries) {
                 testCaseHtml = testCaseHtml.replaceAll("{{.Retry}}", '<td class="{{.TDClassesCss}}">' +
                     (testCase.result.retry > 0
@@ -956,7 +970,18 @@ class Generate {
                 testCaseDetailsHtml = testCaseDetailsHtml.replaceAll("{{.StderrTabButton}}", "");
                 testCaseDetailsHtml = testCaseDetailsHtml.replaceAll("{{.Stderr}}", "");
             }
-            testCasesDetails += testCaseDetailsHtml;
+            if (this.execOptions.singleFile) {
+                testCasesDetails += testCaseDetailsHtml;
+            }
+            else {
+                const externalTestDetails = testCaseDetailsHtml
+                    .replaceAll(`screenshots/${testCaseId}/`, `tests/${encodeURIComponent(testCaseId)}/screenshots/`)
+                    .replaceAll(`videos/${testCaseId}/`, `tests/${encodeURIComponent(testCaseId)}/videos/`)
+                    .replaceAll(`traces/${testCaseId}/`, `tests/${encodeURIComponent(testCaseId)}/traces/`);
+                const externalTestDetailsScript = "window.odhinTestDetails = window.odhinTestDetails || {};" +
+                    `window.odhinTestDetails[${JSON.stringify(testCaseId)}] = ${JSON.stringify(externalTestDetails)};`;
+                this.help.createFile(path_1.default.join(this.execOptions.outputFolder, "tests", encodeURIComponent(testCaseId), "details.js"), externalTestDetailsScript);
+            }
         });
         this.content = this.content.replace("{{.TestCases}}", testCases);
         this.content = this.content.replaceAll("{{.TestCasesDetails}}", testCasesDetails);

package/lib/help.js

@@ -474,6 +474,14 @@ class Help {
         return output;
     }
     base64ToFile(base64data, filePath, index) {
+        if (this.execOptions.singleFile === false) {
+            const relativePath = path_1.default.relative(this.execOptions.outputFolder, filePath);
+            const [attachmentType, testId, ...filenameParts] = relativePath.split(path_1.default.sep);
+            if (["screenshots", "videos", "traces"].includes(attachmentType) &&
+                testId !== undefined) {
+                filePath = path_1.default.join(this.execOptions.outputFolder, "tests", encodeURIComponent(testId), attachmentType, ...filenameParts);
+            }
+        }
         if (fs_1.default.existsSync(filePath)) {
             let newIndex = index !== undefined && index > 0 ? index + 1 : 1;
             let filename = filePath.split("/").pop();

package/lib/html/assets/js/script.js

@@ -58,4 +58,34 @@ function openMainTab(evt, tabName) {
   }
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.className += " active";
+}
+
+function showTestDetails(row) {
+  const modalId = row.dataset.modalId;
+  const modal = document.getElementById(modalId);
+
+  if (modal) {
+    openTestDetailsModal(modal);
+    return;
+  }
+
+  const script = document.createElement("script");
+  script.src = row.dataset.testDetailsUrl;
+  script.onload = function () {
+    const details = window.odhinTestDetails && window.odhinTestDetails[modalId];
+    if (!details) {
+      return;
+    }
+    document.getElementById("test-case-details").insertAdjacentHTML("beforeend", details);
+    openTestDetailsModal(document.getElementById(modalId));
+  };
+  document.head.appendChild(script);
+}
+
+function openTestDetailsModal(modal) {
+  if (!modal) {
+    return;
+  }
+  showHideScroll("hide");
+  bootstrap.Modal.getOrCreateInstance(modal).show();
 }

package/lib/html/assets/js/script.min.js

@@ -1 +1 @@
-function showHideScroll(e){let t=document.getElementById("body-content");"show"===e?t.classList.contains("hide-scroll")&&t.classList.remove("hide-scroll"):"hide"===e&&(t.classList.contains("hide-scroll")||t.classList.add("hide-scroll"))}function hideLoader(){document.getElementById("loading").style.visibility="visibility",document.getElementById("loading").style.opacity="0",document.getElementById("loading").style.transition="all .3s linear",document.getElementById("loading").style.zIndex="0",setTimeout(function(){document.getElementById("loading").style.display="none"},1800)}function openResultTab(e,t,n){for(var l,a=document.getElementsByClassName("result-tabcontent-"+n),s=0;s<a.length;s++)a[s].style.display="none";for(l=document.getElementsByClassName("result-tablinks-"+n),s=0;s<l.length;s++)l[s].className=l[s].className.replace(" active","");document.getElementById(t).style.display="block",e.currentTarget.className+=" active"}function openMainTab(e,t){for(var n,l=document.getElementsByClassName("main-tabcontent"),a=0;a<l.length;a++)l[a].style.display="none";for(n=document.getElementsByClassName("main-tablinks"),a=0;a<n.length;a++)n[a].className=n[a].className.replace(" active","");document.getElementById(t).style.display="block",e.currentTarget.className+=" active"}window.addEventListener?window.addEventListener("load",hideLoader):window.attachEvent?window.attachEvent("onload",hideLoader):window.onload=hideLoader;
+function showHideScroll(e){let t=document.getElementById("body-content");"show"===e?t.classList.contains("hide-scroll")&&t.classList.remove("hide-scroll"):"hide"===e&&(t.classList.contains("hide-scroll")||t.classList.add("hide-scroll"))}function hideLoader(){document.getElementById("loading").style.visibility="visibility",document.getElementById("loading").style.opacity="0",document.getElementById("loading").style.transition="all .3s linear",document.getElementById("loading").style.zIndex="0",setTimeout(function(){document.getElementById("loading").style.display="none"},1800)}function openResultTab(e,t,n){for(var l,a=document.getElementsByClassName("result-tabcontent-"+n),s=0;s<a.length;s++)a[s].style.display="none";for(l=document.getElementsByClassName("result-tablinks-"+n),s=0;s<l.length;s++)l[s].className=l[s].className.replace(" active","");document.getElementById(t).style.display="block",e.currentTarget.className+=" active"}function openMainTab(e,t){for(var n,l=document.getElementsByClassName("main-tabcontent"),a=0;a<l.length;a++)l[a].style.display="none";for(n=document.getElementsByClassName("main-tablinks"),a=0;a<n.length;a++)n[a].className=n[a].className.replace(" active","");document.getElementById(t).style.display="block",e.currentTarget.className+=" active"}function showTestDetails(e){const t=e.dataset.modalId,n=document.getElementById(t);if(n)return void openTestDetailsModal(n);const l=document.createElement("script");l.src=e.dataset.testDetailsUrl,l.onload=function(){const n=window.odhinTestDetails&&window.odhinTestDetails[t];n&&(document.getElementById("test-case-details").insertAdjacentHTML("beforeend",n),openTestDetailsModal(document.getElementById(t)))},document.head.appendChild(l)}function openTestDetailsModal(e){e&&(showHideScroll("hide"),bootstrap.Modal.getOrCreateInstance(e).show())}window.addEventListener?window.addEventListener("load",hideLoader):window.attachEvent?window.attachEvent("onload",hideLoader):window.onload=hideLoader;

package/lib/html/content.html

@@ -28,5 +28,5 @@
             </tfoot>
         </table>
     </div>
-    {{.TestCasesDetails}}
+    <div id="test-case-details">{{.TestCasesDetails}}</div>
 </div>

package/lib/html/testCase.html

@@ -1,7 +1,6 @@
 <tr class="test-row-result row-{{.TRClassesCss}} {{.TRClassesCss}}"
-data-bs-toggle="modal"
-data-bs-target="#{{.ModalID}}"
-onclick="showHideScroll('hide')"
+{{.TestDetailsAttributes}}
+onclick="{{.TestDetailsAction}}"
 >
 	<td class="{{.TDClassesCss}}">{{.Title}}</td>
 	<td class="text-capitalize {{.TDClassesCss}}">{{.Status}}</td>

package/lib/types/execOptions.types.d.ts

@@ -4,6 +4,7 @@ export interface ExecOptions {
     testEnvironment: string;
     project: string;
     release: string;
+    singleFile: boolean;
     embedAssets: boolean;
     embedAttachments: boolean;
     outputFolder: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "odhin-reports-playwright",
-  "version": "1.1.8",
+  "version": "1.2.2",
   "description": "Odhin Reports for Playwright",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -32,7 +32,8 @@
   },
   "homepage": "https://gitlab.com/odhin-reports/playwright/-/blob/main/README.md?ref_type=heads",
   "devDependencies": {
-    "@playwright/test": "^1.49.0"
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^26.2.0"
   },
   "dependencies": {
     "ansi-to-html": "^0.7.2",