ContextQMD
Back to Webdriverio

WebDriverIO DevTools

website/docs/devtools/Wdio.md

9.29.03.1 KB
Original Source

A WebdriverIO service that provides a developer tools UI for running, debugging, and inspecting browser automation tests. Features include DOM mutation replay, per-command screenshots, network request inspection, console log capture, and session screencast recording.

Installation

sh
npm install @wdio/devtools-service --save-dev

Usage

Test Runner

ts
// wdio.conf.ts
export const config = {
  services: ['devtools'],
}

Standalone

ts
import { remote } from 'webdriverio'
import { setupForDevtools } from '@wdio/devtools-service'

const browser = await remote(setupForDevtools({
  capabilities: { browserName: 'chrome' }
}))
await browser.url('https://example.com')
await browser.deleteSession()

Service Options

ts
services: [['devtools', options]]
OptionTypeDefaultDescription
portnumberrandomPort the DevTools UI server listens on
hostnamestring'localhost'Hostname the DevTools UI server binds to
devtoolsCapabilitiesCapabilitiesChrome 1600x1200Capabilities used to open the DevTools UI window
screencastScreencastOptions-Session video recording (see Screencast)
mode'live' | 'trace''live'live opens the DevTools UI; trace skips it and writes a portable artifact instead (see Trace Mode)
traceFormat'zip' | 'ndjson-directory''zip'Trace artifact layout — single archive vs unpacked directory. Only applies when mode: 'trace'

Getting Started

  1. Run your WebdriverIO tests
  2. The DevTools UI automatically opens in an external browser window
  3. Tests begin executing immediately with real-time visualization
  4. View live browser preview, test progress, and command execution
  5. After initial run completes, use play buttons to rerun individual tests or suites
  6. Click stop button anytime to terminate running tests
  7. Explore actions, metadata, console logs, and source code in the workbench tabs

Features

Explore the WebDriverIO DevTools features in detail: