docs(class-coverage.md): Add example for V8 coverage report

docs/src/api/class-coverage.md

@@ -4,12 +4,12 @@
 
 Coverage gathers information about parts of JavaScript and CSS that were used by the page.
 
-An example of using JavaScript coverage to produce Istanbul report for page load:
-
 :::note
 Coverage APIs are only supported on Chromium-based browsers.
 :::
 
+An example of using JavaScript coverage to produce Istanbul report for page load:
+
 ```js
 const { chromium } = require('playwright');
 const v8toIstanbul = require('v8-to-istanbul');
@@ -30,6 +30,45 @@ const v8toIstanbul = require('v8-to-istanbul');
 })();
 ```
 
+Another example is generating native V8 coverage reports with [monocart-coverage-reports](https://github.com/cenfun/monocart-coverage-reports)
+
+```js
+const { chromium } = require('playwright');
+const MCR = require('monocart-coverage-reports');
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  await Promise.all([
+    page.coverage.startJSCoverage({
+      resetOnNavigation: false
+    }),
+    page.coverage.startCSSCoverage({
+      resetOnNavigation: false
+    })
+  ]);
+
+  await page.goto('https://playwright.dev/');
+
+  const [jsCoverage, cssCoverage] = await Promise.all([
+    page.coverage.stopJSCoverage(),
+    page.coverage.stopCSSCoverage()
+  ]);
+  const coverageData = [... jsCoverage, ... cssCoverage];
+
+  const coverageReport = MCR({
+    name: 'My Coverage Report',
+    outputDir: './coverage-reports',
+    reports: ['v8', 'console-details']
+  });
+  await coverageReport.add(coverageData);
+  await coverageReport.generate();
+
+  await browser.close();
+})();
+```
+
 ## async method: Coverage.startCSSCoverage
 * since: v1.11
 

packages/playwright-core/types/types.d.ts

@@ -17132,10 +17132,10 @@ export interface ConsoleMessage {
 /**
  * Coverage gathers information about parts of JavaScript and CSS that were used by the page.
  *
- * An example of using JavaScript coverage to produce Istanbul report for page load:
- *
  * **NOTE** Coverage APIs are only supported on Chromium-based browsers.
  *
+ * An example of using JavaScript coverage to produce Istanbul report for page load:
+ *
  * ```js
  * const { chromium } = require('playwright');
  * const v8toIstanbul = require('v8-to-istanbul');
@@ -17156,6 +17156,46 @@ export interface ConsoleMessage {
  * })();
  * ```
  *
+ * Another example is generating native V8 coverage reports with
+ * [monocart-coverage-reports](https://github.com/cenfun/monocart-coverage-reports)
+ *
+ * ```js
+ * const { chromium } = require('playwright');
+ * const MCR = require('monocart-coverage-reports');
+ *
+ * (async () => {
+ *   const browser = await chromium.launch();
+ *   const page = await browser.newPage();
+ *
+ *   await Promise.all([
+ *     page.coverage.startJSCoverage({
+ *       resetOnNavigation: false
+ *     }),
+ *     page.coverage.startCSSCoverage({
+ *       resetOnNavigation: false
+ *     })
+ *   ]);
+ *
+ *   await page.goto('https://playwright.dev/');
+ *
+ *   const [jsCoverage, cssCoverage] = await Promise.all([
+ *     page.coverage.stopJSCoverage(),
+ *     page.coverage.stopCSSCoverage()
+ *   ]);
+ *   const coverageData = [... jsCoverage, ... cssCoverage];
+ *
+ *   const coverageReport = MCR({
+ *     name: 'My Coverage Report',
+ *     outputDir: './coverage-reports',
+ *     reports: ['v8', 'console-details']
+ *   });
+ *   await coverageReport.add(coverageData);
+ *   await coverageReport.generate();
+ *
+ *   await browser.close();
+ * })();
+ * ```
+ *
  */
 export interface Coverage {
   /**