"wdio:devtoolsOptions" cannot be set on WebDriverIO.RemoteCapability type

Environment (please complete the following information):

• WebdriverIO version: 7.2.3 [e.g. 4.13.2]
• Mode:Standalone mode [Standalone mode or WDIO Testrunner]
• If WDIO Testrunner, running sync/async: [e.g. sync/async]
• Node.js version:14.16.0 [e.g. 8.11.2]
• NPM version:6.14.11 [e.g. 5.8.0]
• Browser name and version:Chrome 89 [e.g. Chrome 68]
• Platform name and version:MacOS Big Sur [e.g. Windows 10]
• Additional wdio packages used (if applicable): [e.g. @wdio/spec reporter, @wdio/selenium-standalone service]

Config of WebdriverIO An example of how you configured WebdriverIO config

{
    browserName: 'chrome',
    'wdio:devtoolsOptions': {
        headless: true,
        defaultViewport: {
            width: 800,
            height: 600,
            deviceScaleFactor: 1,
            isMobile: false
        }
    }
}

Describe the bug It seems like @wdio/types does not support this Capability format. https://github.com/webdriverio/webdriverio/blob/main/packages/wdio-types/src/Capabilities.ts

Should @wdio/types include WDIODevtoolsOptions to support what is described in devtools package readme for typescript? https://github.com/webdriverio/webdriverio/tree/main/packages/devtools

To Reproduce Steps to reproduce the behavior: Attempt to run example code in a typescipt node file…

browser = await remote({
     automationProtocol: 'devtools',
      logLevel: 'debug',
      capabilities: {
        browserName: 'chrome',
        "wdio:devtoolsOptions": {
            headless: true
        }
      },
    });

[Include code or an example repository that can easily be set up]

Expected behavior Move devtools type/interface definitions to @wdio/types. Specifically, allow ExtendedCapabilities to be a type of RemoteCapability. https://github.com/webdriverio/webdriverio/blob/main/packages/devtools/src/types.ts

Additional context Trying to set headless the default devtools puppeteer driver in standalone mode.

Please use the correct markdown

[christian-bromann]

Ok, looked into it and found that you need to add types to your tsconfig:

"types": ["webdriverio/async", "devtools"],  

[jonathan-gee-cko]

So the test framework this is currently used in mainly focuses around API coverage, and a few scenarios require some UI configurations within a browser.

Browser sessions are cleaned up at the After hook, so each browser instance is self-contained within a scenario. Being able to spin up a browser instance (and further browser interaction) as a Given step in a scenario is the main requirement here. This is all working fine with simple capabilities and I’m also able to switch to webdriver as well.

Regardless of the use case, I’m not a typescript expert so I was hoping someone could shed some light as to why the interfaces here are not available when defining RemoteOptions (and RemoteCapabilities within RemoteOptions).