feat(ct): allow baseUrl and host config (#27295)

closes: https://github.com/microsoft/playwright/issues/27283

packages/playwright-ct-core/src/vitePlugin.ts

@@ -70,6 +70,7 @@ export function createPlugin(
 
       const use = config.projects[0].use as CtConfig;
       const port = use.ctPort || 3100;
+      const host = use.baseURL || 'localhost';
       const relativeTemplateDir = use.ctTemplateDir || 'playwright';
 
       // FIXME: use build plugin to determine html location to resolve this.
@@ -91,7 +92,8 @@ export function createPlugin(
           outDir: use.ctCacheDir ? path.resolve(configDir, use.ctCacheDir) : path.resolve(templateDir, '.cache')
         },
         preview: {
-          port
+          port,
+          host,
         },
         // Vite preview server will otherwise always return the index.html with 200.
         appType: 'custom',
@@ -209,7 +211,7 @@ export function createPlugin(
       const address = previewServer.httpServer.address();
       if (isAddressInfo(address)) {
         const protocol = finalConfig.preview.https ? 'https:' : 'http:';
-        process.env.PLAYWRIGHT_TEST_BASE_URL = `${protocol}//localhost:${address.port}`;
+        process.env.PLAYWRIGHT_TEST_BASE_URL = `${protocol}//${finalConfig.preview.host}:${address.port}`;
       }
     },
 

tests/playwright-test/playwright.ct-react.spec.ts

@@ -372,3 +372,92 @@ test('should work with property expressions in JSX', async ({ runInlineTest }) =
   expect(result.exitCode).toBe(0);
   expect(result.passed).toBe(2);
 });
+
+test('should handle the baseUrl config', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      import { defineConfig } from '@playwright/experimental-ct-react';
+      export default defineConfig({ use: { baseURL: '127.0.0.1' } });
+    `,
+    'playwright/index.html': `<script type="module" src="./index.js"></script>`,
+    'playwright/index.js': ``,
+
+    'src/component.jsx': `
+      export const Component = () => <></>;
+    `,
+
+    'src/component.test.jsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Component } from './component';
+
+      test('pass component', async ({ page, mount }) => {
+        const component = await mount(<Component />);
+        await expect(page).toHaveURL('http://127.0.0.1:3100/');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should handle the vite host config', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      import { defineConfig } from '@playwright/experimental-ct-react';
+      export default defineConfig({ use: { ctViteConfig: { preview: { host: '127.0.0.1' } } } });
+    `,
+    'playwright/index.html': `<script type="module" src="./index.js"></script>`,
+    'playwright/index.js': ``,
+
+    'src/component.jsx': `
+      export const Component = () => <></>;
+    `,
+
+    'src/component.test.jsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Component } from './component';
+
+      test('pass component', async ({ page, mount }) => {
+        const component = await mount(<Component />);
+        await expect(page).toHaveURL('http://127.0.0.1:3100/');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should prioritize the vite host config over the baseUrl config', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      import { defineConfig } from '@playwright/experimental-ct-react';
+      export default defineConfig({
+        use: {
+          baseURL: 'localhost',
+          ctViteConfig: { preview: { host: '127.0.0.1' } }
+        },
+      });
+    `,
+    'playwright/index.html': `<script type="module" src="./index.js"></script>`,
+    'playwright/index.js': ``,
+
+    'src/component.jsx': `
+      export const Component = () => <></>;
+    `,
+
+    'src/component.test.jsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Component } from './component';
+
+      test('pass component', async ({ page, mount }) => {
+        const component = await mount(<Component />);
+        await expect(page).toHaveURL('http://127.0.0.1:3100/');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});