How to collect code coverage from playwright to Sonar (Angular Project)

Question

seeking help regarding the topic. There is an Angular project built with nrwl that includes Playwright e2e tests. However, I am unable to extend the existing unit tests (which are Jest based and were set up out-of-the-box) to achieve proper code coverage for Playwright in SonarCloud.

I would be very thankful for any kind of help or references, how can I achieve such a configuration

I tried the solution: https://playwright.dev/docs/api/class-coverage but when the is some difference in the source map from angular and v8 code coverage, so conversation failed Tried this as well: https://github.com/anishkny/playwright-test-coverage here my fault I haven't direct access to the babelrc file (because of nrwl monorepo)

Answer 1

Since you have two testing modes, unit and e2e, the first step is to standardize the original format of the coverage data.

For example, use v8 as the data provider for both:

1, unit test:

Install this custom reporter for Jest npm i jest-monocart-coverage

// jest.config.js
const config = {
    collectCoverage: true,
    coverageProvider: 'v8',
    coverageReporters: ['none'],
    reporters: [
        ['jest-monocart-coverage', {
            name: 'My Unit Coverage Report',
            reports: [
                ['v8'],
                ['console-summary'],
                ['lcovonly']
            ],
            outputDir: './coverage-reports/unit'
        }]
    ],
};
export default config;

There will be a ./coverage-reports/unit/lcov.info generated for Sonar.

2, e2e test:

Install this custom reporter for Playwright npm i monocart-reporter And collect global coverage report through this tutorial. Note, please use lcovonly report to generate lcov.info for Sonar too.

3, Upload 2 lcov.info to Sonar Cloud.