[BUG] Code coverage failing with reading map file

[ibrocodes7]

System info

• Playwright Version: [v1.24.0]
• Operating System: [Ubuntu 20, macOS 13.2]
• Browser: [Chromium]
• Other info:

Source code

• I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

[https://github.com/your_profile/playwright_issue_title]

or

Config file

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});

Test file (self-contained)

  test('should load login form', async ({ loginPage }) => {
    await loginPage.doStuff();
    await loginPage.doStuff(['']);
    await loginPage.doStuff('');
    await loginPage.doStuff();
  });

Fixture

import { Page, test as base } from '@playwright/test';
const v8toIstanbul = require('v8-to-istanbul');

import {
  LoginPage,
} from '../src/pages';

let appPage: Page = null;

export const test = base.extend<{
  loginPage: LoginPage;
}>({
  page: async ({ browser }, use) => {
    if (appPage === null) {
      appPage = await browser.newPage();
    }
    await use(appPage);
  },

  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },
});

test.beforeEach(async ({ page }) => {
  await page.coverage.startJSCoverage();
});

test.afterEach(async ({ page }) => {
  const coverage = await page.coverage.stopJSCoverage();
  console.log(coverage);

  for (const entry of coverage) {
    const converter = v8toIstanbul('', 0, { source: entry.source });
    await converter.load();
    converter.applyCoverage(entry.functions);
    console.log(JSON.stringify(converter.toIstanbul()));
  }
});

Console error:

{"":{"path":"","all":false,"statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":1,"column":0}},"1":{"start":{"line":2,"column":0},"end":{"line":2,"column":46}},"2":{"start":{"line":3,"column":0},"end":{"line":3,"column":23}},"3":{"start":{"line":4,"column":0},"end":{"line":4,"column":61}},"4":{"start":{"line":5,"column":0},"end":{"line":5,"column":21}},"5":{"start":{"line":6,"column":0},"end":{"line":6,"column":22}},"6":{"start":{"line":7,"column":0},"end":{"line":7,"column":10}},"7":{"start":{"line":8,"column":0},"end":{"line":8,"column":68}},"8":{"start":{"line":9,"column":0},"end":{"line":9,"column":60}},"9":{"start":{"line":10,"column":0},"end":{"line":10,"column":58}},"10":{"start":{"line":11,"column":0},"end":{"line":11,"column":40}},"11":{"start":{"line":12,"column":0},"end":{"line":12,"column":50}},"12":{"start":{"line":13,"column":0},"end":{"line":13,"column":25}},"13":{"start":{"line":14,"column":0},"end":{"line":14,"column":58}},"14":{"start":{"line":15,"column":0},"end":{"line":15,"column":10}},"15":{"start":{"line":16,"column":0},"end":{"line":16,"column":0}},"16":{"start":{"line":17,"column":0},"end":{"line":17,"column":46}},"17":{"start":{"line":18,"column":0},"end":{"line":18,"column":51}},"18":{"start":{"line":19,"column":0},"end":{"line":19,"column":60}},"19":{"start":{"line":20,"column":0},"end":{"line":20,"column":51}},"20":{"start":{"line":21,"column":0},"end":{"line":21,"column":15}},"21":{"start":{"line":22,"column":0},"end":{"line":22,"column":24}},"22":{"start":{"line":23,"column":0},"end":{"line":23,"column":9}},"23":{"start":{"line":24,"column":0},"end":{"line":24,"column":42}},"24":{"start":{"line":25,"column":0},"end":{"line":25,"column":61}},"25":{"start":{"line":26,"column":0},"end":{"line":26,"column":43}},"26":{"start":{"line":27,"column":0},"end":{"line":27,"column":50}},"27":{"start":{"line":28,"column":0},"end":{"line":28,"column":15}},"28":{"start":{"line":29,"column":0},"end":{"line":29,"column":75}},"29":{"start":{"line":30,"column":0},"end":{"line":30,"column":9}},"30":{"start":{"line":31,"column":0},"end":{"line":31,"column":0}},"31":{"start":{"line":32,"column":0},"end":{"line":32,"column":8}},"32":{"start":{"line":33,"column":0},"end":{"line":33,"column":0}},"33":{"start":{"line":34,"column":0},"end":{"line":34,"column":61}},"34":{"start":{"line":35,"column":0},"end":{"line":35,"column":72}},"35":{"start":{"line":36,"column":0},"end":{"line":36,"column":59}},"36":{"start":{"line":37,"column":0},"end":{"line":37,"column":64}},"37":{"start":{"line":38,"column":0},"end":{"line":38,"column":51}},"38":{"start":{"line":39,"column":0},"end":{"line":39,"column":44}},"39":{"start":{"line":40,"column":0},"end":{"line":40,"column":48}},"40":{"start":{"line":41,"column":0},"end":{"line":41,"column":48}},"41":{"start":{"line":42,"column":0},"end":{"line":42,"column":17}},"42":{"start":{"line":43,"column":0},"end":{"line":43,"column":50}},"43":{"start":{"line":44,"column":0},"end":{"line":44,"column":81}},"44":{"start":{"line":45,"column":0},"end":{"line":45,"column":112}},"45":{"start":{"line":46,"column":0},"end":{"line":46,"column":87}},"46":{"start":{"line":47,"column":0},"end":{"line":47,"column":84}},"47":{"start":{"line":48,"column":0},"end":{"line":48,"column":52}},"48":{"start":{"line":49,"column":0},"end":{"line":49,"column":40}},"49":{"start":{"line":50,"column":0},"end":{"line":50,"column":40}},"50":{"start":{"line":51,"column":0},"end":{"line":51,"column":17}},"51":{"start":{"line":52,"column":0},"end":{"line":52,"column":9}},"52":{"start":{"line":53,"column":0},"end":{"line":53,"column":31}},"53":{"start":{"line":54,"column":0},"end":{"line":54,"column":52}},"54":{"start":{"line":55,"column":0},"end":{"line":55,"column":40}},"55":{"start":{"line":56,"column":0},"end":{"line":56,"column":60}},"56":{"start":{"line":57,"column":0},"end":{"line":57,"column":17}},"57":{"start":{"line":58,"column":0},"end":{"line":58,"column":9}}},"s":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":0,"18":0,"19":0,"20":0,"21":0,"22":0,"23":1,"24":0,"25":0,"26":0,"27":0,"28":0,"29":0,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":0,"44":0,"45":0,"46":0,"47":0,"48":0,"49":0,"50":0,"51":0,"52":1,"53":0,"54":0,"55":0,"56":0,"57":0},"branchMap":{"0":{"type":"branch","line":2,"loc":{"start":{"line":2,"column":-1},"end":{"line":58,"column":9}},"locations":[{"start":{"line":2,"column":-1},"end":{"line":58,"column":9}}]},"1":{"type":"branch","line":43,"loc":{"start":{"line":43,"column":31},"end":{"line":43,"column":47}},"locations":[{"start":{"line":43,"column":31},"end":{"line":43,"column":47}}]},"2":{"type":"branch","line":43,"loc":{"start":{"line":43,"column":49},"end":{"line":52,"column":9}},"locations":[{"start":{"line":43,"column":49},"end":{"line":52,"column":9}}]},"3":{"type":"branch","line":53,"loc":{"start":{"line":53,"column":30},"end":{"line":58,"column":9}},"locations":[{"start":{"line":53,"column":30},"end":{"line":58,"column":9}}]}},"b":{"0":[1],"1":[0],"2":[0],"3":[0]},"fnMap":{"0":{"name":"createNode","decl":{"start":{"line":17,"column":8},"end":{"line":23,"column":9}},"loc":{"start":{"line":17,"column":8},"end":{"line":23,"column":9}},"line":17},"1":{"name":"appendNodesToDom","decl":{"start":{"line":24,"column":8},"end":{"line":30,"column":9}},"loc":{"start":{"line":24,"column":8},"end":{"line":30,"column":9}},"line":24}},"f":{"0":0,"1":0}}}
Passed: 0	Failed: 1	Pending: 0


  1) login/login.test.ts:18:3 › Login scenarios ›  should load login page ==================

    Error: An error occurred while trying to read the map file at /Users/<path>/ag-grid-chunk-bfc390cf.js.map
    Error: ENOENT: no such file or directory, open '/Users/<path>/ag-grid-chunk-bfc390cf.js.map'

        at readFromFileMap (/Users/<path>/node_modules/convert-source-map/index.js:60:11)
        at new Converter (/Users/<path>/node_modules/convert-source-map/index.js:67:32)
        at Object.exports.fromMapFileComment (/Users/<path>/node_modules/convert-source-map/index.js:153:10)
        at Object.exports.fromMapFileSource (/Users/<path>/node_modules/convert-source-map/index.js:165:22)
        at V8ToIstanbul.load (/Users/<path>/node_modules/v8-to-istanbul/lib/v8-to-istanbul.js:52:66)
        at /Users/<path>/fixtures/blink.ts:334:21

Steps

• [Run the test]
• npx playwright test

Expected

I followed the instructions as per https://playwright.dev/docs/api/class-coverage to get the code coverage.

Actual

But I am facing an error complaining that the map is not present at the given location. This seems to be happening with latest version as well.

[dgozman]

@ibrocodes7 It seems like your web page sources have broken source maps. I don't think Playwright can help with this. Look into your build tools/scripts for misconfigured source maps.

[tranvan-hai]

In my case with Vite and Playwright, it is necessary to set the source map as inline in the Vite configuration in order to properly resolve the source map for Playwright code coverage.

vite.config.ts:

export default defineConfig(() => {
    return {
        build: {
            sourcemap: 'inline', 
        },
    };
});

[cenfun]

Same issue when i used v8-to-istanbul the issues:
istanbuljs/v8-to-istanbul#211
istanbuljs/v8-to-istanbul#197

the v8-to-istanbul will try to load the sourcemap file if there is a sourcemap link, it requires there is a correct source path otherwise an error occurred while trying to read the map file.

const v8toIstanbul = new V8toIstanbul(`the right source path here for loading source map file`, 0, sources, excludePath);

so that's why inline sourcemap will works well.

Therefore there are 2 solutions:
1, remove the sourcemap link (source map link comments)

// remove sourcemap link
import { removeMapFileComments } from 'convert-source-map';
source = removeMapFileComments(source)

2, manually load the sourcemap and pass it to V8toIstanbul

const sourceMap = loadSourceMap(source);
const v8toIstanbul = new V8toIstanbul("", 0, {
    source,
    sourceMap
}, excludePath);