Vv/test automation

.changeset/ui-test-pass-fixes.md

@@ -0,0 +1,21 @@
+---
+"@wdio/nightwatch-devtools": minor
+"@wdio/devtools-app": patch
+"@wdio/devtools-backend": patch
+"@wdio/devtools-script": patch
+"@wdio/selenium-devtools": patch
+"@wdio/devtools-service": patch
+---
+
+Correctness pass over the dashboard and trace player, driven by a new component-test suite that ran the UI in a real browser for the first time.
+
+- **DOM replay** now reproduces what the page actually did: a boolean attribute is replayed by presence rather than by value (`checked="false"` no longer replays as checked, and a `disabled="false"` the page set stays disabled), an attribute the page removed replays as removed instead of being recreated empty, a removed `value` empties a field that was never typed into while keeping text that was, and a text-only DOM change is captured and replayed at all.
+- **Trace slices keep their step names**: a per-test slice dropped the metadata its step titles lived under, so every Gherkin step rendered as `stable-…:step:1` instead of its own text.
+- **Network panel**: resource-type dots are coloured for a reconstructed trace, whose HAR reports no MIME type; a request that failed at the transport level reads `ERR` in both the list and the detail card rather than the dash that means "still in flight"; capture, wire and UI now share one request-type vocabulary.
+- **Errors panel** no longer mangles assertion failures — each row is headed by what failed, a multi-line failure stays inside its own bullet, and one failure site is resolved per step.
+- **Compare tab** appears only for the selected test, is windowed to that test's own uid, and keeps its toolbar on one line.
+- **Run state survives a run's worker sockets**, so Preserve & Rerun no longer 409s on every spec but the last, and a dashboard opened mid-run replays the whole run instead of the current spec. Rerun filters also match the runner's own full-title form, so a rerun no longer reports the test as skipped.
+- **Sidebar**: a running test can be stopped, a suite carries no verdict until one of its children settles, a Run All refusal is judged against `canRunAll` and says why, and the selection feeds the selected-test context.
+- **Player**: listeners are torn down on disconnect, the viewport is shown, and the theme is honoured per instance.
+- **Capture**: DOM capture recovers on a document that missed script injection, and Nightwatch cucumber runs now produce traces with native assertions captured.
+- **Empty panels** explain why they are empty instead of drawing a loading skeleton forever.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -18,6 +18,7 @@ body:
         - WebdriverIO (@wdio/devtools-service)
         - Nightwatch (@wdio/nightwatch-devtools)
         - Selenium WebDriver (@wdio/selenium-devtools)
+        - None — @wdio/elements used standalone
     validations:
       required: true
 
@@ -40,7 +41,7 @@ body:
     id: devtools-version
     attributes:
       label: DevTools package version
-      description: The version of the adapter package above (check your package.json or lockfile).
+      description: The version of the package you selected above (check your package.json or lockfile).
       placeholder: e.g. 0.4.2
     validations:
       required: true
@@ -72,6 +73,7 @@ body:
       options:
         - Dashboard UI (rendering, controls, rerun/stop)
         - Captured data (network, console, screencast, trace)
+        - Element snapshot / locators (getSnapshot, getElements, accessibility tree)
         - Backend / server (connection, websocket, crashes)
         - Test launch / lifecycle (hooks, session, capabilities)
         - Not sure

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -37,6 +37,7 @@ body:
       options:
         - Dashboard UI
         - Capture / reporting core
+        - Element snapshot / locator API (@wdio/elements)
         - WebdriverIO adapter
         - Nightwatch adapter
         - Selenium adapter

.github/pull_request_template.md

@@ -19,6 +19,7 @@
 
 - [ ] `shared` (types and contracts)
 - [ ] `core` (framework-agnostic capture/reporting)
+- [ ] `elements` (published element/snapshot API — `@wdio/elements`)
 - [ ] `service` (WebdriverIO adapter)
 - [ ] `nightwatch-devtools` (Nightwatch adapter)
 - [ ] `selenium-devtools` (Selenium adapter)

.github/workflows/ci.yml

@@ -8,6 +8,9 @@ on:
       - v[0-9]+.[0-9]+.[0-9]+*
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -23,9 +26,9 @@ jobs:
           cache-name: cache-pnpm-modules
         with:
           path: ~/.pnpm-store
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
+            ${{ runner.os }}-build-${{ env.cache-name }}-
       - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10.26.1
@@ -36,5 +39,42 @@ jobs:
         run: pnpm lint
       - name: 📦 Bundle
         run: pnpm -r --workspace-concurrency=1 build
+      # Four tsc programs — see the `typecheck` script. Runs before the tests
+      # because it is fast and its failures are cheaper to read.
+      - name: 🔎 Typecheck
+        run: pnpm typecheck
       - name: 🧪 Run Tests
         run: pnpm test
+
+  # Separate job because these are the only tests that need a real browser, and
+  # they parallelise with `build` instead of extending it. No bundle step: the
+  # specs and packages/app/src reach @wdio/devtools-shared through its source
+  # exports, so Vite compiles everything from source. Chrome comes preinstalled
+  # on the runner image; wdio fetches the matching driver itself.
+  component-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: Use Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: .nvmrc
+      - name: Cache pnpm modules
+        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10.26.1
+          run_install: false
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      # Two workers, not the runner default: each carries a Vite server plus a
+      # Chrome, and past 2 the heaviest specs time out under that contention.
+      - name: 🧩 Component Tests
+        run: pnpm test:ui --maxInstances 2

.gitignore

@@ -23,8 +23,13 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+# Scratch scripts and dumps dropped at the repo root. Real root-level config
+# has to be un-ignored by name: a new one is otherwise silently never added,
+# and CI then runs with different settings than everyone's checkout.
 /*.ts
 /*.json
+!/vitest.config.ts
+!/tsconfig.dts.json
 *.tgz
 examples/wdio/wdio-*.json
 examples/wdio/wdio-*.webm
@@ -55,6 +60,5 @@ examples/**/allure-results*/
 examples/**/allure-report*/
 packages/**/allure-results*/
 packages/**/allure-report*/
-examples/playwright-allure/
 examples/wdio/cucumber/wdio.allure.conf.ts
 

ARCHITECTURE.md

@@ -142,9 +142,11 @@ The execution environment is the browser, not Node, so this package cannot impor
 
 ### `packages/elements`
 
-Element-detection scripts (`@wdio/elements`). Produces the per-action data that feeds the snapshot pipeline: `getSnapshot`, the depth-indented accessibility-tree serializer, and the interactable-element list, plus locator generation.
+The WDIO-typed element-detection API (`@wdio/elements`): `getSnapshot`, `getElements`, the accessibility-tree and interactable-element readers. Unlike `shared` and `core` this package **is** published, so its exported names are public API.
 
-Consumed by `core` (the element-snapshot builder) and by the adapters' per-action capture (`captureActionSnapshot`). The DOM-walking scripts run in the page via `browser.execute`, so — like `script` — they avoid Node-only APIs.
+Imports from: `core`. The script bodies, serializers, types, and locator generation all live in `core` (`element-scripts.ts`, `element-snapshot.ts`, `element-types.ts`, `locators/`) because they're framework-agnostic; this package holds only the wrappers that take a `WebdriverIO.Browser` — which `core` can't type against. The arrow never reverses: `core` does not import `elements`, and the adapters' per-action capture (`captureActionSnapshot`) calls core's script bodies directly rather than going through this package. `elements/snapshot.ts` and `elements/locators/index.ts` are re-export shims kept for API stability.
+
+The DOM-walking scripts run in the page via `browser.execute`, so — like `script` — they avoid Node-only APIs.
 
 ### `examples/`