launch devtools application as part of launcher service

Author: christian-bromann

example/package.json

@@ -2,12 +2,12 @@
   "name": "examples",
   "type": "module",
   "devDependencies": {
-    "@wdio/cli": "8.23.0",
-    "@wdio/cucumber-framework": "^8.23.0",
-    "@wdio/local-runner": "^8.23.0",
-    "@wdio/spec-reporter": "^8.23.0",
+    "@wdio/cli": "8.24.16",
+    "@wdio/cucumber-framework": "^8.24.13",
+    "@wdio/local-runner": "^8.24.12",
+    "@wdio/spec-reporter": "^8.24.12",
     "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "wdio": "wdio run ./wdio.conf.ts"

example/wdio.conf.ts

@@ -1,5 +1,6 @@
 import type { Options } from '@wdio/types'
 import { DevToolsHookService } from '../packages/hook/dist/index.js'
+import { DevToolsAppLauncher } from '../packages/hook/dist/launcher.js'
 
 export const config: Options.Testrunner = {
     //
@@ -119,7 +120,10 @@ export const config: Options.Testrunner = {
     // Services take over a specific job you don't want to take care of. They enhance
     // your test setup with almost no effort. Unlike plugins, they don't add new
     // commands. Instead, they hook themselves up into the test process.
-    services: [[DevToolsHookService, {}]],
+    services: [
+      [DevToolsHookService, {}],
+      [DevToolsAppLauncher, {}]
+    ],
     //
     // Framework you want to run your specs with.
     // The following are supported: Mocha, Jasmine, and Cucumber

package.json

@@ -2,8 +2,9 @@
   "name": "devtools-monorepo",
   "type": "module",
   "scripts": {
-    "dev": "pnpm --parallel dev",
     "build": "pnpm --parallel build",
+    "demo": "wdio run ./example/wdio.conf.ts",
+    "dev": "pnpm --parallel dev",
     "preview": "pnpm --parallel preview",
     "test": "pnpm --parallel test",
     "watch": "pnpm build --watch"

packages/app/package.json

@@ -16,7 +16,6 @@
     "@codemirror/view": "^6.22.0",
     "@iconify-json/mdi": "^1.1.54",
     "@lit/context": "^1.0.1",
-    "@wdio/devtools-hook": "workspace:^",
     "@wdio/protocols": "^8.23.0",
     "codemirror": "^6.0.1",
     "lit": "^2.7.6",

packages/backend/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@fastify/static": "^6.12.0",
     "@wdio/devtools-app": "workspace:^",
+    "@wdio/logger": "^8.24.12",
     "fastify": "^4.24.3",
     "get-port": "^7.0.0",
     "import-meta-resolve": "^4.0.0"

packages/backend/src/index.ts

@@ -3,6 +3,7 @@ import url from 'node:url'
 import Fastify, { type FastifyInstance } from 'fastify'
 import staticServer from '@fastify/static'
 import getPort from 'get-port'
+import logger from '@wdio/logger'
 
 import { getDevtoolsApp } from './utils.js'
 import { DEFAULT_PORT } from './constants.js'
@@ -13,6 +14,8 @@ interface DevtoolsBackendOptions {
   port?: number
 }
 
+const log = logger('@wdio/devtools-backend')
+
 export async function start (opts: DevtoolsBackendOptions = {}) {
   const port = opts.port || await getPort({ port: DEFAULT_PORT })
   const appPath = await getDevtoolsApp()
@@ -22,14 +25,9 @@ export async function start (opts: DevtoolsBackendOptions = {}) {
     root: appPath
   })
 
-  // Run the server!
-  try {
-    await server.listen({ port })
-    console.log(`WebdriverIO Devtools started on port ${port}`)
-  } catch (err) {
-    server.log.error(err)
-    process.exit(1)
-  }
+  log.info(`Starting WebdriverIO Devtools application on port ${port}`)
+  await server.listen({ port })
+  return server
 }
 
 export async function stop () {
@@ -40,6 +38,9 @@ export async function stop () {
   await server.close()
 }
 
+/**
+ * start server if this file is called directly
+ */
 if (import.meta.url.startsWith('file:')) {
   const modulePath = url.fileURLToPath(import.meta.url)
   if (process.argv[1] === modulePath) {

packages/backend/tsconfig.json

@@ -6,7 +6,8 @@
     "outDir": "dist",
     "rootDir": "src",
     "noEmit": false,
-    "allowImportingTsExtensions": false
+    "allowImportingTsExtensions": false,
+    "declaration": true
   },
   "include": ["src/**/*"]
 }

packages/hook/package.json

@@ -10,6 +10,11 @@
       "import": "./dist/types.ts",
       "types": "./dist/types.d.ts",
       "node": "./dist/types.js"
+    },
+    "./launcher": {
+      "import": "./dist/launcher.ts",
+      "types": "./dist/launcher.d.ts",
+      "node": "./dist/launcher.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -20,19 +25,20 @@
     "test": "eslint ."
   },
   "dependencies": {
+    "@wdio/devtools-backend": "workspace:^",
     "@wdio/devtools-script": "workspace:^",
     "@wdio/reporter": "^8.23.0",
     "@wdio/types": "^8.23.0",
     "import-meta-resolve": "^4.0.0",
-    "stack-trace": "1.0.0-pre2"
+    "stack-trace": "1.0.0-pre2",
+    "webdriverio": "^8.23.0"
   },
   "license": "MIT",
   "devDependencies": {
     "@types/stack-trace": "^0.0.33",
     "@wdio/globals": "^8.23.0",
     "@wdio/protocols": "^8.23.0",
-    "vite-plugin-dts": "^3.6.3",
-    "webdriverio": "^8.23.0"
+    "vite-plugin-dts": "^3.6.3"
   },
   "peerDependencies": {
     "@wdio/protocols": "^8.20.4",

packages/hook/src/constants.ts

@@ -3,3 +3,10 @@ export const PAGE_TRANSITION_COMMANDS: string[] = [
   'navigateTo',
   'elementClick'
 ]
+
+export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = {
+  browserName: 'chrome',
+  'goog:chromeOptions': {
+    args: ['--window-size=1200,800']
+  }
+}

packages/hook/src/index.ts

@@ -9,9 +9,12 @@ import type { Services, Reporters } from '@wdio/types'
 
 import { SessionCapturer } from './session.js'
 import { TestReporter } from './reporter.js'
+import { DevToolsAppLauncher } from './launcher.js'
 import { getBrowserObject } from './utils.ts'
 import { type TraceLog, TraceType } from './types.ts'
 
+export const launcher = DevToolsAppLauncher
+
 /**
  * Setup WebdriverIO Devtools hook for standalone instances
  */