feat(browser): rename none provider to preview, make it default (#5826)

Author: sheremet-va

docs/guide/browser.md

@@ -8,7 +8,7 @@ This page provides information about the experimental browser mode feature in th
 
 ## Installation
 
-By default, Browser Mode doesn't require any provider to run tests locally because it reuses your existing browser.
+By default, Browser Mode doesn't require any additional E2E provider to run tests locally because it reuses your existing browser.
 
 ::: code-group
 ```bash [npm]
@@ -26,7 +26,7 @@ bun add -D vitest @vitest/browser
 :::
 
 ::: warning
-However, to run tests in CI you need to install either [`playwright`](https://npmjs.com/package/playwright) or [`webdriverio`](https://www.npmjs.com/package/webdriverio). We also recommend switching to either one of them for testing locally instead of using the default `none` provider since it relies on simulating events instead of using Chrome DevTools Protocol.
+However, to run tests in CI you need to install either [`playwright`](https://npmjs.com/package/playwright) or [`webdriverio`](https://www.npmjs.com/package/webdriverio). We also recommend switching to either one of them for testing locally instead of using the default `preview` provider since it relies on simulating events instead of using Chrome DevTools Protocol.
 :::
 
 ### Using Playwright
@@ -208,7 +208,7 @@ export const server: {
 
 /**
  * Handler for user interactions. The support is provided by the browser provider (`playwright` or `webdriverio`).
- * If used with `none` provider, fallbacks to simulated events via `@testing-library/user-event`.
+ * If used with `preview` provider, fallbacks to simulated events via `@testing-library/user-event`.
  * @experimental
  */
 export const userEvent: {

examples/lit/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
     browser: {
       enabled: true,
       name: 'chrome',
+      provider: 'webdriverio',
     },
   },
 })

packages/browser/context.d.ts

@@ -88,7 +88,7 @@ export const server: {
 
 /**
  * Handler for user interactions. The support is provided by the browser provider (`playwright` or `webdriverio`).
- * If used with `none` provider, fallbacks to simulated events via `@testing-library/user-event`.
+ * If used with `preview` provider, fallbacks to simulated events via `@testing-library/user-event`.
  * @experimental
  */
 export const userEvent: UserEvent

packages/browser/providers.d.ts

@@ -1,7 +1,7 @@
-import type { BrowserProvider } from 'vitest/node'
+import type { BrowserProviderModule } from 'vitest/node'
 
-declare const webdriverio: BrowserProvider
-declare const playwright: BrowserProvider
-declare const none: BrowserProvider
+declare const webdriverio: BrowserProviderModule
+declare const playwright: BrowserProviderModule
+declare const preview: BrowserProviderModule
 
-export { webdriverio, playwright, none }
+export { webdriverio, playwright, preview }

packages/browser/src/node/plugins/pluginContext.ts

@@ -116,7 +116,7 @@ function getPathTo(element) {
 }
 
 async function getUserEventImport(provider: BrowserProvider, resolve: (id: string, importer: string) => Promise<null | { id: string }>) {
-  if (provider.name !== 'none')
+  if (provider.name !== 'preview')
     return ''
   const resolved = await resolve('@testing-library/user-event', __dirname)
   if (!resolved)
@@ -125,7 +125,7 @@ async function getUserEventImport(provider: BrowserProvider, resolve: (id: strin
 }
 
 function getUserEventScript(project: WorkspaceProject) {
-  if (project.browserProvider?.name === 'none')
+  if (project.browserProvider?.name === 'preview')
     return `__vitest_user_event__`
   return `{
   async click(element, options) {

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

@@ -1,7 +1,7 @@
 import { PlaywrightBrowserProvider } from './playwright'
 import { WebdriverBrowserProvider } from './webdriver'
-import { NoneBrowserProvider } from './none'
+import { PreviewBrowserProvider } from './preview'
 
 export const webdriverio = WebdriverBrowserProvider
 export const playwright = PlaywrightBrowserProvider
-export const none = NoneBrowserProvider
+export const preview = PreviewBrowserProvider

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

@@ -1,7 +1,7 @@
 import type { BrowserProvider, WorkspaceProject } from 'vitest/node'
 
-export class NoneBrowserProvider implements BrowserProvider {
-  public name = 'none'
+export class PreviewBrowserProvider implements BrowserProvider {
+  public name = 'preview'
   private ctx!: WorkspaceProject
   private open = false
 
@@ -18,7 +18,7 @@ export class NoneBrowserProvider implements BrowserProvider {
     this.ctx = ctx
     this.open = false
     if (ctx.config.browser.headless)
-      throw new Error('You\'ve enabled headless mode for "none" provider but it doesn\'t support it.')
+      throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it.')
   }
 
   async openPage(_url: string) {

packages/vitest/src/integrations/browser.ts

@@ -1,17 +1,13 @@
 import type { WorkspaceProject } from '../node/workspace'
 import type { BrowserProviderModule, ResolvedBrowserOptions } from '../types/browser'
 
-const builtinProviders = ['webdriverio', 'playwright', 'none']
+const builtinProviders = ['webdriverio', 'playwright', 'preview']
 
 export async function getBrowserProvider(options: ResolvedBrowserOptions, project: WorkspaceProject): Promise<BrowserProviderModule> {
   if (options.provider == null || builtinProviders.includes(options.provider)) {
     await project.ctx.packageInstaller.ensureInstalled('@vitest/browser', project.config.root)
-    const providers = await project.runner.executeId('@vitest/browser/providers') as {
-      webdriverio: BrowserProviderModule
-      playwright: BrowserProviderModule
-      none: BrowserProviderModule
-    }
-    const provider = (options.provider || 'webdriverio') as 'webdriverio' | 'playwright' | 'none'
+    const providers = await project.runner.executeId('@vitest/browser/providers') as typeof import('@vitest/browser/providers')
+    const provider = (options.provider || 'preview') as 'webdriverio' | 'playwright' | 'preview'
     return providers[provider]
   }
 

packages/vitest/src/node/cli/cli-config.ts

@@ -332,7 +332,7 @@ export const cliOptionsConfig: VitestCLIOptions = {
         subcommands: apiConfig(defaultBrowserPort),
       },
       provider: {
-        description: 'Provider used to run browser tests. Some browsers are only available for specific providers. Can be "webdriverio", "playwright", or the path to a custom provider. Visit [`browser.provider`](https://vitest.dev/config/#browser-provider) for more information (default: `"webdriverio"`)',
+        description: 'Provider used to run browser tests. Some browsers are only available for specific providers. Can be "webdriverio", "playwright", "preview", or the path to a custom provider. Visit [`browser.provider`](https://vitest.dev/config/#browser-provider) for more information (default: `"preview"`)',
         argument: '<name>',
         subcommands: null, // don't support custom objects
       },

packages/vitest/src/types/browser.ts

@@ -41,9 +41,9 @@ export interface BrowserConfigOptions {
   /**
    * Browser provider
    *
-   * @default 'webdriverio'
+   * @default 'preview'
    */
-  provider?: 'webdriverio' | 'playwright' | 'none' | (string & {})
+  provider?: 'webdriverio' | 'playwright' | 'preview' | (string & {})
 
   /**
    * Options that are passed down to a browser provider.

test/browser/fixtures/mocking/vitest.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
       provider,
       name,
       headless: true,
-      fileParallelism: false,
     },
   },
 })

test/config/fixtures/bail/vitest.config.ts

@@ -30,6 +30,7 @@ export default defineConfig({
     browser: {
       headless: true,
       name: 'chrome',
+      provider: 'webdriverio',
     },
   },
 })