Document how to use with puppeteer?

[stevenvachon]

• Version: 12.13.0
• Platform: Darwin Stevens-Mac-mini.local 19.0.0 Darwin Kernel Version 19.0.0: Thu Oct 17 16:17:15 PDT 2019; root:xnu-6153.41.3~29/RELEASE_X86_64 x86_64

Previously, with nyc, I was using puppeteer-to-istanbul, but now I'm not sure what to do. c8 needs to receive the reports from puppeteer somehow.

[SergeyPirogov]

Puppeteer aggregates results that is returned from raw chrome dev tools protocol

[bcoe]

@stevenvachon, c8 and nyc both just process Istanbul format reports, and output coverage based on them. It's probably worth sticking with nyc 👍

[stevenvachon]

@bcoe then why are you creating this library, if not to replace nyc and/or the use of istanbul?

[bcoe]

then why are you creating this library, if not to replace nyc and/or the use of istanbul?

Because they do two different things? Istanbul transpiles your source code into a form that collects test coverage, c8 turns on V8's built in test coverage and runs reports.

It happens that puppeteer can be made to output coverage in the same form as V8, so some of the toolchain for processing these reports is shared.

[bricss]

Ahoy ahoy 🦜

If anyone would like to know how to use c8 to get a coverage report with mocha + playwright 👀 You can find it here -> fixtures.mjs 📜

[queengooborg]

I was able to get puppeteer working with c8, thanks to https://github.com/puppeteer/puppeteer/pull/6454! I wanted to leave the code I used here for anyone else who may want to stick with puppeteer. The trick is to set the includeRawScriptCoverage to true in your startJSCoverage() options, and then write its output to JSON files. Huge thanks to @bricss for providing a foundation for me to work off of!

The code I wrote is as follows:

await page.coverage.startJSCoverage({includeRawScriptCoverage: true});

// Do your tests...

const jsCoverage = await page.coverage.stopJSCoverage();

// Point to original .js files
const coverage = jsCoverage
  .map(({rawScriptCoverage: it}) => ({
    ...it,
    scriptId: String(it.scriptId),
    url: it.url.replace(
      new RegExp(`${ origin }(?<pathname>.*)`),
      (...[, , , , { pathname }]) => `${
        pathname.match(/^\/src/)
        ? process.cwd()
        : path.resolve(dirPath, base)
      }${ pathname.replace(/([#?].*)/, '')
                  .replace(/\//g, path.sep) }`,
  })));

// Export coverage data
jsCoverage.forEach((it, idx) =>
  fs.writeFileSync(
    `${
      process.env.NODE_V8_COVERAGE
    }/coverage-${Date.now()}-${idx}.json`,
    JSON.stringify({result: [it]})
  )
);

[bcoe]

@queengooborg this is slick, we should document how to do this 😄

[queengooborg]

That would be great, yeah! I was thinking of submitting a PR to add it, but I wasn't sure where to add it -- any particular location you'd think would work best?

[bcoe]

@queengooborg we could add a docs/puppeteer.md, and then add a ## Guides section in the top level README perhaps?

[bricss]

IMO, it might be both docs/playwright.md and docs/puppeteer.md 🙂 or even docs/chromium.md, bcos the code for both playwright and puppeteer would be same same, with only one difference in includeRawScriptCoverage: true passed in startJSCoverage() method, as we already know 🤓

[a4vg]

Any updates on this?

[testgitdl]

startJSCOverage does not seem to have this includeRawScriptCoverage: true