diff --git a/docs/src/api/class-coverage.md b/docs/src/api/class-coverage.md index 8eae75e24d..fde207bd91 100644 --- a/docs/src/api/class-coverage.md +++ b/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 diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index f8a1dd584e..a7bcf57c62 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/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 { /**