fix(browser): init browsers eagerly when tests are running

packages/browser/src/node/pool.ts

@@ -126,6 +126,7 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {
       if (isCancelled) {
         break
       }
+      await project.initBrowserProvider()
 
       await executeTests(method, project, files)
     }

packages/browser/src/node/providers/preview.ts

@@ -3,7 +3,7 @@ import type { BrowserProvider, WorkspaceProject } from 'vitest/node'
 export class PreviewBrowserProvider implements BrowserProvider {
   public name = 'preview' as const
   public supportsParallelism: boolean = false
-  private ctx!: WorkspaceProject
+  private project!: WorkspaceProject
   private open = false
 
   getSupportedBrowsers() {
@@ -19,25 +19,26 @@ export class PreviewBrowserProvider implements BrowserProvider {
     return {}
   }
 
-  async initialize(ctx: WorkspaceProject) {
-    this.ctx = ctx
+  async initialize(project: WorkspaceProject) {
+    this.project = project
     this.open = false
-    if (ctx.config.browser.headless) {
+    if (project.config.browser.headless) {
       throw new Error(
         'You\'ve enabled headless mode for "preview" provider but it doesn\'t support it. Use "playwright" or "webdriverio" instead: https://vitest.dev/guide/browser/#configuration',
       )
     }
+    project.ctx.logger.printBrowserBanner(project)
   }
 
   async openPage(_contextId: string, url: string) {
     this.open = true
-    if (!this.ctx.browser) {
+    if (!this.project.browser) {
       throw new Error('Browser is not initialized')
     }
-    const options = this.ctx.browser.vite.config.server
+    const options = this.project.browser.vite.config.server
     const _open = options.open
     options.open = url
-    this.ctx.browser.vite.openBrowser()
+    this.project.browser.vite.openBrowser()
     options.open = _open
   }
 

packages/vitest/src/node/core.ts

@@ -295,10 +295,6 @@ export class Vitest {
     return this.coverageProvider
   }
 
-  private async initBrowserProviders() {
-    return Promise.all(this.projects.map(w => w.initBrowserProvider()))
-  }
-
   async mergeReports() {
     if (this.reporters.some(r => r instanceof BlobReporter)) {
       throw new Error('Cannot merge reports when `--reporter=blob` is used. Remove blob reporter from the config first.')
@@ -361,8 +357,6 @@ export class Vitest {
   async collect(filters?: string[]) {
     this._onClose = []
 
-    await this.initBrowserProviders()
-
     const files = await this.filterTestsBySource(
       await this.globTestFiles(filters),
     )
@@ -394,7 +388,6 @@ export class Vitest {
     try {
       await this.initCoverageProvider()
       await this.coverageProvider?.clean(this.config.coverage.clean)
-      await this.initBrowserProviders()
     }
     finally {
       await this.report('onInit', this)
@@ -437,7 +430,6 @@ export class Vitest {
     try {
       await this.initCoverageProvider()
       await this.coverageProvider?.clean(this.config.coverage.clean)
-      await this.initBrowserProviders()
     }
     finally {
       await this.report('onInit', this)
@@ -685,6 +677,10 @@ export class Vitest {
     await Promise.all(this._onCancelListeners.splice(0).map(listener => listener(reason)))
   }
 
+  async initBrowserServers() {
+    await Promise.all(this.projects.map(p => p.initBrowserServer()))
+  }
+
   async rerunFiles(files: string[] = this.state.getFilepaths(), trigger?: string, allTestsRun = true) {
     if (this.filenamePattern) {
       const filteredFiles = await this.globTestFiles([this.filenamePattern])

packages/vitest/src/node/logger.ts

@@ -12,7 +12,7 @@ import { createLogUpdate } from 'log-update'
 import c from 'tinyrainbow'
 import { highlightCode } from '../utils/colors'
 import { printError } from './error'
-import { divider } from './reporters/renderers/utils'
+import { divider, formatProjectName } from './reporters/renderers/utils'
 import { RandomSequencer } from './sequencers/RandomSequencer'
 
 export interface ErrorOptions {
@@ -220,26 +220,6 @@ export class Logger {
       )
     }
 
-    this.ctx.projects.forEach((project) => {
-      if (!project.browser) {
-        return
-      }
-      const name = project.getName()
-      const output = project.isCore() ? '' : ` [${name}]`
-
-      const resolvedUrls = project.browser.vite.resolvedUrls
-      const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
-      const provider = project.browser.provider.name
-      const providerString = provider === 'preview' ? '' : ` by ${provider}`
-      this.log(
-        c.dim(
-          c.green(
-            `     ${output} Browser runner started${providerString} at ${new URL('/', origin)}`,
-          ),
-        ),
-      )
-    })
-
     if (this.ctx.config.ui) {
       this.log(
         c.dim(
@@ -283,6 +263,30 @@ export class Logger {
     }
   }
 
+  printBrowserBanner(project: WorkspaceProject) {
+    if (!project.browser) {
+      return
+    }
+
+    const resolvedUrls = project.browser.vite.resolvedUrls
+    const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
+    if (!origin) {
+      return
+    }
+
+    const name = project.getName()
+    const output = project.isCore()
+      ? ''
+      : formatProjectName(name)
+    const provider = project.browser.provider.name
+    const providerString = provider === 'preview' ? '' : ` by ${c.reset(c.bold(provider))}`
+    this.log(
+      c.dim(
+        `${output}Browser runner started${providerString} ${c.dim('at')} ${c.blue(new URL('/', origin))}\n`,
+      ),
+    )
+  }
+
   printUnhandledErrors(errors: unknown[]) {
     const errorMessage = c.red(
       c.bold(

packages/vitest/src/node/stdin.ts

@@ -18,6 +18,7 @@ const keys = [
   ['p', 'filter by a filename'],
   ['t', 'filter by a test name regex pattern'],
   ['w', 'filter by a project name'],
+  ['b', 'start the browser server if not started yet'],
   ['q', 'quit'],
 ]
 const cancelKeys = ['space', 'c', 'h', ...keys.map(key => key[0]).flat()]
@@ -120,6 +121,14 @@ export function registerConsoleShortcuts(
     if (name === 'p') {
       return inputFilePattern()
     }
+    if (name === 'b') {
+      await ctx.initBrowserServers()
+      ctx.projects.forEach((project) => {
+        ctx.logger.log()
+        ctx.logger.printBrowserBanner(project)
+      })
+      return null
+    }
   }
 
   async function keypressHandler(str: string, key: any) {

packages/vitest/src/node/workspace.ts

@@ -358,16 +358,15 @@ export class WorkspaceProject {
     return testFiles
   }
 
-  async initBrowserServer(configFile: string | undefined) {
-    if (!this.isBrowserEnabled()) {
+  async initBrowserServer() {
+    if (!this.isBrowserEnabled() || this.browser) {
       return
     }
     await this.ctx.packageInstaller.ensureInstalled('@vitest/browser', this.config.root, this.ctx.version)
     const { createBrowserServer, distRoot } = await import('@vitest/browser')
-    await this.browser?.close()
     const browser = await createBrowserServer(
       this,
-      configFile,
+      this.server.config.configFile,
       [
         ...MocksPlugins({
           filter(id) {
@@ -408,9 +407,7 @@ export class WorkspaceProject {
   }
 
   static async createCoreProject(ctx: Vitest) {
-    const project = WorkspaceProject.createBasicProject(ctx)
-    await project.initBrowserServer(ctx.server.config.configFile)
-    return project
+    return WorkspaceProject.createBasicProject(ctx)
   }
 
   async setServer(options: UserConfig, server: ViteDevServer) {
@@ -449,7 +446,7 @@ export class WorkspaceProject {
       },
     })
 
-    await this.initBrowserServer(this.server.config.configFile)
+    await this.initBrowserServer()
   }
 
   isBrowserEnabled(): boolean {
@@ -494,9 +491,12 @@ export class WorkspaceProject {
   }
 
   async initBrowserProvider() {
-    if (!this.isBrowserEnabled()) {
+    if (!this.isBrowserEnabled() || this.browser?.provider) {
       return
     }
+    if (!this.browser) {
+      await this.initBrowserServer()
+    }
     await this.browser?.initBrowserProvider()
   }
 }