diff --git a/packages/playwright-ct-core/src/tsxTransform.ts b/packages/playwright-ct-core/src/tsxTransform.ts
index a01bfdfa63..3e5546097e 100644
--- a/packages/playwright-ct-core/src/tsxTransform.ts
+++ b/packages/playwright-ct-core/src/tsxTransform.ts
@@ -150,7 +150,7 @@ export type ImportInfo = {
 
 export function importInfo(importNode: T.ImportDeclaration, specifier: T.ImportSpecifier | T.ImportDefaultSpecifier, filename: string): { localName: string, info: ImportInfo } {
   const importSource = importNode.source.value;
-  const idPrefix = importSource.replace(/[^\w_\d]/g, '_');
+  const idPrefix = (importSource.startsWith('.') ? path.join(path.dirname(filename), importSource) : importSource).replace(/[^\w_\d]/g, '_');
 
   const result: ImportInfo = {
     id: idPrefix,
diff --git a/tests/playwright-test/playwright.ct-build.spec.ts b/tests/playwright-test/playwright.ct-build.spec.ts
index aa053a6d8b..c4faeaed36 100644
--- a/tests/playwright-test/playwright.ct-build.spec.ts
+++ b/tests/playwright-test/playwright.ct-build.spec.ts
@@ -121,6 +121,28 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
         await expect(component).toHaveText('Clashing name 2');
       });
     `,
+    'src/relative-import-different-folders/one/index.tsx': `
+      export default () => <button>Button</button>;
+    `,
+    'src/relative-import-different-folders/one/one.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import Button from '.';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+    'src/relative-import-different-folders/two/index.tsx': `
+      export default () => <button>Button</button>;
+    `,
+    'src/relative-import-different-folders/two/two.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import Button from '.';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
   }, { workers: 1 });
   expect(result.exitCode).toBe(0);
 
@@ -158,6 +180,14 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
     id: expect.stringContaining('defaultExport'),
     importSource: expect.stringContaining('./defaultExport'),
     filename: expect.stringContaining('default-import.spec.tsx'),
+  }, {
+    id: expect.stringContaining('_one'),
+    importSource: expect.stringContaining('.'),
+    filename: expect.stringContaining('one/one.spec.tsx'),
+  }, {
+    id: expect.stringContaining('_two'),
+    importSource: expect.stringContaining('.'),
+    filename: expect.stringContaining('two/two.spec.tsx'),
   }]);
 
   for (const [, value] of Object.entries(metainfo.deps))
@@ -184,6 +214,14 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
       expect.stringContaining('jsx-runtime.js'),
       expect.stringContaining('button.tsx'),
     ]],
+    [expect.stringContaining('one/index.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('one/index.tsx'),
+    ]],
+    [expect.stringContaining('two/index.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('two/index.tsx'),
+    ]],
   ]);
 });