Proposed changes

Continuation from #5505, this feature allows devtools commands to be used for multiremote. The commands can be used with browser object itself, which produces array result for all instances, or with an individual instance.

// example cap
cap = 
{
  chrome1: {
    capabilities: {
      browserName: 'chrome'
    }
  },
 chrome2: {
    capabilities: {
      browserName: 'chrome'
    }
  },
}

await browser.cdp('Network', 'getCookies') // returns an array containing result for both instance
await chrome1.cdp('Network', 'getCookies')  // returns only result for chrome1

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist

• I have read the CONTRIBUTING doc
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• I have added proper type definitions for new commands (if appropriate)

Further comments

This change is pretty much done by moving the code from devtools/index.ts to devtools/commands.ts and having a separate command object for each browser instance. All commands can be used by an individual instance. However, because I try to do this while wanting to make as little changes as possible, not all commands can be used by browser and those command are: getNodeId , getNodeIds, startTracing, endTracing, getTraceLogs, and getPageWeight (the commands that originally exist in commands.ts file). If needed, I can make more change to allow those commands to be used by browser.

Also, performance testing with lighthouse is a little bit tricky to use. Because of the way beforeCommand work, I don't have a way to determine which instance the command is coming from, and this can cause the code to hang because onLoadEventFired and onFrameNavigated are not triggered.

// This works
await chrome1.enablePerformanceAudits()
await chrome1.url('https://webdriver.io')
await chrome1.disablePerformanceAudits()

// This will cause timeout
await chrome1.enablePerformanceAudits()
await chrome1.url('https://webdriver.io')
await chrome2.url('https://webdriver.io') // <---this line will causes chrome1 to hang because beforeCommand triggers 
                                       //  for both instances and chrome1 will get stuck waiting for onLoadEventFired to finish

So for performance testing, a user will have to do one instance at a time while having enablePerformanceAudits and disablePerformanceAudits before and after it.

Nothing change if a user is using normal mode.

Reviewers: @webdriverio/project-committers