monocart-reporter 2.9.9 → 2.9.11

package/README.md

@@ -19,6 +19,7 @@
 * [Install](#install)
 * [Playwright Config](#playwright-config)
 * [Examples](#examples)
+* [Tutorial](#tutorial)
 * [Output](#output)
 * [Reporter Options](#reporter-options)
 * [View Trace Online](#view-trace-online)
@@ -88,6 +89,11 @@ Playwright Docs [https://playwright.dev/docs/test-reporters](https://playwright.
 - [monocart-reporter-examples](https://github.com/cenfun/monocart-reporter-examples)
 - [playwright-reporter-integrations](https://github.com/cenfun/playwright-reporter-integrations)
 
+## Tutorial
+- [Playwright + Monocart = Next-Level Custom Reports! | Step-by-Step Tutorial!](https://www.youtube.com/watch?v=8Ae-lkFAG5Q)
+- [Optimising Playwright Reporting Through Monocart](https://engineering.kablamo.com.au/posts/2024/optimising-playwright-reporting-through-monocart/)
+- [Leveraging Playwright's Powerful End-to-End Testing, MongoDB, Data Fixtures for Live Execution Insights](https://www.linkedin.com/pulse/leveraging-playwrights-powerful-end-to-end-testing-data-kandukuri-ak6ac/)
+
 ## Output
 - path-to/your-filename.html  
 Single HTML file (data compressed), easy to transfer/deploy or open directly anywhere   
@@ -95,7 +101,21 @@ Single HTML file (data compressed), easy to transfer/deploy or open directly any
 - path-to/your-filename.json  (requires option `json` is true)
 Separated data file which can be used for debugging or data provider (It's included in the above HTML and compressed).
 - path-to/your-filename.zip  (requires option `zip` is true)
-Zip file for merging reports
+ Zip file for merging reports
+    - custom zip options
+```js
+{
+    // zip: true,
+    // zip: `${YourOutputDir}/monocart-shard-${your-shard-number}.zip`,
+    zip: {
+        // custom zip `outputFile`, defaults to reporter `outputFile` but uses `.zip` extension
+        outputFile: `${YourOutputDir}/monocart-shard-${your-shard-number}.zip`,
+        // clean other report files except for zip file, defaults to false
+        clean: true
+    }
+}
+```
+
 
 ## Reporter Options
 - Default options: [lib/default/options.js](./lib/default/options.js)
@@ -846,7 +866,7 @@ Attach a network report with API `attachNetworkReport(har, testInfo)`. Arguments
 - `har` HAR path (String) or HAR file buffer (Buffer). see [HAR 1.2 Spec](http://www.softwareishard.com/blog/har-12-spec/)
 - `testInfo` see [TestInfo](https://playwright.dev/docs/api/class-testinfo)
 
- Generate HAR with `recordHar` option in browser.newContext() (see example: [report-network.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-network/report-network.spec.js) preview [report](https://cenfun.github.io/monocart-reporter/network-1a18723ee59b36867898/index.html))
+ Generate HAR with `recordHar` option in browser.newContext() (see example: [report-network.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-network/report-network.spec.js) preview [report](https://cenfun.github.io/monocart-reporter/#page=report))
 
 ```js
 const fs = require('fs');
@@ -912,7 +932,7 @@ test('finally, attach HAR', async () => {
     await attachNetworkReport(harPath, test.info());
 });
 ```
-Preview [Network HTML Report](https://cenfun.github.io/monocart-reporter/network-da7f5b4cceb1e6280782/index.html)
+Preview [Network HTML Report](https://cenfun.github.io/monocart-reporter/#page=report)
 
 ## Global State Management
 When tests are executed in [isolation](https://playwright.dev/docs/browser-contexts) mode, the reporter and each test may run in a different process, they cannot share data with each other. we can start a local WebSocket server to serve the global data, and read/write the global data with `useState` API from a test.
@@ -1030,7 +1050,7 @@ const reportDataList = [
     'path-to/shard2/index.json',
     'path-to/shard3/index.json'
 
-    // Or load zip file directly if the output files is zipped
+    // Or load zip file directly if the output files is zipped with option `zip` is true
     // 'path-to/shard1/index.zip',
     // 'path-to/shard2/index.zip',
     // 'path-to/shard3/index.zip'
@@ -1044,6 +1064,7 @@ await merge(reportDataList, {
     }
 });
 ```
+see [Output](#output) for `zip` options
 
 > Note: The coverage reports will be merged automatically if we specify the `raw` report in coverage options:
 ```js
@@ -1149,10 +1170,19 @@ module.exports = {
 ## onData hook
 The `onData` function will be executed after report data generated (before `onEnd`).
 ```js
-onData: (reportData) => {
-    // console.log('onData', reportData);
-    reportData.name = 'My Report Name';
-}
+// playwright.config.js
+module.exports = {
+    reporter: [
+        ['monocart-reporter', {  
+            name: "My Test Report",
+            outputFile: './monocart-report/index.html',
+            onData: (reportData) => {
+                // console.log('onData', reportData);
+                reportData.name = 'My New Report Name';
+            }
+        }]
+    ]
+};
 ```
 
 ## Integration Examples

package/lib/common.js

@@ -230,8 +230,13 @@ const getTrends = async (input) => {
         return [];
     }
 
+    // filter with one year ago
+    const date = new Date();
+    const oneYearAgo = date.setFullYear(date.getFullYear() - 1);
+
     // copy previous trends
-    const trends = [].concat(data.trends || []);
+    const trends = [].concat(data.trends || []).filter((it) => it.date > oneYearAgo);
+
     trends.push(Util.getCurrentTrendInfo(data));
 
     return trends;

package/lib/default/options.js

@@ -5,6 +5,9 @@ module.exports = () => ({
     // the report name
     name: '',
 
+    // image url (supports data url)
+    logo: null,
+
     // the output html file path (relative process.cwd)
     outputFile: './monocart-report/index.html',
 

package/lib/default/summary.js

@@ -4,10 +4,10 @@ module.exports = () => ({
         value: 0,
         nav: true
     },
-    passed: {
-        name: 'Passed',
+    failed: {
+        name: 'Failed',
         value: 0,
-        color: 'green',
+        color: '#d00',
         nav: true
     },
     flaky: {
@@ -22,10 +22,10 @@ module.exports = () => ({
         color: 'gray',
         nav: true
     },
-    failed: {
-        name: 'Failed',
+    passed: {
+        name: 'Passed',
         value: 0,
-        color: '#d00',
+        color: 'green',
         nav: true
     },
 
@@ -60,21 +60,27 @@ module.exports = () => ({
         value: 0
     },
 
-    retries: {
-        name: 'Retries',
+    errors: {
+        name: 'Errors',
+        icon: 'error',
         value: 0
     },
 
-    errors: {
-        name: 'Errors',
+    retries: {
+        name: 'Retries',
+        icon: 'retry',
         value: 0
     },
+
     logs: {
         name: 'Logs',
+        icon: 'log',
         value: 0
     },
+
     attachments: {
         name: 'Attachments',
+        icon: 'attachment',
         value: 0
     }
 });

package/lib/generate-data.js

@@ -97,7 +97,7 @@ const generateData = async (results) => {
 
     // suite and case types
     data.suiteTypes = ['project', 'file', 'describe', 'shard'];
-    data.caseTypes = ['passed', 'flaky', 'skipped', 'failed'];
+    data.caseTypes = ['failed', 'flaky', 'skipped', 'passed'];
     data.traceViewerUrl = options.traceViewerUrl;
     data.mermaid = generateMermaid(options);
     data.groupOptions = options.groupOptions;
@@ -144,6 +144,7 @@ const generateData = async (results) => {
     const reportData = {
         // for report title
         name: reportName,
+        logo: options.logo,
 
         date,
         dateH,

package/lib/index.d.ts

@@ -51,6 +51,12 @@ export type MonocartReporterOptions = {
     /** the report name */
     name?: string;
 
+    /** 
+     * image url, supports data url:
+     * `data:image/png;base64,${fs.readFileSync('path-to/your-logo.png').toString('base64')}`
+    */
+    logo?: string;
+
     /** the output file path (relative process.cwd) */
     outputFile?: string;
 

package/lib/merge-data.js

@@ -333,6 +333,7 @@ const mergeDataList = async (dataList, options) => {
     });
 
     const reportName = options.name || mergedData.name;
+    const reportLogo = options.logo || mergedData.logo;
 
     const date = Math.min.apply(null, startDates);
     const dateH = new Date(date).toLocaleString();
@@ -342,6 +343,7 @@ const mergeDataList = async (dataList, options) => {
 
     Object.assign(mergedData, {
         name: reportName,
+        logo: reportLogo,
 
         date,
         dateH,