Devtools Service - Event Listener capture each event twice

[refael-m]

Environment (please complete the following information):

• WebdriverIO version: 6.12.1
• If WDIO Testrunner, running sync/async: sync
• Node.js version: 12.18.4
• NPM version: 6.14.6
• Browser name and version: Chrome 88

Config of WebdriverIO Generate with npx wdio config -y and add 'devtools' to the service list

Describe the bug When using the following code to capture events, each event captured twice

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')
    })

To Reproduce I've created an example repository: sample-wdio-duplicate-event

Expected behavior Capture each event once.

Additional context

Please use the correct markdown

[christian-bromann]

@refael-m thank you for this great report. This indeed looks like a bug.

[joshskumar]

@christian-bromann puppeteer core might be adding multiple events so can you please let know if I am right about it. because issue is with this part of the code.

this._puppeteer['_connection']._transport._ws.addEventListener('message', (event: { data: string }) => { const data: CDPSessionOnMessageObject = JSON.parse(event.data) this._devtoolsGatherer?.onMessage(data) const method = data.method || 'event' log.debug(cdp event: ${method} with params ${JSON.stringify(data.params)})

        if (this._browser) {
            this._browser.emit(method, data.params)
        }
    })

[christian-bromann]

puppeteer core might be adding multiple events so can you please let know if I am right about it.

I am not sure 😄

[strusbergAlex]

Also happens on my tests. I am not using puppeteer.

[newtewt]

I had generated a sample repo to reproduce this issue before finding this issue. 😄 We are using the devtools service and devtools protocol. Seeing similar with Runtime.consoleAPICalled and Log.entryAdded.

My example

[nikhil-sharma10]

Is there any we can use below chrome devtools protocol while adding a listener? browser.cdp('Audits','enable'); browser.on('Audits.issueAdded'); browser.url('https://google.com'); when i tried using it i am seeing its working fine in my local. but when used Jenkins to run it. Its throwing an error saying "Audits" domain doesn't have enable method. https://chromedevtools.github.io/devtools-protocol/tot/Audits/ its the chrome devtools audits domain. @christian-bromann any idea on this? or any other workaround you know to get the network logs while doing some actions not only by navigating to the URL?

[christian-bromann]

You might not be connected to a target. I recommend to use getPuppeteer and use the Puppeteer interface which hides away some of the complexities of CDP.

[tkmcmaster]

Is there any updates on this or a workaround? I'm not using puppeteer and am having issues with this. I'm currently working around it with a class that tries to detect the duplicates and ignore the duplicate but it's not always reliable.

[christian-bromann]

@tkmcmaster any contributions that fixes the problem are appreciate. Cheers!

[christian-bromann]

I can't reproduce this anymore with latest WebdriverIO v8. Closing.