fix(test-runner): respect source maps when reporting test files (#11770)

packages/playwright-test/src/loader.ts

@@ -132,6 +132,27 @@ export class Loader {
     } finally {
       setCurrentlyLoadingFileSuite(undefined);
     }
+
+    {
+      // Test locations that we discover potentially have different file name.
+      // This could be due to either
+      //   a) use of source maps or due to
+      //   b) require of one file from another.
+      // Try fixing (a) w/o regressing (b).
+
+      const files = new Set<string>();
+      suite.allTests().map(t => files.add(t.location.file));
+      if (files.size === 1) {
+        // All tests point to one file.
+        const mappedFile = files.values().next().value;
+        if (suite.location.file !== mappedFile) {
+          // The file is different, check for a likely source map case.
+          if (path.extname(mappedFile) !== path.extname(suite.location.file))
+            suite.location.file = mappedFile;
+        }
+      }
+    }
+
     return suite;
   }
 

tests/playwright-test/reporter-html.spec.ts

@@ -473,7 +473,7 @@ test('open tests from required file', async ({ runInlineTest, showReport, page }
   }, { 'reporter': 'dot,html' });
   expect(result.exitCode).toBe(0);
   await showReport();
-
+  await expect(page.locator('text=a.spec.js')).toBeVisible();
   await page.locator('text=sample').first().click();
   await expect(page.locator('.tree-item-title')).toContainText([
     /expect\.toBe/,

tests/playwright-test/reporter.spec.ts

@@ -566,6 +566,51 @@ test('should report correct tests/suites when using grep', async ({ runInlineTes
   expect(fileSuite.specs.length).toBe(0);
 });
 
+test('should use sourceMap-based file suite names', async ({ runInlineTest }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/11028' });
+  const result = await runInlineTest({
+    'reporter.js': `
+      class Reporter {
+        onBegin(config, suite) {
+          console.log(suite.suites[0].suites[0].location.file);
+        }
+      }
+      module.exports = Reporter;
+    `,
+    'playwright.config.ts': `
+      module.exports = {
+        reporter: './reporter',
+      };
+    `,
+    'a.spec.js':
+`var __create = Object.create;//@no-header
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var import_test = __toModule(require("@playwright/test"));
+(0, import_test.test)("pass", async () => {
+});
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL2Euc3BlYy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiaW1wb3J0IHsgdGVzdCB9IGZyb20gXCJAcGxheXdyaWdodC90ZXN0XCI7XG5cbnRlc3QoJ3Bhc3MnLCBhc3luYyAoKSA9PiB7fSk7Il0sCiAgIm1hcHBpbmdzIjogIjs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsa0JBQXFCO0FBRXJCLHNCQUFLLFFBQVEsWUFBWTtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo=`,
+  }, { 'reporter': '' });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.output).toContain('a.spec.ts');
+});
+
 function stripEscapedAscii(str: string) {
   return str.replace(/\\u00[a-z0-9][a-z0-9]\[[^m]+m/g, '');
 }