@arghajit/dummy 0.3.5 → 0.3.7

package/dist/reporter/playwright-pulse-reporter.js

@@ -197,7 +197,7 @@ class PlaywrightPulseReporter {
         };
     }
     async onTestEnd(test, result) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
         const browserDetails = this.getBrowserDetails(test);
         const testStatus = convertStatus(result.status, test);
@@ -224,6 +224,16 @@ class PlaywrightPulseReporter {
         catch (e) {
             console.warn(`Pulse Reporter: Could not extract code snippet for ${test.title}`, e);
         }
+        // 1. Get Spec File Name
+        const specFileName = ((_e = test.location) === null || _e === void 0 ? void 0 : _e.file)
+            ? path.basename(test.location.file)
+            : "n/a";
+        // 2. Get Describe Block Name
+        // Check if the immediate parent is a 'describe' block
+        let describeBlockName = "n/a";
+        if (((_f = test.parent) === null || _f === void 0 ? void 0 : _f.type) === "describe") {
+            describeBlockName = test.parent.title;
+        }
         const stdoutMessages = result.stdout.map((item) => typeof item === "string" ? item : item.toString());
         const stderrMessages = result.stderr.map((item) => typeof item === "string" ? item : item.toString());
         const maxWorkers = this.config.workers;
@@ -241,18 +251,20 @@ class PlaywrightPulseReporter {
         const pulseResult = {
             id: test.id,
             runId: "TBD",
+            describe: describeBlockName,
+            spec_file: specFileName,
             name: test.titlePath().join(" > "),
-            suiteName: (project === null || project === void 0 ? void 0 : project.name) || ((_e = this.config.projects[0]) === null || _e === void 0 ? void 0 : _e.name) || "Default Suite",
+            suiteName: (project === null || project === void 0 ? void 0 : project.name) || ((_g = this.config.projects[0]) === null || _g === void 0 ? void 0 : _g.name) || "Default Suite",
             status: testStatus,
             duration: result.duration,
             startTime: startTime,
             endTime: endTime,
             browser: browserDetails,
             retries: result.retry,
-            steps: ((_f = result.steps) === null || _f === void 0 ? void 0 : _f.length) ? await processAllSteps(result.steps) : [],
-            errorMessage: (_g = result.error) === null || _g === void 0 ? void 0 : _g.message,
-            stackTrace: (_h = result.error) === null || _h === void 0 ? void 0 : _h.stack,
-            snippet: (_j = result.error) === null || _j === void 0 ? void 0 : _j.snippet,
+            steps: ((_h = result.steps) === null || _h === void 0 ? void 0 : _h.length) ? await processAllSteps(result.steps) : [],
+            errorMessage: (_j = result.error) === null || _j === void 0 ? void 0 : _j.message,
+            stackTrace: (_k = result.error) === null || _k === void 0 ? void 0 : _k.stack,
+            snippet: (_l = result.error) === null || _l === void 0 ? void 0 : _l.snippet,
             codeSnippet: codeSnippet,
             tags: test.tags.map((tag) => tag.startsWith("@") ? tag.substring(1) : tag),
             screenshots: [],
@@ -261,7 +273,7 @@ class PlaywrightPulseReporter {
             attachments: [],
             stdout: stdoutMessages.length > 0 ? stdoutMessages : undefined,
             stderr: stderrMessages.length > 0 ? stderrMessages : undefined,
-            annotations: ((_k = test.annotations) === null || _k === void 0 ? void 0 : _k.length) > 0 ? test.annotations : undefined,
+            annotations: ((_m = test.annotations) === null || _m === void 0 ? void 0 : _m.length) > 0 ? test.annotations : undefined,
             ...testSpecificData,
         };
         for (const [index, attachment] of result.attachments.entries()) {
@@ -278,16 +290,16 @@ class PlaywrightPulseReporter {
                 await this._ensureDirExists(path.dirname(absoluteDestPath));
                 await fs.copyFile(attachment.path, absoluteDestPath);
                 if (attachment.contentType.startsWith("image/")) {
-                    (_l = pulseResult.screenshots) === null || _l === void 0 ? void 0 : _l.push(relativeDestPath);
+                    (_o = pulseResult.screenshots) === null || _o === void 0 ? void 0 : _o.push(relativeDestPath);
                 }
                 else if (attachment.contentType.startsWith("video/")) {
-                    (_m = pulseResult.videoPath) === null || _m === void 0 ? void 0 : _m.push(relativeDestPath);
+                    (_p = pulseResult.videoPath) === null || _p === void 0 ? void 0 : _p.push(relativeDestPath);
                 }
                 else if (attachment.name === "trace") {
                     pulseResult.tracePath = relativeDestPath;
                 }
                 else {
-                    (_o = pulseResult.attachments) === null || _o === void 0 ? void 0 : _o.push({
+                    (_q = pulseResult.attachments) === null || _q === void 0 ? void 0 : _q.push({
                         name: attachment.name,
                         path: relativeDestPath,
                         contentType: attachment.contentType,

package/dist/types/index.d.ts

@@ -17,6 +17,8 @@ export interface TestStep {
 }
 export interface TestResult {
     id: string;
+    describe?: string;
+    spec_file?: string;
     name: string;
     status: TestStatus;
     duration: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://playwright-pulse-report.netlify.app/",
   "keywords": [
@@ -30,12 +30,12 @@
   ],
   "license": "MIT",
   "bin": {
-    "generate-pulse-report": "./scripts/generate-static-report.mjs",
-    "generate-report": "./scripts/generate-report.mjs",
-    "merge-pulse-report": "./scripts/merge-pulse-report.js",
-    "send-email": "./scripts/sendReport.mjs",
-    "generate-trend": "./scripts/generate-trend.mjs",
-    "generate-email-report": "./scripts/generate-email-report.mjs"
+    "generate-pulse-report": "scripts/generate-static-report.mjs",
+    "generate-report": "scripts/generate-report.mjs",
+    "merge-pulse-report": "scripts/merge-pulse-report.js",
+    "send-email": "scripts/sendReport.mjs",
+    "generate-trend": "scripts/generate-trend.mjs",
+    "generate-email-report": "scripts/generate-email-report.mjs"
   },
   "exports": {
     ".": {

package/scripts/config-reader.mjs

@@ -2,6 +2,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import { pathToFileURL } from "url";
+import { dirname } from "path";
 
 const DEFAULT_OUTPUT_DIR = "pulse-report";
 
@@ -26,31 +27,51 @@ async function extractOutputDirFromConfig(configPath) {
   try {
     let config;
 
-    if (configPath.endsWith(".ts")) {
-      try {
-        const { register } = await import("node:module");
-        const { pathToFileURL } = await import("node:url");
+    const configDir = dirname(configPath);
+    const originalDirname = global.__dirname;
+    const originalFilename = global.__filename;
 
-        register("ts-node/esm", pathToFileURL("./"));
+    try {
+      global.__dirname = configDir;
+      global.__filename = configPath;
 
-        config = await import(pathToFileURL(configPath).href);
-      } catch (tsError) {
+      if (configPath.endsWith(".ts")) {
         try {
-          const tsNode = await import("ts-node");
-          tsNode.register({
-            transpileOnly: true,
-            compilerOptions: {
-              module: "ESNext",
-            },
-          });
+          const { register } = await import("node:module");
+          const { pathToFileURL } = await import("node:url");
+
+          register("ts-node/esm", pathToFileURL("./"));
+
           config = await import(pathToFileURL(configPath).href);
-        } catch (fallbackError) {
-          console.error("Failed to load TypeScript config:", fallbackError);
-          return null;
+        } catch (tsError) {
+          try {
+            const tsNode = await import("ts-node");
+            tsNode.register({
+              transpileOnly: true,
+              compilerOptions: {
+                module: "ESNext",
+              },
+            });
+            config = await import(pathToFileURL(configPath).href);
+          } catch (fallbackError) {
+            console.error("Failed to load TypeScript config:", fallbackError);
+            return null;
+          }
         }
+      } else {
+        config = await import(pathToFileURL(configPath).href);
+      }
+    } finally {
+      if (originalDirname !== undefined) {
+        global.__dirname = originalDirname;
+      } else {
+        delete global.__dirname;
+      }
+      if (originalFilename !== undefined) {
+        global.__filename = originalFilename;
+      } else {
+        delete global.__filename;
       }
-    } else {
-      config = await import(pathToFileURL(configPath).href);
     }
 
     const playwrightConfig = config.default || config;

package/scripts/generate-report.mjs

@@ -1644,6 +1644,232 @@ function generateAIFailureAnalyzerTab(results) {
     </div>
   `;
 }
+// --- NEW CHARTS HELPER FUNCTIONS (Style: Line Chart + Enhanced Tooltips) ---
+
+function generateSpecDurationChart(results) {
+  if (!results || results.length === 0)
+    return '<div class="no-data">No results available.</div>';
+
+  const specDurations = {};
+  results.forEach((test) => {
+    let fileName = "Unknown";
+    if (test.location && test.location.file) {
+      fileName = test.location.file.split(path.sep).pop();
+    } else {
+      const parts = test.name.split(" > ");
+      fileName = parts[0];
+    }
+
+    if (!specDurations[fileName]) specDurations[fileName] = 0;
+    specDurations[fileName] += test.duration;
+  });
+
+  const categories = Object.keys(specDurations);
+  // Map data to objects to pass metadata if needed, though categories usually handle this.
+  const data = categories.map((cat) => ({
+    y: specDurations[cat],
+    name: cat,
+  }));
+
+  if (categories.length === 0)
+    return '<div class="no-data">No spec data found.</div>';
+
+  const chartId = `specDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderSpecDurChart_${chartId.replace(/-/g, "_")}`;
+
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Spec Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            title: { text: null },
+                            crosshair: true,
+                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { enabled: false },
+                        plotOptions: { 
+                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
+                            line: { lineWidth: 2.5 }
+                        },
+                        tooltip: {
+                            shared: true,
+                            useHTML: true,
+                            backgroundColor: 'rgba(10,10,10,0.92)',
+                            borderColor: 'rgba(10,10,10,0.92)',
+                            style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                // 'this.x' is the File Name (category)
+                                const point = this.points ? this.points[0].point : this.point;
+                                const color = point.color || point.series.color;
+                                
+                            return '<span style="color:' + color + '">●</span> <b>File: ' + this.x + '</b><br/>' + 
+                              'Duration: <b>' + formatDuration(this.y) + '</b>';
+                          }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)', // Orange theme
+                            marker: { symbol: 'circle' }
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering spec chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+
+function generateDescribeDurationChart(results) {
+  if (!results || results.length === 0)
+    return '<div class="no-data">No results available.</div>';
+
+  // We need to group by (File + Describe) to handle same-named describes in different files
+  const describeMap = new Map();
+  let foundAnyDescribe = false;
+
+  results.forEach((test) => {
+    const parts = test.name.split(" > ");
+    if (parts.length > 2) {
+      foundAnyDescribe = true;
+
+      // Extract Filename
+      let fileName = "Unknown";
+      if (test.location && test.location.file) {
+        fileName = test.location.file.split(path.sep).pop();
+      } else {
+        fileName = parts[0];
+      }
+
+      const describeName = parts.slice(1, parts.length - 1).join(" > ");
+
+      // Create a unique key for the map
+      const key = fileName + "::" + describeName;
+
+      if (!describeMap.has(key)) {
+        describeMap.set(key, {
+          duration: 0,
+          file: fileName,
+          describe: describeName,
+        });
+      }
+      describeMap.get(key).duration += test.duration;
+    }
+  });
+
+  if (!foundAnyDescribe) {
+    return '<div class="no-data">No test describe block found through out the executed test suite</div>';
+  }
+
+  const categories = [];
+  const data = [];
+
+  for (const [key, val] of describeMap.entries()) {
+    categories.push(val.describe); // X-Axis label
+    data.push({
+      y: val.duration,
+      custom: {
+        fileName: val.file,
+        describeName: val.describe,
+      },
+    });
+  }
+
+  const chartId = `descDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderDescDurChart_${chartId.replace(/-/g, "_")}`;
+
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Describe Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            title: { text: null },
+                            crosshair: true,
+                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { enabled: false },
+                        plotOptions: { 
+                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
+                            line: { lineWidth: 2.5 }
+                        },
+                        tooltip: {
+                            shared: true, 
+                            useHTML: true, 
+                            backgroundColor: 'rgba(10,10,10,0.92)', 
+                            borderColor: 'rgba(10,10,10,0.92)', 
+                            style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                // Retrieve custom data stored in the point
+                                const point = this.points ? this.points[0].point : this.point;
+                                
+                                // Safety check for your custom data
+                                const file = (point.custom && point.custom.fileName) ? point.custom.fileName : 'Unknown';
+                                const desc = (point.custom && point.custom.describeName) ? point.custom.describeName : this.x;
+                                const color = point.color || point.series.color;
+                                
+                                return '<span style="color:' + color + '">●</span> <b>Describe: ' + desc + '</b><br/>' +
+                                  '<span style="opacity: 0.8; font-size: 0.9em; color: #ddd;">File: ' + file + '</span><br/>' +
+                                  'Duration: <b>' + formatDuration(point.y) + '</b>';
+                                }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)', // Orange theme
+                            marker: { symbol: 'circle' }
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering describe chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+// --- END NEW CHARTS HELPER FUNCTIONS ---
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -2572,6 +2798,16 @@ function generateHTML(reportData, trendData = null) {
               }
             </div>
           </div>
+          <div class="trend-charts-row">
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Spec files</h3>
+                ${generateSpecDurationChart(results)}
+            </div>
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Test Describe</h3>
+                ${generateDescribeDurationChart(results)}
+            </div>
+          </div>
           <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
           <div class="trend-charts-row">
              <div class="trend-chart">
@@ -3282,4 +3518,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});

package/scripts/generate-static-report.mjs

@@ -1781,6 +1781,206 @@ function generateAIFailureAnalyzerTab(results) {
     </div>
   `;
 }
+// --- NEW CHARTS HELPER FUNCTIONS (Style: Line Chart + Enhanced Tooltips) ---
+
+function generateSpecDurationChart(results) {
+  if (!results || results.length === 0) return '<div class="no-data">No results available.</div>';
+
+  const specDurations = {};
+  results.forEach(test => {
+    let fileName = 'Unknown';
+    if (test.location && test.location.file) {
+      fileName = test.location.file.split(path.sep).pop();
+    } else {
+      const parts = test.name.split(' > ');
+      fileName = parts[0]; 
+    }
+    
+    if (!specDurations[fileName]) specDurations[fileName] = 0;
+    specDurations[fileName] += test.duration;
+  });
+
+  const categories = Object.keys(specDurations);
+  // Map data to objects to pass metadata if needed, though categories usually handle this.
+  const data = categories.map(cat => ({
+      y: specDurations[cat],
+      name: cat 
+  }));
+
+  if (categories.length === 0) return '<div class="no-data">No spec data found.</div>';
+
+  const chartId = `specDurChart-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+  const renderFunctionName = `renderSpecDurChart_${chartId.replace(/-/g, "_")}`;
+
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Spec Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            title: { text: null },
+                            crosshair: true,
+                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { enabled: false },
+                        plotOptions: { 
+                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
+                            line: { lineWidth: 2.5 }
+                        },
+                        tooltip: {
+                            shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                // Use 'this.x' which contains the category name (File Name)
+                                return '<b>File: ' + this.x + '</b><br/>Duration: ' + formatDuration(this.y);
+                            }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)', // Orange theme
+                            marker: { symbol: 'circle' }
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering spec chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+
+function generateDescribeDurationChart(results) {
+  if (!results || results.length === 0) return '<div class="no-data">No results available.</div>';
+
+  // We need to group by (File + Describe) to handle same-named describes in different files
+  const describeMap = new Map();
+  let foundAnyDescribe = false;
+
+  results.forEach(test => {
+    const parts = test.name.split(' > ');
+    if (parts.length > 2) {
+      foundAnyDescribe = true;
+      
+      // Extract Filename
+      let fileName = 'Unknown';
+      if (test.location && test.location.file) {
+          fileName = test.location.file.split(path.sep).pop();
+      } else {
+          fileName = parts[0]; 
+      }
+      
+      const describeName = parts.slice(1, parts.length - 1).join(' > ');
+      
+      // Create a unique key for the map
+      const key = fileName + '::' + describeName;
+      
+      if (!describeMap.has(key)) {
+          describeMap.set(key, { duration: 0, file: fileName, describe: describeName });
+      }
+      describeMap.get(key).duration += test.duration;
+    }
+  });
+
+  if (!foundAnyDescribe) {
+    return '<div class="no-data">No test describe block found through out the executed test suite</div>';
+  }
+
+  const categories = [];
+  const data = [];
+
+  for (const [key, val] of describeMap.entries()) {
+      categories.push(val.describe); // X-Axis label
+      data.push({
+          y: val.duration,
+          custom: {
+              fileName: val.file,
+              describeName: val.describe
+          }
+      });
+  }
+
+  const chartId = `descDurChart-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+  const renderFunctionName = `renderDescDurChart_${chartId.replace(/-/g, "_")}`;
+  
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Describe Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            title: { text: null },
+                            crosshair: true,
+                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { enabled: false },
+                        plotOptions: { 
+                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
+                            line: { lineWidth: 2.5 }
+                        },
+                        tooltip: {
+                            shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                // Retrieve custom data stored in the point
+                                const point = this.points ? this.points[0].point : this.point;
+                                const file = (point.custom && point.custom.fileName) ? point.custom.fileName : 'Unknown';
+                                const desc = (point.custom && point.custom.describeName) ? point.custom.describeName : this.x;
+                                
+                                return '<b>File:</b> ' + file + '<br/>' +
+                                       '<b>Describe:</b> ' + desc + '<br/>' +
+                                       'Duration: ' + formatDuration(point.y);
+                            }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)', // Orange theme
+                            marker: { symbol: 'circle' }
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering describe chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+// --- END NEW CHARTS HELPER FUNCTIONS ---
 /**
  * Generates the HTML report.
  * @param {object} reportData - The data for the report.
@@ -2574,6 +2774,16 @@ aspect-ratio: 16 / 9;
               }
               </div>
           </div>
+          <div class="trend-charts-row">
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Spec files</h3>
+                ${generateSpecDurationChart(results)}
+            </div>
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Test Describe</h3>
+                ${generateDescribeDurationChart(results)}
+            </div>
+          </div>
           <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
           <div class="trend-charts-row">
              <div class="trend-chart">