A WebdriverIO service that allows you to run Chrome DevTools commands in your tests
With Chrome v63 and up the browser started to support multi clients allowing arbitrary clients to access the Chrome DevTools Protocol. This provides interesting opportunities to automate Chrome beyond the WebDriver protocol. With this service you can enhance the wdio browser object to leverage that access and call Chrome DevTools commands within your tests to e.g. intercept requests, throttle network capabilities or take CSS/JS coverage.
Since Firefox 86, a subset of Chrome DevTools Protocol has been implemented by passing the capability
Note: this service currently only supports Chrome v63 and up, Chromium, and Firefox 86 and up (Microsoft Edge is not yet supported)!
The easiest way is to keep
@wdio/devtools-service as a devDependency in your
You can simple do it by:
Instructions on how to install
WebdriverIO can be found here.
In order to use the service you just need to add the service to your service list in your
@wdio/devtools-service offers you a variety of features that helps you to automate Chrome beyond the WebDriver protocol. It gives you access to the Chrome DevTools protocol as well as to a Puppeteer instance that you can use to automate Chrome with the Puppeteer automation interface.
The DevTools service allows you to capture performance data from every page load or page transition that was caused by a click. To enable it call
browser.enablePerformanceAudits(<options>). After you are done capturing all necessary performance data disable it to revert the throttling settings, e.g.:
You can emulate a mobile device by using the
emulateDevice command, throttling CPU and network as well as setting
mobile as form factor:
The following commands with their results are available:
Get most common used performance metrics.
Get some useful diagnostics about the page load.
Returns a list with a breakdown of all main thread task and their total duration.
Returns the Lighthouse Performance Score which is a weighted mean of the following metrics:
Enables auto performance audits for all page loads that are cause by calling the
url command or clicking on a link or anything that causes a page load. You can pass in a config object to determine some throttling options. The default throttling profile is
Good 3G network with a 4x CPU trottling.
The following network throttling profiles are available:
online (no throttling).
The service allows you to emulate a specific device type. If set, the browser viewport will be modified to fit the device capabilities as well as the user agent will set according to the device user agent. To set a predefined device profile you can run:
Available predefined device profiles are:
Galaxy Note 3,
Galaxy Note II,
Galaxy S III,
iPhone 6 Plus,
iPhone 7 Plus,
iPhone 8 Plus,
Kindle Fire HDX,
LG Optimus L70,
Microsoft Lumia 550,
Microsoft Lumia 950,
Nokia Lumia 520,
Pixel 2 XL
You can also define your own device profile by providing an object as parameter like in the following example:
This only works if you don't use
mobileEmulation is present the call to
browser.emulateDevice() won't do anything.
checkPWA command you can validate if your webapp is compliant to latest web standards when it comes to progressive web apps. It checks:
- whether your app is installable
- provides a service worker
- has a splash screen
- provides apple touch and maskable icons
- can be served on mobile devices
If you are not interested in one of these checks you can pass in a list of checks you like to run. The
passed property will return
true if all checks pass. If they fail you can use the
details property to enrich your failure message with details of the failure.
The service offers you to capture the code coverage of your application under test. To do so you need to enable this feature as part of the service settings:
Then you have access to a command that calculates the ratio of covered code lines and branches for you to assert within your test:
For now the service allows two different ways to access the Chrome DevTools Protocol:
cdp command is a custom command added to the browser scope that allows you to call directly commands to the protocol.
Helper method to get the nodeId of an element in the page. NodeIds are similar like WebDriver node ids an identifier for a node. It can be used as a parameter for other Chrome DevTools methods, e.g.
startTracing(categories, samplingFrequency) Command#
Start tracing the browser. You can optionally pass in custom tracing categories (defaults to this list) and the sampling frequency (defaults to
Stop tracing the browser.
Returns the tracelogs that was captured within the tracing period. You can use this command to store the trace logs on the file system to analyse the trace via Chrome DevTools interface.
Returns page weight information of the last page load.
cdp command can be used to call the
Page.setDownloadBehavior command of Devtools Protocol to set the behavior when downloading a file. Make sure the
downloadPath is an absolute path and the
browser.cdp() call is made before the file is downloaded.
The service uses Puppeteer for its automation under the hood. You can get access to the used instance by calling the
getPuppeteer command. Note: Puppeteer commands are async and either needs to be called within the
call command or handled via
In order to capture events in the browser you can register an event listener to a Chrome DevTools event like:
For more information on WebdriverIO see the homepage.