DevTool dependencies update (#111)

* Initial dev test update

* Live interaction on main screen

* Refined commands that are shown in Actions tab specific to the test cases

* UI - Border fix

* Example test case update

* Close the browser only when the user manages to close it manually and not when the test runner completes its execution

* Action tab cleanup

* Removed dummy browser pause

* Slider UI update

* Logger update

* Horizontal slider update

* Ignore all retries command in case of failure test case

* Added documentation

* Removed duplicates when importing trace file

* Dependencies update

* Improved the generic working of commands recorder

* Revert "Improved the generic working of commands recorder"

This reverts commit 260ed6e.

* Trace data update

* Fixed top level commands trace

* Updated browser context injection

* Metadata tab UI changes

* Tailwind and major UI updates

* Test-suit scroll bar

* Iframe UI update

* Hide scrollbar

* Fix for wdio-devtools-tab scrollbar issue

* Fix for horizontal slider

* Horizontal slider updates

* Slider fixes

Author: vishnuv688

example/features/step-definitions/steps.ts

@@ -1,5 +1,5 @@
-import { Given, When, Then } from '@wdio/cucumber-framework'
-import { expect } from '@wdio/globals'
+import { Given, When, Then, After } from '@wdio/cucumber-framework'
+import { browser, expect } from '@wdio/globals'
 
 import LoginPage from '../pageobjects/login.page.js'
 import SecurePage from '../pageobjects/secure.page.js'
@@ -8,6 +8,10 @@ const pages = {
     login: LoginPage
 } as const
 
+After(async () => {
+    await browser.reloadSession()
+})
+
 Given(/^I am on the (\w+) page$/, async (page: keyof typeof pages) => {
     await pages[page].open()
 })
@@ -17,8 +21,9 @@ When(/^I login with (\w+) and (.+)$/, async (username, password) => {
 })
 
 Then(/^I should see a flash message saying (.*)$/, async (message) => {
-    await expect(SecurePage.flashAlert).toBeExisting()
-    await expect(SecurePage.flashAlert).toHaveTextContaining(message)
+    const el = await SecurePage.flashAlert
+    await expect(el).toBeExisting()
+    await expect(el).toHaveText(expect.stringContaining(message))
     await browser.pause(15000)
 })
 

example/package.json

@@ -2,16 +2,18 @@
   "name": "examples",
   "type": "module",
   "devDependencies": {
-    "@wdio/cli": "8.39.0",
-    "@wdio/cucumber-framework": "^8.39.0",
-    "@wdio/devtools-service": "workspace:^",
-    "@wdio/globals": "^8.39.0",
-    "@wdio/local-runner": "^8.39.0",
-    "@wdio/spec-reporter": "^8.39.0",
-    "@wdio/types": "^8.39.0",
-    "expect-webdriverio": "^4.15.1",
+    "@wdio/cli": "9.18.0",
+    "@wdio/cucumber-framework": "9.18.0",
+    "@wdio/devtools-service": "workspace:*",
+    "@wdio/globals": "9.17.0",
+    "@wdio/local-runner": "9.18.0",
+    "@wdio/spec-reporter": "9.18.0",
+    "@wdio/types": "9.16.2",
+    "expect-webdriverio": "^5.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5"
+    "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "wdio": "wdio run ./wdio.conf.ts"

package.json

@@ -10,27 +10,28 @@
     "watch": "pnpm build --watch"
   },
   "devDependencies": {
-    "@types/node": "^20.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "@typescript-eslint/utils": "^6.9.0",
-    "@vitest/browser": "^0.34.6",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.52.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "@types/node": "^24.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.40.0",
+    "@typescript-eslint/parser": "^8.40.0",
+    "@typescript-eslint/utils": "^8.40.0",
+    "@vitest/browser": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.33.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-unicorn": "^59.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
-    "postcss-lit": "^1.1.1",
-    "tailwindcss": "^3.4.4",
+    "postcss": "^8.5.6",
+    "postcss-lit": "^1.2.0",
+    "tailwindcss": "^4.1.12",
     "ts-node": "^10.9.2",
-    "typescript": "^5.0.2",
-    "unplugin-icons": "^0.19.0",
-    "vite": "^4.4.5",
-    "vitest": "^0.34.6",
-    "webdriverio": "^8.39.0"
+    "tsx": "^4.20.4",
+    "typescript": "^5.9.2",
+    "unplugin-icons": "^22.2.0",
+    "vite": "^7.1.3",
+    "vitest": "^3.2.4",
+    "webdriverio": "^9.19.1"
   },
   "dependencies": {
-    "@wdio/cli": "8.39.0"
+    "@wdio/cli": "9.18.0"
   }
 }

packages/app/package.json

@@ -11,22 +11,30 @@
     "test": "eslint ."
   },
   "dependencies": {
-    "@codemirror/lang-javascript": "^6.2.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.0",
-    "@iconify-json/mdi": "^1.1.54",
-    "@lit/context": "^1.0.1",
-    "@wdio/protocols": "^8.23.0",
-    "codemirror": "^6.0.1",
-    "lit": "^2.7.6",
-    "placeholder-loading": "^0.6.0",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.1",
+    "@iconify-json/mdi": "^1.2.3",
+    "@lit/context": "^1.1.6",
+    "@wdio/protocols": "9.16.2",
+    "codemirror": "^6.0.2",
+    "lit": "^3.3.1",
+    "placeholder-loading": "^0.7.0",
     "pointer-tracker": "^2.5.3",
-    "preact": "^10.18.1"
+    "preact": "^10.27.1"
   },
   "author": "Christian Bromann <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@wdio/devtools-service": "workspace:^",
-    "@wdio/reporter": "^8.23.0"
+    "@tailwindcss/postcss": "^4.1.12",
+    "@wdio/devtools-service": "workspace:*",
+    "@wdio/reporter": "9.18.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "rollup": "^4.47.0",
+    "stylelint": "^16.24.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-tailwindcss": "^1.0.0",
+    "tailwindcss": "~3.4.17"
   }
 }

packages/app/postcss.config.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
     tailwindcss: {},

packages/app/src/app.ts

@@ -38,9 +38,12 @@ export class WebdriverIODevtoolsApplication extends Element {
   @query('section')
   window?: HTMLElement
 
+  @query('section[data-resizer-window]')
+  resizerWindow?: HTMLElement
+
   async #getWindow() {
     await this.updateComplete
-    return this.window as Element
+    return this.resizerWindow as Element
   }
 
   connectedCallback(): void {
@@ -66,16 +69,15 @@ export class WebdriverIODevtoolsApplication extends Element {
     }
 
     return html`
-      <section class="flex h-[calc(100%-40px)] w-full relative">
+      <section data-resizer-window class="flex h-[calc(100%-40px)] w-full relative">
         ${
           // only render sidebar if trace file is captured using testrunner
           this.dataManager.traceType === TraceType.Testrunner
-            ? html`<wdio-devtools-sidebar style="${this.#drag.getPosition()}"></wdio-devtools-sidebar>`
+            ? html`<wdio-devtools-sidebar style="${this.#drag?.getPosition()}"></wdio-devtools-sidebar>`
             : nothing
         }
-
+        ${this.#drag.getSlider('z-10 h-full')}
         <wdio-devtools-workbench class="basis-auto"></wdio-devtools-workbench>
-        ${this.#drag.getSlider()}
       </section>
     `
   }

packages/app/src/components/browser/snapshot.ts

@@ -4,6 +4,7 @@ import { consume } from '@lit/context'
 
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
+import type { SimplifiedVNode } from '../../../../script/types'
 
 import { mutationContext, type TraceMutation, metadataContext, type Metadata } from '../../controller/DataManager.js'
 
@@ -49,11 +50,20 @@ export class DevtoolsBrowser extends Element {
       width: 100%;
       height: 100%;
       display: flex;
-      margin: 2rem;
+      padding: 2rem;
       align-items: center;
       justify-content: center;
     }
 
+    section {
+      box-sizing: border-box;
+      width: calc(100% - 0px); /* host padding already applied */
+      height: calc(100% - 0px);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
     .frame-dot {
       border-radius: 50%;
       height: 12px;
@@ -87,9 +97,6 @@ export class DevtoolsBrowser extends Element {
       return
     }
 
-    this.section.style.width = 'auto'
-    this.section.style.height = 'auto'
-
     this.iframe.removeAttribute('style')
     const viewportWidth = metadata.viewport.width
     const viewportHeight = metadata.viewport.height
@@ -301,7 +308,7 @@ export class DevtoolsBrowser extends Element {
     }
 
     return html`
-      <section class="w-full bg-sideBarBackground rounded-t-md shadow-md">
+      <section class="w-full h-full bg-sideBarBackground rounded-t-md shadow-md">
         <header class="flex block mx-2">
           <div class="frame-dot bg-notificationsErrorIconForeground"></div>
           <div class="frame-dot bg-notificationsWarningIconForeground"></div>
@@ -312,7 +319,7 @@ export class DevtoolsBrowser extends Element {
           </div>
         </header>
         ${this.mutations && this.mutations.length
-          ? html`<iframe class="origin-top-left"></iframe>`
+          ? html`<iframe class="origin-top-left h-full w-full"></iframe>`
           : html`<wdio-devtools-placeholder style="height: 100%"></wdio-devtools-placeholder>`
         }
       </section>

packages/app/src/components/sidebar/explorer.ts

@@ -3,7 +3,7 @@ import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import type { TestStats, SuiteStats } from '@wdio/reporter'
-
+import { repeat } from 'lit/directives/repeat.js'
 import { TestState } from './test-suite.js'
 import { suiteContext } from '../../controller/DataManager.js'
 
@@ -20,6 +20,7 @@ import type { DevtoolsSidebarFilter } from './filter.js'
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
 interface TestEntry {
+  uid: string
   state?: string
   label: string
   children: TestEntry[]
@@ -32,7 +33,21 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   static styles = [...Element.styles, css`
     :host {
       width: 100%;
-      display: block;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    header {
+      flex: 0 0 auto;
+    }
+
+    wdio-test-suite {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+      scrollbar-width: none;
     }
   `]
 
@@ -53,10 +68,16 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return html`
       <wdio-test-entry state="${entry.state as any}">
         <label slot="label">${entry.label}</label>
-        ${entry.children && entry.children.length ?
-          html`
-            <wdio-test-suite slot="children">${entry.children.map(this.#renderEntry.bind(this))}</wdio-test-suite>
-          `
+        ${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>
@@ -88,6 +109,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if ('tests' in entry) {
       const entries = [...entry.tests, ...entry.suites]
       return {
+        uid: entry.uid,
         label: entry.title,
         state: entry.tests.some((t) => !t.end)
           ? TestState.RUNNING
@@ -100,6 +122,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       }
     }
     return {
+      uid: entry.uid,
       label: entry.title,
       state: !entry.end
         ? TestState.RUNNING
@@ -114,7 +137,18 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if (!this.suites) {
       return
     }
-    const suites = Object.values(this.suites[0])
+
+    // ✅ Only root suites (no parent = true top-level suite)
+    const rootSuites = this.suites
+      .flatMap(s => Object.values(s))
+      .filter(suite => !suite.parent)
+
+    // Deduplicate by uid (in case some frameworks still push duplicates)
+    const uniqueSuites = Array.from(
+      new Map(rootSuites.map(suite => [suite.uid, suite])).values()
+    )
+
+    const suites = uniqueSuites
       .map(this.#getTestEntry.bind(this))
       .filter(this.#filterEntry.bind(this))
 
@@ -132,7 +166,11 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       </header>
       <wdio-test-suite>
         ${suites.length
-          ? suites.map(this.#renderEntry.bind(this))
+          ? repeat(
+              suites,
+              suite => suite.uid,
+              suite => this.#renderEntry(suite)
+            )
           : html`<p class="text-disabledForeground text-sm px-4 py-2">No tests found</p>`
         }
       </wdio-test-suite>

packages/app/src/components/tabs.ts

@@ -15,6 +15,7 @@ export class DevtoolsTabs extends Element {
     :host {
       width: 100%;
       flex-grow: 1;
+      min-height: 0;
       display: flex;
       flex-direction: column;
       color: var(--vscode-foreground);
@@ -130,7 +131,9 @@ export class DevtoolsTab extends Element {
     :host {
       display: none;
       flex-grow: 1;
-      overflow-y: scroll;
+      min-height: 0;
+      overflow-y: auto;
+      scrollbar-width: none;
     }
 
     :host([active]) {