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.
Note: this service currently only supports Chrome v63 and up!
The easiest way is to keep @wdio/devtools-service
as a devDependency in your package.json
.
{
"devDependencies": {
"@wdio/devtools-service": "^5.0.0"
}
}
You can simple do it by:
npm install @wdio/devtools-service --save-dev
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.conf.js
like:
// wdio.conf.js
export.config = {
// ...
services: [['devtools', {
debuggerAddress: '10.0.0.3:9222'
}]],
// ...
};
debuggerAddress
- optional parameter, you could set host and port.
For now the service allows two different ways to access the Chrome DevTools Protocol:
The cdp
command is a custom command added to the browser scope that allows you to call directly commands to the protocol.
browser.cdp(<domain>, <command>, <arguments>)
For example if you want to get the JavaScript coverage of your page you can do the following:
it('should take JS coverage', () => {
/**
* enable necessary domains
*/
browser.cdp('Profiler', 'enable')
browser.cdp('Debugger', 'enable')
/**
* start test coverage profiler
*/
browser.cdp('Profiler', 'startPreciseCoverage', {
callCount: true,
detailed: true
})
browser.url('http://google.com')
/**
* capture test coverage
*/
const { result } = browser.cdp('Profiler', 'takePreciseCoverage')
const coverage = result.filter((res) => res.url !== '')
console.log(coverage)
})
Returns the host and port the Chrome DevTools interface is connected to.
const connection = browser.cdpConnection()
console.log(connection); // outputs: { host: 'localhost', port: 50700 }
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. DOM.focus
.
const nodeId = browser.getNodeId('body')
console.log(nodeId) // outputs: 4
const nodeId = browser.getNodeIds('img')
console.log(nodeId) // outputs: [ 40, 41, 42, 43, 44, 45 ]
Start tracing the browser. You can optionally pass in custom tracing categories (defaults to this list) and the sampling frequency (defaults to 10000
).
browser.startTracing()
Stop tracing the browser.
browser.endTracing()
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.
browser.startTracing()
browser.url('http://json.org')
browser.endTracing()
fs.writeFileSync('/path/to/tracelog.json', JSON.stringify(browser.getTraceLogs()))
Returns the Speed Index and Perceptual Speed Index from the page load that happened between the tracing period.
browser.startTracing()
browser.url('http://json.org')
browser.endTracing()
console.log(browser.getSpeedIndex())
// outputs
// { speedIndex: 689.6634800064564,
// perceptualSpeedIndex: 785.0901860232523 }
Returns an object with a variety of performance metrics.
browser.startTracing()
browser.url('http://json.org')
browser.endTracing()
console.log(browser.getPerformanceMetrics())
// outputs:
// { firstPaint: 621.432,
// firstContentfulPaint: 621.44,
// firstMeaningfulPaint: 621.442,
// domContentLoaded: 474.96,
// timeToFirstInteractive: 621.442,
// load: 1148.313 }
Returns page weight information of the last page load.
browser.startTracing()
browser.url('https://webdriver.io')
browser.endTracing()
console.log(browser.getPageWeight())
// outputs:
// { pageWeight: 2438485,
// transferred: 1139136,
// requestCount: 72,
// details: {
// Document: { size: 221705, encoded: 85386, count: 11 },
// Stylesheet: { size: 52712, encoded: 50130, count: 2 },
// Image: { size: 495023, encoded: 482433, count: 36 },
// Script: { size: 1073597, encoded: 322854, count: 15 },
// Font: { size: 84412, encoded: 84412, count: 5 },
// Other: { size: 1790, encoded: 1790, count: 2 },
// XHR: { size: 509246, encoded: 112131, count: 1 } }
// }
In order to capture events in the browser you can register an event listener to a Chrome DevTools event like:
it('should listen on network events', () => {
browser.cdp('Network', 'enable')
browser.on('Network.responseReceived', (params) => {
console.log(`Loaded ${params.response.url}`)
})
browser.url('https://www.google.com')
})
For more information on WebdriverIO see the homepage.