← Back to Discord Forum

Code Coverage for typescript files

Hello I am using the playwirght coverage class as well as a monocart report to generate a code coverage report. It seems the global report is generated solely with the js version of my files. I would like to be able to see the ts version of my files to see which pieces of code still have to be covered. I am still fairly new to using testing suites so I am unsure if the issue is with the Playwright startJSCoverage method that I am using or a configuration option of monocart.

This thread is trying to answer question "How can I generate a code coverage report that shows the TypeScript version of my files using Playwright and monocart?"

0 replies


Generating TypeScript Code Coverage with Playwright and Monocart

First, ensure you've installed Playwright and Monocart. Next, create a tsconfig.json file in your tests directory. Here's a sample configuration:

  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "moduleResolution": "Node",
    "sourceMap": true,
    "outDir": "../tests-out"

Then, add pretest and test scripts to your package.json file:

  "scripts": {
    "pretest": "tsc --incremental -p tests/tsconfig.json",
    "test": "<command to run playwright test>"

Replace <command to run playwright test> with your project's specific command. Now, you can build and run your tests with npm run test.

To generate a code coverage report, use Playwright's Coverage API. It collects data about the JavaScript and CSS used by the page during testing. Here's an example of how to use JavaScript coverage to produce an Istanbul report:

const { chromium } = require('playwright');
const v8toIstanbul = require('v8-to-istanbul');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.coverage.startJSCoverage();
  await page.goto('https://ray.run'); // Replace with your test URL

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

  for (const entry of coverage) {
    const converter = v8toIstanbul('', 0, { source: entry.source });
    await converter.load();

  await browser.close();

In this example, we launch a Chromium browser, create a new page, start JavaScript coverage, navigate to the URL, and stop the coverage. We then convert the coverage data into an Istanbul report format using v8-to-istanbul. You can customize this report to fit your needs.

Remember, this assumes you've already set up Playwright and Monocart and have a basic understanding of TypeScript and code coverage concepts.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.