fix(service): open the dashboard over WebDriver, not the devtools protocol

.changeset/open-the-dashboard-over-webdriver.md

@@ -0,0 +1,5 @@
+---
+'@wdio/devtools-service': patch
+---
+
+Open the dashboard window over WebDriver and stop requiring the `devtools` package. The launcher opened it with `automationProtocol: 'devtools'`, which loads the `devtools` package. The service listed `devtools` `^8.42.0` as a peer, so npm installed it and an old Puppeteer into every project, and on WebdriverIO 10 the dashboard window failed to open when it was absent (`Couldn't find automation protocol "devtools"`). The window now opens through chromedriver, the same way the test sessions do, still without the "controlled by automated test software" bar, and `devtools` is no longer a peer.

packages/service/package.json

@@ -78,7 +78,6 @@
     "@wdio/protocols": "^9.30.1 || ^10.0.0",
     "@wdio/reporter": "^9.19.1 || ^10.0.0",
     "@wdio/types": "^9.19.1 || ^10.0.0",
-    "devtools": "^8.42.0",
     "webdriverio": "^9.19.1 || ^10.0.0"
   },
   "peerDependenciesMeta": {

packages/service/src/constants.ts

@@ -50,23 +50,18 @@ export {
   LOG_SOURCES
 } from '@wdio/devtools-core'
 
-// The dashboard launches via the Puppeteer-based 'devtools' protocol, so the
-// "controlled by automated test software" infobar (added by Puppeteer's
-// --enable-automation default) is removed via ignoreDefaultArgs, not
-// chromedriver's excludeSwitches. `wdio:devtoolsOptions` is honored at runtime
-// but isn't in this WebdriverIO.Capabilities type, hence the assertion.
-export const DEFAULT_LAUNCH_CAPS = {
+// The dashboard opens over WebDriver; excludeSwitches drops chromedriver's
+// "controlled by automated test software" infobar.
+export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = {
   browserName: 'chrome',
   'goog:chromeOptions': {
+    excludeSwitches: ['enable-automation'],
     // production:
     args: ['--window-size=1600,1200']
     // development:
     // args: ['--window-size=1600,1200', '--auto-open-devtools-for-tabs']
-  },
-  'wdio:devtoolsOptions': {
-    ignoreDefaultArgs: ['--enable-automation']
   }
-} as WebdriverIO.Capabilities
+}
 
 export const INTERNAL_COMMANDS = [
   'emit',

packages/service/src/launcher.ts

@@ -146,7 +146,6 @@ export class DevToolsAppLauncher {
         hostname: this.#options.hostname || 'localhost'
       })
       this.#browser = await remote({
-        automationProtocol: 'devtools',
         capabilities: {
           ...DEFAULT_LAUNCH_CAPS,
           ...this.#options.devtoolsCapabilities
@@ -160,7 +159,7 @@ export class DevToolsAppLauncher {
 
   async onComplete() {
     if (this.#browser) {
-      logger.setLevel('devtools', 'warn')
+      logger.setLevel('webdriver', 'warn')
       log.info('Please close the browser window to finish...')
       while (true) {
         try {

packages/service/tests/launcher.test.ts

@@ -212,11 +212,34 @@ describe('DevToolsAppLauncher', () => {
 
       expect(remote).toHaveBeenCalledWith(
         expect.objectContaining({
-          automationProtocol: 'devtools',
           capabilities: expect.objectContaining(customCaps)
         })
       )
     })
+
+    it('opens the dashboard over WebDriver, which needs no `devtools` package', async () => {
+      vi.mocked(backend.start).mockResolvedValue({
+        server: mockServer,
+        port: 3000
+      } as any)
+      vi.mocked(remote).mockResolvedValue(mockBrowser as any)
+
+      const launcher = new DevToolsAppLauncher({ port: 3000 })
+      await launcher.onPrepare(
+        undefined as never,
+        [{ browserName: 'chrome' }] as any
+      )
+
+      const [params] = vi.mocked(remote).mock.calls[0]
+      expect(params).not.toHaveProperty('automationProtocol')
+      expect(params.capabilities).toEqual(
+        expect.objectContaining({
+          'goog:chromeOptions': expect.objectContaining({
+            excludeSwitches: ['enable-automation']
+          })
+        })
+      )
+    })
   })
 
   describe('onComplete', () => {