webdriverio · vishnuv688 · Aug 13, 2026 · Aug 11, 2026 · Aug 13, 2026
diff --git a/examples/wdio/cucumber/wdio.trace.conf.ts b/examples/wdio/cucumber/wdio.trace.conf.ts
@@ -38,8 +38,7 @@ export const config: WebdriverIO.Config = {
       {
         // Trace by default (regen); DEVTOOLS_MODE=live flips to live for live-parity recording.
         mode: (process.env.DEVTOOLS_MODE === 'live' ? 'live' : 'trace') as
-          | 'live'
-          | 'trace'
+          'live' | 'trace'
         // traceFormat: 'ndjson-directory'
       }
     ]

diff --git a/examples/wdio/mocha/wdio.trace.conf.ts b/examples/wdio/mocha/wdio.trace.conf.ts
@@ -33,8 +33,7 @@ export const config: WebdriverIO.Config = {
       {
         // Trace by default (regen); DEVTOOLS_MODE=live flips to live for live-parity recording.
         mode: (process.env.DEVTOOLS_MODE === 'live' ? 'live' : 'trace') as
-          | 'live'
-          | 'trace',
+          'live' | 'trace',
         // Granularity/policy default to session/on and are env-overridable so
         // one config can walk the whole grid, e.g.
         //   DEVTOOLS_TRACE_GRANULARITY=test DEVTOOLS_TRACE_POLICY=retain-on-failure

diff --git a/examples/wdio/package.json b/examples/wdio/package.json
@@ -4,14 +4,14 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@wdio/cli": "9.28.0",
-    "@wdio/cucumber-framework": "9.28.0",
-    "@wdio/mocha-framework": "9.28.0",
+    "@wdio/cli": "9.30.1",
+    "@wdio/cucumber-framework": "9.30.1",
+    "@wdio/mocha-framework": "9.30.1",
     "@wdio/devtools-service": "workspace:*",
-    "@wdio/globals": "9.28.0",
-    "@wdio/local-runner": "9.28.0",
-    "@wdio/spec-reporter": "9.28.0",
-    "@wdio/types": "9.28.0",
+    "@wdio/globals": "9.29.1",
+    "@wdio/local-runner": "9.30.1",
+    "@wdio/spec-reporter": "9.30.1",
+    "@wdio/types": "9.30.1",
     "expect-webdriverio": "^5.6.7",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",

diff --git a/package.json b/package.json
@@ -67,6 +67,6 @@
     "ws": "^8.21.0"
   },
   "dependencies": {
-    "@wdio/cli": "9.28.0"
+    "@wdio/cli": "9.30.1"
   }
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -24,7 +24,7 @@
     "@iconify-json/mdi": "^1.2.3",
     "@lit/context": "^1.1.6",
     "@wdio/devtools-service": "workspace:*",
-    "@wdio/protocols": "9.28.0",
+    "@wdio/protocols": "9.30.1",
     "codemirror": "^6.0.2",
     "lit": "^3.3.3",
     "placeholder-loading": "^0.7.0",
@@ -39,9 +39,9 @@
     "@wdio/devtools-shared": "workspace:^",
     "@wdio/globals": "^9.29.1",
     "@wdio/mocha-framework": "^9.30.0",
-    "@wdio/reporter": "9.28.0",
+    "@wdio/reporter": "9.30.1",
     "autoprefixer": "^10.5.0",
-    "expect": "30.2.0",
+    "expect": "30.4.1",
     "postcss": "^8.5.15",
     "postcss-import": "^16.1.1",
     "rollup": "^4.61.0",

diff --git a/packages/app/src/components/browser/browser-chrome.ts b/packages/app/src/components/browser/browser-chrome.ts
@@ -21,13 +21,15 @@ export function renderBrowserChrome(
       <div
         class="flex items-center mx-4 my-2 pr-2 bg-input-background text-inputForeground border border-editorSuggestWidgetBorder rounded leading-7 flex-1 min-w-0 overflow-hidden"
       >
-        ${displayUrl?.startsWith('https')
-          ? html`<icon-mdi-lock
-              class="w-[16px] h-[16px] m-1 mr-2 flex-shrink-0 text-chartsGreen"
-            ></icon-mdi-lock>`
-          : html`<icon-mdi-world
-              class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
-            ></icon-mdi-world>`}
+        ${
+          displayUrl?.startsWith('https')
+            ? html`<icon-mdi-lock
+                class="w-[16px] h-[16px] m-1 mr-2 flex-shrink-0 text-chartsGreen"
+              ></icon-mdi-lock>`
+            : html`<icon-mdi-world
+                class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
+              ></icon-mdi-world>`
+        }
         <span class="truncate">${displayUrl}</span>
       </div>
       ${viewToggle}

diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
@@ -184,8 +184,7 @@ export class DevtoolsBrowser extends Element {
     // first resize event), or may arrive without dimensions — fall back to
     // sensible defaults so we never throw.
     const viewport = metadata.viewport as
-      | { width?: number; height?: number }
-      | undefined
+      { width?: number; height?: number } | undefined
     const viewportWidth = viewport?.width || 1280
     const viewportHeight = viewport?.height || 800
     if (!viewportWidth || !viewportHeight) {
@@ -810,11 +809,11 @@ export class DevtoolsBrowser extends Element {
     return html`<button
       title="Element overlay — outline what the test interacted with"
       @click=${() => this.#toggleOverlay()}
-      style="display:inline-grid;place-items:center;width:24px;height:24px;margin:0 8px;flex:none;border-radius:6px;cursor:pointer;border:1px solid var(--vscode-panel-border, #2a2a31);background:${on
-        ? 'var(--accent, #ff6a3d)'
-        : 'transparent'};color:${on
-        ? '#1a0d06'
-        : 'var(--vscode-descriptionForeground, #8b8b96)'};"
+      style="display:inline-grid;place-items:center;width:24px;height:24px;margin:0 8px;flex:none;border-radius:6px;cursor:pointer;border:1px solid var(--vscode-panel-border, #2a2a31);background:${
+        on ? 'var(--accent, #ff6a3d)' : 'transparent'
+      };color:${
+        on ? '#1a0d06' : 'var(--vscode-descriptionForeground, #8b8b96)'
+      };"
     >
       <icon-mdi-cursor-default-click-outline
         style="width:14px;height:14px;"
@@ -840,28 +839,30 @@ export class DevtoolsBrowser extends Element {
         >
           Screencast
         </button>
-        ${this.#videos.length > 1
-          ? html`<select
-              class="video-select"
-              ?disabled=${this.#viewMode !== 'video'}
-              @change=${(e: Event) => {
-                this.#setActiveVideo(
-                  Number((e.target as HTMLSelectElement).value)
-                )
-                this.#setViewMode('video')
-              }}
-            >
-              ${this.#videos.map(
-                (_v, i) =>
-                  html`<option
-                    value=${i}
-                    ?selected=${this.#activeVideoIdx === i}
-                  >
-                    Recording ${i + 1}
-                  </option>`
-              )}
-            </select>`
-          : nothing}
+        ${
+          this.#videos.length > 1
+            ? html`<select
+                class="video-select"
+                ?disabled=${this.#viewMode !== 'video'}
+                @change=${(e: Event) => {
+                  this.#setActiveVideo(
+                    Number((e.target as HTMLSelectElement).value)
+                  )
+                  this.#setViewMode('video')
+                }}
+              >
+                ${this.#videos.map(
+                  (_v, i) =>
+                    html`<option
+                      value=${i}
+                      ?selected=${this.#activeVideoIdx === i}
+                    >
+                      Recording ${i + 1}
+                    </option>`
+                )}
+              </select>`
+            : nothing
+        }
       </div>
     `
   }
@@ -897,8 +898,9 @@ export class DevtoolsBrowser extends Element {
           style="position:relative;flex:1;min-height:0;"
         >
           <img
-            src="data:${imageMime(this.#screenshotData)};base64,${this
-              .#screenshotData}"
+            src="data:${imageMime(this.#screenshotData)};base64,${
+              this.#screenshotData
+            }"
           />
         </div>
       </div>`

diff --git a/packages/app/src/components/browser/trace-timeline.ts b/packages/app/src/components/browser/trace-timeline.ts
@@ -328,8 +328,9 @@ export class TraceTimeline extends Element {
           const fraction = tick / this.#duration
           return html`<span
             class="absolute top-0.5 whitespace-nowrap"
-            style="left:${fraction * 100}%; transform:translateX(-${fraction *
-            100}%);"
+            style="left:${fraction * 100}%; transform:translateX(-${
+              fraction * 100
+            }%);"
             >${formatTickLabel(tick)}</span
           >`
         })}
@@ -353,13 +354,16 @@ export class TraceTimeline extends Element {
           const fraction = this.#fraction(frame.timestamp)
           const active = frame.timestamp === activeFrame
           return html`<button
-            class="absolute top-0.5 bottom-0.5 aspect-video border rounded overflow-hidden hover:border-chartsBlue hover:z-10 ${active
-              ? `border-chartsBlue ring-1 ring-chartsBlue${
-                  this.playing ? '' : ' z-10'
-                }`
-              : 'border-panelBorder'}"
-            style="left:${fraction * 100}%; transform:translateX(-${fraction *
-            100}%);"
+            class="absolute top-0.5 bottom-0.5 aspect-video border rounded overflow-hidden hover:border-chartsBlue hover:z-10 ${
+              active
+                ? `border-chartsBlue ring-1 ring-chartsBlue${
+                    this.playing ? '' : ' z-10'
+                  }`
+                : 'border-panelBorder'
+            }"
+            style="left:${fraction * 100}%; transform:translateX(-${
+              fraction * 100
+            }%);"
             title="${formatTimecode(frame.timestamp - this.#start)}"
             @click="${() => this.#seekToTimestamp(frame.timestamp)}"
           >

diff --git a/packages/app/src/components/placeholder.ts b/packages/app/src/components/placeholder.ts
@@ -97,15 +97,21 @@ export class DevtoolsPlaceholder extends Element {
     }
     return html`
       <div class="empty-state">
-        ${this.icon
-          ? html`<div class="empty-state-icon">${this.icon}</div>`
-          : nothing}
-        ${this.heading
-          ? html`<div class="empty-state-text">${this.heading}</div>`
-          : nothing}
-        ${this.description
-          ? html`<div class="empty-state-detail">${this.description}</div>`
-          : nothing}
+        ${
+          this.icon
+            ? html`<div class="empty-state-icon">${this.icon}</div>`
+            : nothing
+        }
+        ${
+          this.heading
+            ? html`<div class="empty-state-text">${this.heading}</div>`
+            : nothing
+        }
+        ${
+          this.description
+            ? html`<div class="empty-state-detail">${this.description}</div>`
+            : nothing
+        }
       </div>
     `
   }

diff --git a/packages/app/src/components/sidebar/explorer.ts b/packages/app/src/components/sidebar/explorer.ts
@@ -379,25 +379,28 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         feature-line="${entry.featureLine ?? ''}"
         suite-type="${entry.suiteType || ''}"
         ?has-children="${entry.children && entry.children.length > 0}"
-        ?selected="${entry.uid ===
-        (this.#selectedUid ?? this.#autoSelectedUid)}"
+        ?selected="${
+          entry.uid === (this.#selectedUid ?? this.#autoSelectedUid)
+        }"
         ?revealed="${entry.uid === this.#revealedUid}"
         ?root="${isRoot}"
         .runDisabled=${this.#isRunDisabled(entry)}
         .runDisabledReason=${this.#getRunDisabledReason(entry)}
       >
         <label slot="label">${entry.label}</label>
-        ${entry.children && entry.children.length
-          ? html`
-              <wdio-test-suite slot="children">
-                ${repeat(
-                  entry.children,
-                  (child) => child.uid,
-                  (child) => this.#renderEntry(child)
-                )}
-              </wdio-test-suite>
-            `
-          : nothing}
+        ${
+          entry.children && entry.children.length
+            ? html`
+                <wdio-test-suite slot="children">
+                  ${repeat(
+                    entry.children,
+                    (child) => child.uid,
+                    (child) => this.#renderEntry(child)
+                  )}
+                </wdio-test-suite>
+              `
+            : nothing
+        }
       </wdio-test-entry>
     `
   }
@@ -471,15 +474,17 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         ${this.#renderHeaderToolbar()}
       </header>
       <wdio-test-suite>
-        ${suites.length
-          ? repeat(
-              suites,
-              (suite) => suite.uid,
-              (suite) => this.#renderEntry(suite, true)
-            )
-          : html`<div class="text-sm px-4 py-2">
-              <p class="text-disabledForeground">No tests to display</p>
-            </div>`}
+        ${
+          suites.length
+            ? repeat(
+                suites,
+                (suite) => suite.uid,
+                (suite) => this.#renderEntry(suite, true)
+              )
+            : html`<div class="text-sm px-4 py-2">
+                <p class="text-disabledForeground">No tests to display</p>
+              </div>`
+        }
       </wdio-test-suite>
     `
   }