메인 컨텐츠로 건너뛰기

WebDriverIO DevTools

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

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

Usage

Test Runner

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

Standalone

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

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
screencastScreencastOptionsSession video recording (see Screencast)

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:

Welcome! How can I help?

WebdriverIO AI Copilot