webdriverio: [🐛 Bug]: Devtools does not work when wdio-video-reporter is enabled

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

7.7.5

Node.js Version

v14.17.3

Mode

WDIO Testrunner

Which capabilities are you using?

{
    maxInstances: 1,
    browserName: 'chrome',
    acceptInsecureCerts: true,
    'goog:chromeOptions': {
      args: ['--disable-gpu', '--window-size=1600,1200', '--no-sandbox', '--disable-dev-shm-usage'],
    },
  },

What happened?

When wdio-video-reporter is enabled, all devtools functions throw:

TypeError: browser.getMetrics is not a function TypeError: browser.getPerformanceScore is not a function etc

Commenting out the video reporter solves the issue.

What is your expected behavior?

Either have both work together, or a way to temporarily disable the video reporter while the performance tests are running.

How to reproduce the bug.

Use the example code:

https://webdriver.io/docs/devtools-service/#performance-testing

Relevant log output

[0-0] RUNNING in chrome - /test/specs/home.e2e.js
[0-0] TypeError in "Home.[HOME PAGE] Performance Check"
TypeError: browser.getPerformanceScore is not a function
    at HomePage.checkPerformance (/Users/eng7/git/Lively-Dev-Bundle/web/test/pageobjects/page.js:61:20)
    at Context.<anonymous> (/Users/eng7/git/Lively-Dev-Bundle/web/test/specs/home.e2e.js:6:14)
[0-0] FAILED in chrome - /test/specs/home.e2e.js

 "spec" Reporter:
------------------------------------------------------------------
[chrome 96.0.4664.110 mac os x #0-0] Running: chrome (v96.0.4664.110) on mac os x
[chrome 96.0.4664.110 mac os x #0-0] Session ID: 78f8a7c72cb60503b6a268468d7ac6fc
[chrome 96.0.4664.110 mac os x #0-0]
[chrome 96.0.4664.110 mac os x #0-0] » /test/specs/home.e2e.js
[chrome 96.0.4664.110 mac os x #0-0] Home
[chrome 96.0.4664.110 mac os x #0-0]    ✖ [HOME PAGE] Performance Check
[chrome 96.0.4664.110 mac os x #0-0]
[chrome 96.0.4664.110 mac os x #0-0] 1 failing (5.2s)
[chrome 96.0.4664.110 mac os x #0-0]
[chrome 96.0.4664.110 mac os x #0-0] 1) Home [HOME PAGE] Performance Check
[chrome 96.0.4664.110 mac os x #0-0] browser.getPerformanceScore is not a function
[chrome 96.0.4664.110 mac os x #0-0] TypeError: browser.getPerformanceScore is not a function
[chrome 96.0.4664.110 mac os x #0-0]     at HomePage.checkPerformance (/Users/eng7/git/Lively-Dev-Bundle/web/test/pageobjects/page.js:61:20)
[chrome 96.0.4664.110 mac os x #0-0]     at Context.<anonymous> (/Users/eng7/git/Lively-Dev-Bundle/web/test/specs/home.e2e.js:6:14)```

Code of Conduct

• I agree to follow this project’s Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues