@arghajit/dummy 0.1.0-beta-24 → 0.1.0-beta-26

package/scripts/generate-report.mjs

@@ -1019,6 +1019,260 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
     </div>
   `;
 }
+function generateWorkerDistributionChart(results) {
+  if (!results || results.length === 0) {
+    return '<div class="no-data">No test results data available to display worker distribution.</div>';
+  }
+
+  // 1. Sort results by startTime to ensure chronological order
+  const sortedResults = [...results].sort((a, b) => {
+    const timeA = a.startTime ? new Date(a.startTime).getTime() : 0;
+    const timeB = b.startTime ? new Date(b.startTime).getTime() : 0;
+    return timeA - timeB;
+  });
+
+  const workerData = sortedResults.reduce((acc, test) => {
+    const workerId =
+      typeof test.workerId !== "undefined" ? test.workerId : "N/A";
+    if (!acc[workerId]) {
+      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
+    }
+
+    const status = String(test.status).toLowerCase();
+    if (status === "passed" || status === "failed" || status === "skipped") {
+      acc[workerId][status]++;
+    }
+
+    const testTitleParts = test.name.split(" > ");
+    const testTitle =
+      testTitleParts[testTitleParts.length - 1] || "Unnamed Test";
+    // Store both name and status for each test
+    acc[workerId].tests.push({ name: testTitle, status: status });
+
+    return acc;
+  }, {});
+
+  const workerIds = Object.keys(workerData).sort((a, b) => {
+    if (a === "N/A") return 1;
+    if (b === "N/A") return -1;
+    return parseInt(a, 10) - parseInt(b, 10);
+  });
+
+  if (workerIds.length === 0) {
+    return '<div class="no-data">Could not determine worker distribution from test data.</div>';
+  }
+
+  const chartId = `workerDistChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderWorkerDistChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
+  const modalJsNamespace = `modal_funcs_${chartId.replace(/-/g, "_")}`;
+
+  // The categories now just need the name for the axis labels
+  const categories = workerIds.map((id) => `Worker ${id}`);
+
+  // We pass the full data separately to the script
+  const fullWorkerData = workerIds.map((id) => ({
+    id: id,
+    name: `Worker ${id}`,
+    tests: workerData[id].tests,
+  }));
+
+  const passedData = workerIds.map((id) => workerData[id].passed);
+  const failedData = workerIds.map((id) => workerData[id].failed);
+  const skippedData = workerIds.map((id) => workerData[id].skipped);
+
+  const categoriesString = JSON.stringify(categories);
+  const fullDataString = JSON.stringify(fullWorkerData);
+  const seriesString = JSON.stringify([
+    { name: "Passed", data: passedData, color: "var(--success-color)" },
+    { name: "Failed", data: failedData, color: "var(--danger-color)" },
+    { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
+  ]);
+
+  // The HTML now includes the chart container, the modal, and styles for the modal
+  return `
+    <style>
+      .worker-modal-overlay {
+        position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
+        overflow: auto; background-color: rgba(0,0,0,0.6);
+        display: none; align-items: center; justify-content: center;
+      }
+      .worker-modal-content {
+        background-color: #3d4043;
+        color: var(--card-background-color);
+        margin: auto; padding: 20px; border: 1px solid var(--border-color, #888);
+        width: 80%; max-width: 700px; border-radius: 8px;
+        position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+      }
+      .worker-modal-close {
+        position: absolute; top: 10px; right: 20px;
+        font-size: 28px; font-weight: bold; cursor: pointer;
+        line-height: 1;
+      }
+      .worker-modal-close:hover, .worker-modal-close:focus {
+        color: var(--text-color, #000);
+      }
+      #worker-modal-body-${chartId} ul {
+        list-style-type: none; padding-left: 0; margin-top: 15px; max-height: 45vh; overflow-y: auto;
+      }
+       #worker-modal-body-${chartId} li {
+         padding: 8px 5px; border-bottom: 1px solid var(--border-color, #eee);
+         font-size: 0.9em;
+      }
+       #worker-modal-body-${chartId} li:last-child {
+         border-bottom: none;
+      }
+       #worker-modal-body-${chartId} li > span {
+         display: inline-block;
+         width: 70px;
+         font-weight: bold;
+         text-align: right;
+         margin-right: 10px;
+      }
+    </style>
+
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}" style="min-height: 350px;">
+      <div class="no-data">Loading Worker Distribution Chart...</div>
+    </div>
+
+    <div id="worker-modal-${chartId}" class="worker-modal-overlay">
+      <div class="worker-modal-content">
+        <span class="worker-modal-close">×</span>
+        <h3 id="worker-modal-title-${chartId}" style="text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.25em; font-weight: 600; color: #fff"></h3>
+        <div id="worker-modal-body-${chartId}"></div>
+      </div>
+    </div>
+
+    <script>
+      // Namespace for modal functions to avoid global scope pollution
+      window.${modalJsNamespace} = {};
+
+      window.${renderFunctionName} = function() {
+        const chartContainer = document.getElementById('${chartId}');
+        if (!chartContainer) { console.error("Chart container ${chartId} not found."); return; }
+
+        // --- Modal Setup ---
+        const modal = document.getElementById('worker-modal-${chartId}');
+        const modalTitle = document.getElementById('worker-modal-title-${chartId}');
+        const modalBody = document.getElementById('worker-modal-body-${chartId}');
+        const closeModalBtn = modal.querySelector('.worker-modal-close');
+
+        window.${modalJsNamespace}.open = function(worker) {
+          if (!worker) return;
+          modalTitle.textContent = 'Test Details for ' + worker.name;
+
+          let testListHtml = '<ul>';
+          if (worker.tests && worker.tests.length > 0) {
+            worker.tests.forEach(test => {
+                let color = 'inherit';
+                if (test.status === 'passed') color = 'var(--success-color)';
+                else if (test.status === 'failed') color = 'var(--danger-color)';
+                else if (test.status === 'skipped') color = 'var(--warning-color)';
+
+                const escapedName = test.name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                testListHtml += \`<li style="color: \${color};"><span style="color: \${color}">[\${test.status.toUpperCase()}]</span> \${escapedName}</li>\`;
+            });
+          } else {
+            testListHtml += '<li>No detailed test data available for this worker.</li>';
+          }
+          testListHtml += '</ul>';
+
+          modalBody.innerHTML = testListHtml;
+          modal.style.display = 'flex';
+        };
+
+        const closeModal = function() {
+          modal.style.display = 'none';
+        };
+
+        closeModalBtn.onclick = closeModal;
+        modal.onclick = function(event) {
+          // Close if clicked on the dark overlay background
+          if (event.target == modal) {
+            closeModal();
+          }
+        };
+
+
+        // --- Highcharts Setup ---
+        if (typeof Highcharts !== 'undefined') {
+          try {
+            chartContainer.innerHTML = '';
+            const fullData = ${fullDataString};
+
+            const chartOptions = {
+              chart: { type: 'bar', height: 350, backgroundColor: 'transparent' },
+              title: { text: null },
+              xAxis: {
+                categories: ${categoriesString},
+                title: { text: 'Worker ID' },
+                labels: { style: { color: 'var(--text-color-secondary)' }}
+              },
+              yAxis: {
+                min: 0,
+                title: { text: 'Number of Tests' },
+                labels: { style: { color: 'var(--text-color-secondary)' }},
+                stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'var(--text-color)' } }
+              },
+              legend: { reversed: true, itemStyle: { fontSize: "12px", color: 'var(--text-color)' } },
+              plotOptions: {
+                series: {
+                  stacking: 'normal',
+                  cursor: 'pointer',
+                  point: {
+                    events: {
+                      click: function () {
+                        // 'this.x' is the index of the category
+                        const workerData = fullData[this.x];
+                        window.${modalJsNamespace}.open(workerData);
+                      }
+                    }
+                  }
+                }
+              },
+              tooltip: {
+                shared: true,
+                headerFormat: '<b>{point.key}</b> (Click for details)<br/>',
+                pointFormat: '<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
+                footerFormat: 'Total: <b>{point.total}</b>'
+              },
+              series: ${seriesString},
+              credits: { enabled: false }
+            };
+            Highcharts.chart('${chartId}', chartOptions);
+          } catch (e) {
+            console.error("Error rendering chart ${chartId}:", e);
+            chartContainer.innerHTML = '<div class="no-data">Error rendering worker distribution chart.</div>';
+          }
+        } else {
+          chartContainer.innerHTML = '<div class="no-data">Charting library not available for worker distribution.</div>';
+        }
+      };
+    </script>
+  `;
+}
+const infoTooltip = `
+  <span class="info-tooltip" style="display: inline-block; margin-left: 8px;">
+    <span class="info-icon" 
+          style="cursor: pointer; font-size: 1.25rem;"
+          onclick="window.workerInfoPrompt()">ℹ️</span>
+  </span>
+  <script>
+    window.workerInfoPrompt = function() {
+      const message = 'Why is worker -1 special?\\n\\n' +
+                     'Playwright assigns skipped tests to worker -1 because:\\n' +
+                     '1. They don\\'t require browser execution\\n' +
+                     '2. This keeps real workers focused on actual tests\\n' +
+                     '3. Maintains clean reporting\\n\\n' +
+                     'This is an intentional optimization by Playwright.';
+      alert(message);
+    }
+  </script>
+`;
 function generateTestHistoryContent(trendData) {
   if (
     !trendData ||
@@ -1267,11 +1521,16 @@ function generateSuitesWidget(suitesData) {
 </div>`;
 }
 function getAttachmentIcon(contentType) {
-  if (contentType.includes("pdf")) return "📄";
-  if (contentType.includes("json")) return "{ }";
-  if (contentType.includes("html") || contentType.includes("xml")) return "</>";
-  if (contentType.includes("csv")) return "📊";
-  if (contentType.startsWith("text/")) return "📝";
+  if (!contentType) return "📎"; // Handle undefined/null
+
+  const normalizedType = contentType.toLowerCase();
+
+  if (normalizedType.includes("pdf")) return "📄";
+  if (normalizedType.includes("json")) return "{ }";
+  if (/html/.test(normalizedType)) return "🌐"; // Fixed: regex for any HTML type
+  if (normalizedType.includes("xml")) return "<>";
+  if (normalizedType.includes("csv")) return "📊";
+  if (normalizedType.startsWith("text/")) return "📝";
   return "📎";
 }
 function generateHTML(reportData, trendData = null) {
@@ -1329,14 +1588,14 @@ function generateHTML(reportData, trendData = null) {
             <div class="step-details" style="display: none;">
               ${
                 step.codeLocation
-                  ? `<div class="step-info"><strong>Location:</strong> ${sanitizeHTML(
+                  ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
                       step.codeLocation
                     )}</div>`
                   : ""
               }
               ${
                 step.errorMessage
-                  ? `<div class="step-error">
+                  ? `<div class="test-error-summary">
                       ${
                         step.stackTrace
                           ? `<div class="stack-trace">${formatPlaywrightError(
@@ -1443,13 +1702,21 @@ function generateHTML(reportData, trendData = null) {
           }
           <h4>Steps</h4>
           <div class="steps-list">${generateStepsHTML(test.steps)}</div>
-          ${
-            test.stdout && test.stdout.length > 0
-              ? `<div class="console-output-section"><h4>Console Output (stdout)</h4><pre class="console-log stdout-log" style="background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
-                  test.stdout.map((line) => sanitizeHTML(line)).join("\n")
-                )}</pre></div>`
-              : ""
-          }
+          ${(() => {
+            if (!test.stdout || test.stdout.length === 0) return "";
+            // Create a unique ID for the <pre> element to target it for copying
+            const logId = `stdout-log-${test.id || testIndex}`;
+            return `<div class="console-output-section">
+                          <h4>Console Output (stdout)
+                          <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</button>
+                          </h4>
+                          <div class="log-wrapper">
+                              <pre id="${logId}" class="console-log stdout-log" style="background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
+              test.stdout.map((line) => sanitizeHTML(line)).join("\n")
+            )}</pre>
+                          </div>
+                      </div>`;
+          })()}
           ${
             test.stderr && test.stderr.length > 0
               ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
@@ -1571,6 +1838,9 @@ function generateHTML(reportData, trendData = null) {
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
+                        <a href="${sanitizeHTML(
+                          attachment.path
+                        )}" target="_blank" class="view-full">View</a>
                             <a href="${sanitizeHTML(
                               attachment.path
                             )}" target="_blank" download="${sanitizeHTML(
@@ -1605,8 +1875,8 @@ function generateHTML(reportData, trendData = null) {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
-    <link rel="apple-touch-icon" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
+    <link rel="icon" type="image/png" href="https://i.postimg.cc/v817w4sg/logo.png">
+    <link rel="apple-touch-icon" href="https://i.postimg.cc/v817w4sg/logo.png">
     <script src="https://code.highcharts.com/highcharts.js" defer></script>
     <title>Playwright Pulse Report</title>
     <style>
@@ -1630,7 +1900,7 @@ function generateHTML(reportData, trendData = null) {
         .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
         .header-title { display: flex; align-items: center; gap: 15px; }
         .header h1 { margin: 0; font-size: 1.85em; font-weight: 600; color: var(--primary-color); }
-        #report-logo { height: 40px; width: 40px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
+        #report-logo { height: 40px; width: 55px; }
         .run-info { font-size: 0.9em; text-align: right; color: var(--text-color-secondary); line-height:1.5;}
         .run-info strong { color: var(--text-color); }
         .tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 30px; overflow-x: auto; }
@@ -1709,8 +1979,8 @@ function generateHTML(reportData, trendData = null) {
         .step-duration { color: var(--dark-gray-color); font-size: 0.9em; }
         .step-details { display: none; padding: 14px; margin-top: 8px; background: #fdfdfd; border-radius: 6px; font-size: 0.95em; border: 1px solid var(--light-gray-color); }
         .step-info { margin-bottom: 8px; }
-        .step-error { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(244,67,54,0.05); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
-        .step-error pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
+        .test-error-summary { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(244,67,54,0.05); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
+        .test-error-summary pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
         .step-hook { background-color: rgba(33,150,243,0.04); border-left: 3px solid var(--info-color) !important; } 
         .step-hook .step-title { font-style: italic; color: var(--info-color)}
         .nested-steps { margin-top: 12px; }
@@ -1767,17 +2037,18 @@ function generateHTML(reportData, trendData = null) {
         .download-trace:hover { background: #cbd5e0; }
         .filters button.clear-filters-btn { background-color: var(--medium-gray-color); color: var(--text-color); }
         .filters button.clear-filters-btn:hover { background-color: var(--dark-gray-color); color: #fff; }
+        .copy-btn {color: var(--primary-color); background: #fefefe; border-radius: 8px; cursor: pointer; border-color: var(--primary-color); font-size: 1em; margin-left: 93%; font-weight: 600;}
         @media (max-width: 1200px) { .trend-charts-row { grid-template-columns: 1fr; } }
         @media (max-width: 992px) { .dashboard-bottom-row { grid-template-columns: 1fr; } .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; } .filters input { min-width: 180px; } .filters select { min-width: 150px; } }
         @media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} }
-        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 35px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
+        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 50px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="header">
             <div class="header-title">
-                <img id="report-logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMNCA3bDggNSA4LTUtOC01eiIgZmlsbD0iIzNmNTFiNSIvPjxwYXRoIGQ9Ik0xMiA2TDQgMTFsOCA1IDgtNS04LTV6IiBmaWxsPSIjNDI4NWY0Ii8+PHBhdGggZD0iTTEyIDEwbC04IDUgOCA1IDgtNS04LTV6IiBmaWxsPSIjM2Q1NWI0Ii8+PC9zdmc+" alt="Report Logo">
+                <img id="report-logo" src="https://i.postimg.cc/v817w4sg/logo.png" alt="Report Logo">
                 <h1>Playwright Pulse Report</h1>
             </div>
             <div class="run-info"><strong>Run Date:</strong> ${formatDate(
@@ -1870,6 +2141,12 @@ function generateHTML(reportData, trendData = null) {
               }
             </div>
           </div>
+          <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
+          <div class="trend-charts-row">
+             <div class="trend-chart">
+                ${generateWorkerDistributionChart(results)}
+             </div>
+          </div>
           <h2 class="tab-main-title">Individual Test History</h2>
           ${
             trendData &&
@@ -1884,7 +2161,6 @@ function generateHTML(reportData, trendData = null) {
         </div>
         <footer style="padding: 0.5rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); text-align: center; font-family: 'Segoe UI', system-ui, sans-serif;">
             <div style="display: inline-flex; align-items: center; gap: 0.5rem; color: #333; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;">
-                <img width="48" height="48" src="https://img.icons8.com/emoji/48/index-pointing-at-the-viewer-light-skin-tone-emoji.png" alt="index-pointing-at-the-viewer-light-skin-tone-emoji"/>
                 <span>Created by</span>
                 <a href="https://github.com/Arghajit47" target="_blank" rel="noopener noreferrer" style="color: #7737BF; font-weight: 700; font-style: italic; text-decoration: none; transition: all 0.2s ease;" onmouseover="this.style.color='#BF5C37'" onmouseout="this.style.color='#7737BF'">Arghajit Singha</a>
             </div>
@@ -1899,6 +2175,21 @@ function generateHTML(reportData, trendData = null) {
             return (ms / 1000).toFixed(1) + "s"; 
         }
     }
+    function copyLogContent(elementId, button) {
+        const logElement = document.getElementById(elementId);
+        if (!logElement) {
+            console.error('Could not find log element with ID:', elementId);
+            return;
+        }
+        navigator.clipboard.writeText(logElement.innerText).then(() => {
+            button.textContent = 'Copied!';
+            setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+        }).catch(err => {
+            console.error('Failed to copy log content:', err);
+            button.textContent = 'Failed';
+             setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+        });
+    }    
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
@@ -2061,9 +2352,9 @@ function generateHTML(reportData, trendData = null) {
 
 function copyErrorToClipboard(button) {
   // 1. Find the main error container, which should always be present.
-  const errorContainer = button.closest('.step-error');
+  const errorContainer = button.closest('.test-error-summary');
   if (!errorContainer) {
-    console.error("Could not find '.step-error' container. The report's HTML structure might have changed.");
+    console.error("Could not find '.test-error-summary' container. The report's HTML structure might have changed.");
     return;
   }
 
@@ -2338,4 +2629,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});