feat(browser): support --inspect option in webdriverio (#8613)

Author: sheremet-va

packages/browser/src/node/pool.ts

@@ -356,6 +356,12 @@ class BrowserPool {
     }
 
     const provider = this.project.browser!.provider
+    const browser = this.project.config.browser.name
+
+    if (shouldIgnoreDebugger(provider.name, browser)) {
+      debug?.('[$s] ignoring debugger in %s browser because it is not supported', sessionId, browser)
+      return
+    }
 
     if (!provider.getCDPSession) {
       throw new Error('Unable to set breakpoint, CDP not supported')
@@ -370,3 +376,10 @@ class BrowserPool {
     })
   }
 }
+
+function shouldIgnoreDebugger(provider: string, browser: string) {
+  if (provider === 'webdriverio') {
+    return browser !== 'chrome' && browser !== 'edge'
+  }
+  return browser !== 'chromium'
+}

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

@@ -112,10 +112,10 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
       }
       const promises = []
       for (const [trace, contextId] of this.pendingTraces.entries()) {
-        promises.push(() => {
+        promises.push((() => {
           const context = this.contexts.get(contextId)
           return context?.tracing.stopChunk({ path: trace })
-        })
+        })())
       }
       return Promise.allSettled(promises)
     })
@@ -162,10 +162,11 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
         launchOptions.tracesDir = options.trace?.tracesDir
       }
 
-      if (this.project.config.inspector.enabled) {
+      const inspector = this.project.vitest.config.inspector
+      if (inspector.enabled) {
         // NodeJS equivalent defaults: https://nodejs.org/en/learn/getting-started/debugging#enable-inspector
-        const port = this.project.config.inspector.port || 9229
-        const host = this.project.config.inspector.host || '127.0.0.1'
+        const port = inspector.port || 9229
+        const host = inspector.host || '127.0.0.1'
 
         launchOptions.args ||= []
         launchOptions.args.push(`--remote-debugging-port=${port}`)

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

@@ -6,6 +6,7 @@ import type { Capabilities } from '@wdio/types'
 import type {
   BrowserProvider,
   BrowserProviderOption,
+  CDPSession,
   TestProject,
 } from 'vitest/node'
 import type { ClickOptions, DragAndDropOptions, remote } from 'webdriverio'
@@ -191,6 +192,26 @@ export class WebdriverBrowserProvider implements BrowserProvider {
       capabilities[key]!.args = args
     }
 
+    const inspector = this.project.vitest.config.inspector
+    if (inspector.enabled && (browser === 'chrome' || browser === 'edge')) {
+      const key = browser === 'chrome'
+        ? 'goog:chromeOptions'
+        : 'ms:edgeOptions'
+      const args = capabilities[key]?.args || []
+
+      // NodeJS equivalent defaults: https://nodejs.org/en/learn/getting-started/debugging#enable-inspector
+      const port = inspector.port || 9229
+      const host = inspector.host || '127.0.0.1'
+
+      args.push(`--remote-debugging-port=${port}`)
+      args.push(`--remote-debugging-address=${host}`)
+
+      this.project.vitest.logger.log(`Debugger listening on ws://${host}:${port}`)
+
+      capabilities[key] ??= {}
+      capabilities[key]!.args = args
+    }
+
     return capabilities
   }
 
@@ -226,6 +247,28 @@ export class WebdriverBrowserProvider implements BrowserProvider {
     browser.sessionId = undefined as unknown as string
     this.browser = null
   }
+
+  async getCDPSession(_sessionId: string): Promise<CDPSession> {
+    return {
+      send: (method: string, params: any) => {
+        if (!this.browser) {
+          throw new Error(`The environment was torn down.`)
+        }
+        return this.browser.sendCommandAndGetResult(method, params ?? {}).catch((error) => {
+          return Promise.reject(new Error(`Failed to execute "${method}" command.`, { cause: error }))
+        })
+      },
+      on: () => {
+        throw new Error(`webdriverio provider doesn't support cdp.on()`)
+      },
+      once: () => {
+        throw new Error(`webdriverio provider doesn't support cdp.once()`)
+      },
+      off: () => {
+        throw new Error(`webdriverio provider doesn't support cdp.off()`)
+      },
+    }
+  }
 }
 
 declare module 'vitest/node' {

packages/vitest/src/node/config/resolveConfig.ts

@@ -271,10 +271,11 @@ export function resolveConfig(
     }
   }
 
-  const playwrightChromiumOnly = isPlaywrightChromiumOnly(vitest, resolved)
+  const containsChromium = hasBrowserChromium(vitest, resolved)
+  const hasOnlyChromium = hasOnlyBrowserChromium(vitest, resolved)
 
-  // Browser-mode "Playwright + Chromium" only features:
-  if (browser.enabled && !playwrightChromiumOnly) {
+  // Browser-mode "Chromium" only features:
+  if (browser.enabled && (!containsChromium || !hasOnlyChromium)) {
     const browserConfig = `
 {
   browser: {
@@ -286,18 +287,23 @@ export function resolveConfig(
 }
     `.trim()
 
+    const preferredProvider = (!browser.provider?.name || browser.provider.name === 'preview')
+      ? 'playwright'
+      : browser.provider.name
+    const preferredBrowser = preferredProvider === 'playwright' ? 'chromium' : 'chrome'
     const correctExample = `
 {
   browser: {
-    provider: playwright(),
+    provider: ${preferredProvider}(),
     instances: [
-      { browser: 'chromium' }
+      { browser: '${preferredBrowser}' }
     ],
   },
 }
     `.trim()
 
-    if (resolved.coverage.enabled && resolved.coverage.provider === 'v8') {
+    // requires all projects to be chromium
+    if (!hasOnlyChromium && resolved.coverage.enabled && resolved.coverage.provider === 'v8') {
       const coverageExample = `
 {
   coverage: {
@@ -313,7 +319,8 @@ export function resolveConfig(
       )
     }
 
-    if (resolved.inspect || resolved.inspectBrk) {
+    // ignores non-chromium browsers when there is at least one chromium project
+    if (!containsChromium && (resolved.inspect || resolved.inspectBrk)) {
       const inspectOption = `--inspect${resolved.inspectBrk ? '-brk' : ''}`
 
       throw new Error(
@@ -846,26 +853,51 @@ export function resolveCoverageReporters(configReporters: NonNullable<BaseCovera
   return resolvedReporters
 }
 
-function isPlaywrightChromiumOnly(vitest: Vitest, config: ResolvedConfig) {
+function isChromiumName(provider: string, name: string) {
+  if (provider === 'playwright') {
+    return name === 'chromium'
+  }
+  return name === 'chrome' || name === 'edge'
+}
+
+function hasBrowserChromium(vitest: Vitest, config: ResolvedConfig) {
   const browser = config.browser
-  if (!browser || !browser.provider || browser.provider.name !== 'playwright' || !browser.enabled) {
+  if (!browser || !browser.provider || browser.provider.name === 'preview' || !browser.enabled) {
     return false
   }
   if (browser.name) {
-    return browser.name === 'chromium'
+    return isChromiumName(browser.provider.name, browser.name)
   }
   if (!browser.instances) {
     return false
   }
-  for (const instance of browser.instances) {
+  return browser.instances.some((instance) => {
     const name = instance.name || (config.name ? `${config.name} (${instance.browser})` : instance.browser)
     // browser config is filtered out
     if (!vitest.matchesProjectFilter(name)) {
-      continue
-    }
-    if (instance.browser !== 'chromium') {
       return false
     }
+    return isChromiumName(browser.provider!.name, instance.browser)
+  })
+}
+
+function hasOnlyBrowserChromium(vitest: Vitest, config: ResolvedConfig) {
+  const browser = config.browser
+  if (!browser || !browser.provider || browser.provider.name === 'preview' || !browser.enabled) {
+    return false
   }
-  return true
+  if (browser.name) {
+    return isChromiumName(browser.provider.name, browser.name)
+  }
+  if (!browser.instances) {
+    return false
+  }
+  return browser.instances.every((instance) => {
+    const name = instance.name || (config.name ? `${config.name} (${instance.browser})` : instance.browser)
+    // browser config is filtered out
+    if (!vitest.matchesProjectFilter(name)) {
+      return true // ignore this project
+    }
+    return isChromiumName(browser.provider!.name, instance.browser)
+  })
 }

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

@@ -1,4 +1,4 @@
-import { playwright } from '@vitest/browser/providers/playwright';
+import { provider } from '../../settings'
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
@@ -7,8 +7,10 @@ export default defineConfig({
     watch: false,
     browser: {
       enabled: true,
-      provider: playwright(),
-      instances: [{ browser: "chromium" }],
+      provider,
+      instances: [
+        { browser: provider.name === 'webdriverio' ? "chrome" : "chromium" },
+      ],
       headless: true,
     },
   },

test/browser/fixtures/inspect/vitest.config.with-workspace.ts

@@ -1,5 +1,5 @@
-import { playwright } from '@vitest/browser/providers/playwright';
 import { defineConfig } from "vitest/config";
+import { provider } from '../../settings'
 
 export default defineConfig({
   server: { port: 5199 },
@@ -11,10 +11,12 @@ export default defineConfig({
         test: {
           name: "Browser in workspace",
           browser: {
-            provider: playwright(),
+            provider,
             enabled: true,
             headless: true,
-            instances: [{ browser: "chromium" }]
+            instances: [
+              { browser: provider.name === 'webdriverio' ? "chrome" : "chromium" },
+            ],
           },
         },
       },

test/browser/specs/inspect.test.ts

@@ -6,10 +6,9 @@ import { runVitestCli } from '../../test-utils'
 
 type Message = Partial<InspectorNotification<any>>
 
-const IS_PLAYWRIGHT = process.env.PROVIDER === 'playwright'
 const REMOTE_DEBUG_URL = '127.0.0.1:9123'
 
-test.runIf(IS_PLAYWRIGHT || !process.env.CI).each(['', 'with workspace'])('--inspect-brk stops at test file %s', async (isWorkspace) => {
+test.each(['', 'with workspace'])('--inspect-brk stops at test file %s', async (isWorkspace) => {
   const options = ['--root', 'fixtures/inspect', '--no-file-parallelism', '--inspect-brk', REMOTE_DEBUG_URL]
 
   if (isWorkspace) {