[Question] Generating HTML reports with original source code from playwright E2E tests with stopJsCoverage & v8-to-istanbul

[NicolasOe]

v8-to-istanbul version: 9.2.0
Playwright Version: 1.32.3
Operating System: Windows
Node.js version: 20.4.0
Browser: Edge

Hello v8-to-istanbul team,

I wonder if any of you can give me some answers about generating coverage HTML reports using playwright stopJsCoverage. My approach was to download the transpiled ts bundles + source map and try to run v8-to-istanbul passing the source map to it.

            const sourcemapPath = entry.url + ".map";
            const sourcemapData = fs.readFileSync(sourcemapPath, 'utf-8');
            const sourcemap: SourceMapInput = JSON.parse(sourcemapData);
            options = {
                sourceMap: {
                    sourcemap: sourcemap
                },
                source: undefined,
                originalSource: undefined
            }
            const converter = v8ToIstanbul(entry.url, 0, options);
            await converter.load();
            converter.applyCoverage(entry.functions);
            const istanbulCoverage = converter.toIstanbul();

When I generated the HTML report, the coverage seemed correct but the highlights didn't seem to match the original code, since some highlights would stop at random places.

My hypothesis is that the highlights are matching the transpiled code, and not the original. How can I make the highlights match the original source code and not the transpiled? Or would the issue lie somewhere else?

[cenfun]

I'm not sure what the problem is, but if you're using Playwright, you might try this custom reporter, which supports generating coverage reports. https://github.com/cenfun/monocart-reporter?#global-coverage-report