From 2032b64ee67d884abdf8abc83a0de4138e1f6487 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Wed, 27 Sep 2023 01:32:51 +0200
Subject: [PATCH] feat(ct): allow baseUrl and host config (#27295)

closes: https://github.com/microsoft/playwright/issues/27283
---
 packages/playwright-ct-core/src/vitePlugin.ts |  6 +-
 .../playwright.ct-react.spec.ts               | 89 +++++++++++++++++++
 2 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-ct-core/src/vitePlugin.ts b/packages/playwright-ct-core/src/vitePlugin.ts
index 2e76559025..3fd8d13211 100644
--- a/packages/playwright-ct-core/src/vitePlugin.ts
+++ b/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}`;
       }
     },
 
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index 6ce7774565..4be0a43925 100644
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/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);
+});