diff --git a/packages/playwright/src/reporters/html.ts b/packages/playwright/src/reporters/html.ts
index a5c9e31798..406be15e83 100644
--- a/packages/playwright/src/reporters/html.ts
+++ b/packages/playwright/src/reporters/html.ts
@@ -241,12 +241,9 @@ class HtmlBuilder {
   async build(metadata: Metadata, projectSuites: Suite[], result: FullResult, topLevelErrors: TestError[]): Promise<{ ok: boolean, singleTestId: string | undefined }> {
     const data = new Map<string, { testFile: TestFile, testFileSummary: TestFileSummary }>();
     for (const projectSuite of projectSuites) {
-      const testDir = projectSuite.project()!.testDir;
       for (const fileSuite of projectSuite.suites) {
         const fileName = this._relativeLocation(fileSuite.location)!.file;
-        // Preserve file ids computed off the testDir.
-        const relativeFile = path.relative(testDir, fileSuite.location!.file);
-        const fileId = calculateSha1(toPosixPath(relativeFile)).slice(0, 20);
+        const fileId = calculateSha1(toPosixPath(fileName)).slice(0, 20);
         let fileEntry = data.get(fileId);
         if (!fileEntry) {
           fileEntry = {
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 59d986857f..63d4c34a28 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -2563,6 +2563,33 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await expect(page.locator('#fallback-error')).toContainText('The Playwright Trace Viewer must be loaded over the http:// or https:// protocols.');
       await expect(page.locator('#fallback-error')).toContainText(`npx playwright show-report ${reportPath.replace(/\\/g, '\\\\')}`);
     });
+
+    test('should not collate identical file names in different project directories', async ({ runInlineTest, page }) => {
+      await runInlineTest({
+        'playwright.config.ts': `
+          export default {
+            projects: [
+              { name: 'a', testDir: './tests/a' },
+              { name: 'b', testDir: './tests/b' },
+            ],
+          }
+        `,
+        'tests/a/test.spec.ts': `
+          import { test } from '@playwright/test';
+          test('passes', ({ page }) => {});
+        `,
+        'tests/b/test.spec.ts': `
+          import { test } from '@playwright/test';
+          test('passes', ({ page }) => {});
+        `,
+      }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+      const reportPath = path.join(test.info().outputPath(), 'playwright-report', 'index.html');
+      await page.goto(url.pathToFileURL(reportPath).toString());
+      await expect(page.getByRole('main')).toMatchAriaSnapshot(`
+        - button "tests/a/test.spec.ts"
+        - button "tests/b/test.spec.ts"
+      `);
+    });
   });
 }