feat(ct): https (#19697)

package.json

@@ -66,6 +66,7 @@
     "@types/xml2js": "^0.4.9",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^3.0.0",
     "@zip.js/zip.js": "^2.4.2",
     "ansi-to-html": "^0.7.2",

packages/playwright-test/src/plugins/vitePlugin.ts

@@ -94,7 +94,7 @@ export function createPlugin(
       const sourcesDirty = !buildExists || hasNewComponents || await checkSources(buildInfo);
 
       viteConfig.root = rootDir;
-      viteConfig.preview = { port };
+      viteConfig.preview = { port, ...viteConfig.preview };
       viteConfig.build = {
         outDir
       };
@@ -152,9 +152,10 @@ export function createPlugin(
       stoppableServer = stoppable(previewServer.httpServer, 0);
       const isAddressInfo = (x: any): x is AddressInfo => x?.address;
       const address = previewServer.httpServer.address();
-      if (isAddressInfo(address))
-        process.env.PLAYWRIGHT_TEST_BASE_URL = `http://localhost:${address.port}`;
-
+      if (isAddressInfo(address)) {
+        const protocol = viteConfig.preview.https ? 'https:' : 'http:';
+        process.env.PLAYWRIGHT_TEST_BASE_URL = `${protocol}//localhost:${address.port}`;
+      }
     },
 
     teardown: async () => {

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

@@ -296,4 +296,36 @@ test('should not use global config for preview', async ({ runInlineTest }) => {
   const result2 = await runInlineTest({}, { workers: 1 });
   expect(result2.exitCode).toBe(0);
   expect(result2.passed).toBe(1);
-});
+});
+
+test('should work with https enabled', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright/index.html': `<script type="module" src="./index.js"></script>`,
+    'playwright/index.js': `//@no-header`,
+    'playwright.config.js': `
+      //@no-header
+      import basicSsl from '@vitejs/plugin-basic-ssl';
+      export default {
+        use: {
+          ignoreHTTPSErrors: true,
+          ctViteConfig: {
+            plugins: [basicSsl()],
+            preview: {
+              https: true
+            }
+          }
+        },
+      };
+    `,
+    'http.test.tsx': `
+      //@no-header
+      import { test, expect } from '@playwright/experimental-ct-react';
+
+      test('pass', async ({ page }) => {
+        await expect(page).toHaveURL(/https:.*/);
+      });
+    `,
+  }, { workers: 1 });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});