fix(browser): fix browser testing url for https (#4855)

.github/workflows/ci.yml

@@ -143,6 +143,7 @@ jobs:
     strategy:
       matrix:
         browser: [[chrome, chromium], [firefox, firefox], [edge, webkit]]
+      fail-fast: false
 
     timeout-minutes: 30
 
@@ -186,6 +187,7 @@ jobs:
     strategy:
       matrix:
         browser: [[chrome, chromium], [edge, webkit]]
+      fail-fast: false
 
     timeout-minutes: 30
 

packages/vitest/src/node/logger.ts

@@ -166,7 +166,9 @@ export class Logger {
       const name = project.getName()
       const output = project.isCore() ? '' : ` [${name}]`
 
-      this.log(c.dim(c.green(`     ${output} Browser runner started at http://${project.config.browser.api?.host || 'localhost'}:${c.bold(`${project.browser.config.server.port}`)}`)))
+      const resolvedUrls = project.browser.resolvedUrls
+      const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
+      this.log(c.dim(c.green(`     ${output} Browser runner started at ${new URL('/', origin)}`)))
     })
 
     if (this.ctx.config.ui)

packages/vitest/src/node/pools/browser.ts

@@ -38,7 +38,8 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {
     const provider = project.browserProvider!
     providers.add(provider)
 
-    const origin = `http://${ctx.config.browser.api?.host || 'localhost'}:${project.browser!.config.server.port}`
+    const resolvedUrls = project.browser?.resolvedUrls
+    const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
     const paths = files.map(file => relative(project.config.root, file))
 
     if (project.config.browser.isolate) {

test/browser/fixtures/server-url/basic.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from "vitest";
+
+test("basic", () => {
+  expect(1).toBe(1);
+})

test/browser/fixtures/server-url/vitest.config.ts

@@ -0,0 +1,26 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import basicSsl from '@vitejs/plugin-basic-ssl'
+
+// test https by
+//   TEST_HTTPS=1 pnpm test-fixtures --root fixtures/server-url
+
+const provider = process.env.PROVIDER || 'webdriverio';
+const browser = process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome');
+
+export default defineConfig({
+  plugins: [
+    !!process.env.TEST_HTTPS && basicSsl(),
+  ],
+  test: {
+    browser: {
+      enabled: true,
+      provider,
+      name: browser,
+    },
+  },
+  // separate cacheDir from test/browser/vite.config.ts
+  // to prevent pre-bundling related flakiness on Webkit
+  cacheDir: path.join(path.dirname(fileURLToPath(import.meta.url)), "node_modules/.vite")
+})

test/browser/package.json

@@ -11,6 +11,7 @@
     "coverage": "vitest --coverage.enabled --coverage.provider=istanbul --browser.headless=yes"
   },
   "devDependencies": {
+    "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitest/browser": "workspace:*",
     "@vitest/cjs-lib": "link:./cjs-lib",
     "execa": "^7.1.1",

test/browser/specs/server-url.test.mjs

@@ -0,0 +1,27 @@
+import assert from 'node:assert'
+import test from 'node:test'
+import { execa } from 'execa'
+
+test('server-url http', async () => {
+  const result = await execa('npx', ['vitest', 'run', '--root=./fixtures/server-url', '--browser.headless'], {
+    env: {
+      CI: '1',
+      NO_COLOR: '1',
+    },
+  })
+  assert.match(result.stdout, /Browser runner started at http:\/\/localhost:5173\//)
+  assert.match(result.stdout, /Test Files {2}1 passed/)
+})
+
+// this test is skipped since browser warns self-signed https and it requires manual interaction.
+// you can toggle "skip" to verify it locally.
+test('server-url https', { skip: true }, async () => {
+  const result = await execa('npx', ['vitest', 'run', '--root=./fixtures/server-url'], {
+    env: {
+      NO_COLOR: '1',
+      TEST_HTTPS: '1',
+    },
+  })
+  assert.match(result.stdout, /Browser runner started at https:\/\/localhost:5173\//)
+  assert.match(result.stdout, /Test Files {2}1 passed/)
+})

test/browser/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "rootDir": ".",
-    "module": "node16",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "paths": {
       "#src/*": ["./src/*"]
     },