Difference between service and protocol in webdriverio

Question

In the webdriverio documentation I see protocols and services. In both of these I see devtools mentioned. In the protocol section it says that the devtools protocol has been deprecated, however devtools services isn't.

Here it says devtools protocol is deprecated - https://webdriver.io/docs/automationProtocols#devtools-protocol

Now, I am trying to use devtools service - https://webdriver.io/docs/devtools-service

Is this supposed to work or not?

Answer 1

Let's understand the difference between protocol and service in Webdriverio.

Protocols in WebDriverIO define the standardized way it communicates with the browser. Now there are two protocols in question here, one is the WebDriver protocol which is the most commonly used protocol and defines a set of standardized commands and responses for interacting with web browsers. Another one is the Devtools protocol which is provided by the Chrome DevTools team for interacting with Chrome and Chromium browsers, basically providing more than what WebDriver protocol offers, such as detailed inspection of network requests, memory profiling etc.

Services, on the other hand, are modular components that extend the functionality of WebDriverIO to provide additional integration and features. Devtools Service is one of those services in WebDriverIO which uses the Chrome DevTools Protocol (CDP) to use some advanced features such as monitoring network traffic, manipulating DOM etc.

It mentioned that CDP is now deprecated as an automation protocol through a webdriver-like interface which means WebdriverIO previously allowed users to interact with Chrome Dev Tools using WebDriver commands but now no more.

Instead, it suggests using either the DevTools service or Puppeteer to do the same. And yes it will work - As mentioned in the WebDriverIO documentation below is the example code for capturing page load performance metrics

import assert from 'node:assert'

describe('JSON.org page', () => {
    before(async () => {
        await browser.enablePerformanceAudits()
    })

    it('should load within performance budget', async () => {
        /**
         * this page load will take a bit longer as the DevTools service will
         * capture all metrics in the background
         */
        await browser.url('http://json.org')

        let metrics = await browser.getMetrics()
        assert.ok(metrics.speedIndex < 1500) // check that speedIndex is below 1.5ms

        let score = await browser.getPerformanceScore() // get Lighthouse Performance score
        assert.ok(score >= .99) // Lighthouse Performance score is at 99% or higher

        $('=Esperanto').click()

        metrics = await browser.getMetrics()
        assert.ok(metrics.speedIndex < 1500)
        score = await browser.getPerformanceScore()
        assert.ok(score >= .99)
    })

    after(async () => {
        await browser.disablePerformanceAudits()
    })
})

I hope this answers your question, if not please let me know.