WebDriver/RemoteProtocol/GutenbergCDPUsage

Usage of CDP methods in https://github.com/WordPress/gutenberg end-to-end tests.

Running the gutenberg tests against Firefox

Prerequisites

The following is a quickstart based on Gutenberg's docs.

1. Make sure Docker is running
2. nvm install in gutenberg dir to ensure correct node version is installed
3. npm install -- you might see some warnings, this is fine.
4. npm run build
5. Build local env: npm run env install. Avoid running npm run dev; takes a long time, not useful.
6. Start the environment: npm run env start

To bring down the local WordPress instance later run npm run env stop.

Firefox prerequisites

Update the config in packages/scripts/config/puppeteer.config.js:

module.exports = {
    launch: {
        headless: false,
        slowMo: 0,
        executablePath: 'path/to/firefox',
    },
};

Copy our modifications of Puppeteer:

cp -r <mozilla-central>/remote/test/puppeteer/lib node_modules/puppeteer/
npm run build

Running tests

Select Firefox by setting PUPPETEER_PRODUCT, otherwise Chromium will be used. `DEBUG=*` will show all debug logs, or you can filter it as in the example below:

PUPPETEER_PRODUCT=firefox DEBUG=puppeteer:* npm run test-e2e

To run a specific test:

npm run test-e2e links.test.js

The --puppeteer-interactive option can be useful for debugging:

npm run test-e2e links.test.js -- --puppeteer-interactive

Equivalent to PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test-e2e:watch

Methods

From https://bugzilla.mozilla.org/show_bug.cgi?id=1539202#c9:

$ DEBUG=puppeteer:* npm run test-e2e packages/e2e-tests/specs/ > gutenberg-logs 2>&1
$ cat gutenberg-logs  | grep -oE '"method":"[^"]+\.[^"]+"' | sed 's/"method":"//' | sed 's/"//' | sort | uniq

• DOM.getBoxModel
• DOM.getContentQuads
• DOM.setFileInputFiles
• Emulation.setDeviceMetricsOverride
• Emulation.setTouchEmulationEnabled
• Input.dispatchKeyEvent
• Input.dispatchMouseEvent
• Inspector.detached
• Log.enable
• Log.entryAdded
• Network.continueInterceptedRequest
• Network.dataReceived
• Network.emulateNetworkConditions
• Network.enable
• Network.loadingFailed
• Network.loadingFinished
• Network.requestIntercepted
• Network.requestServedFromCache
• Network.requestWillBeSent
• Network.resourceChangedPriority
• Network.responseReceived
• Network.setCacheDisabled
• Network.setRequestInterception
• Page.bringToFront
• Page.domContentEventFired
• Page.enable
• Page.frameAttached
• Page.frameClearedScheduledNavigation
• Page.frameDetached
• Page.frameNavigated
• Page.frameResized
• Page.frameScheduledNavigation
• Page.frameStartedLoading
• Page.frameStoppedLoading
• Page.getFrameTree
• Page.handleJavaScriptDialog
• Page.javascriptDialogClosed
• Page.javascriptDialogOpening
• Page.lifecycleEvent
• Page.loadEventFired
• Page.navigate
• Page.navigatedWithinDocument
• Page.reload
• Page.setLifecycleEventsEnabled
• Page.windowOpen
• Performance.enable
• Runtime.callFunctionOn
• Runtime.consoleAPICalled
• Runtime.enable
• Runtime.evaluate
• Runtime.executionContextCreated
• Runtime.executionContextDestroyed
• Runtime.executionContextsCleared
• Runtime.getProperties
• Runtime.releaseObject
• Security.enable
• Security.securityStateChanged
• Target.setAutoAttach

Methods & Events ranked by frequency

Note that Puppeteer doesn't necessarily depend on many of the Network, Runtime, Fetch and Page items.

Methods

cat gutenberg-logs | grep '"id":'  | grep -oE '"method":"[^"]+\.[^"]+"' | sed 's/"method":"//' | sed 's/"//' | sort | uniq -c | sort -r

15594 Input.dispatchKeyEvent
12738 Runtime.callFunctionOn
7324 Input.dispatchMouseEvent
3088 Runtime.releaseObject
1893 Page.getLayoutMetrics
1893 DOM.getContentQuads
1101 Runtime.evaluate
1091 Fetch.continueRequest
 977 DOM.resolveNode
 977 DOM.describeNode
 636 Emulation.setTouchEmulationEnabled
 636 Emulation.setDeviceMetricsOverride
 595 Page.navigate
 496 Runtime.getProperties
 267 Page.handleJavaScriptDialog
  83 Target.setAutoAttach
  83 Target.attachToTarget
  83 Runtime.enable
  83 Performance.enable
  83 Page.setLifecycleEventsEnabled
  83 Page.setInterceptFileChooserDialog
  83 Page.getFrameTree
  83 Page.enable
  83 Page.createIsolatedWorld
  83 Page.addScriptToEvaluateOnNewDocument
  83 Network.enable
  83 Log.enable
  81 Target.closeTarget
  80 Target.setDiscoverTargets
  79 Target.getBrowserContexts
  79 Target.createTarget
  35 Page.reload
  23 Input.insertText
  14 Network.setCacheDisabled
  12 Fetch.fulfillRequest
   8 Page.bringToFront
   8 Fetch.enable
   6 Fetch.disable
   4 Network.emulateNetworkConditions
   4 DOM.getBoxModel
   3 DOM.setFileInputFiles

Events

These events are emitted during a gutenberg test run. Gutenberg tests don't explicitly listen to any CDP events.

cat gutenberg-logs | grep -v '"id":'  | grep -oE '"method":"[^"]+\.[^"]+"' | sed 's/"method":"//' | sed 's/"//' | sort | uniq -c | sort -r

92569 Network.dataReceived
92363 Network.requestWillBeSent
92274 Network.loadingFinished
83137 Network.responseReceived
68170 Network.requestServedFromCache
24018 Network.responseReceivedExtraInfo
8669 Page.lifecycleEvent
6573 Network.requestWillBeSentExtraInfo
3597 Target.targetInfoChanged
2113 Runtime.consoleAPICalled
1626 Runtime.executionContextCreated
1456 Runtime.executionContextDestroyed
1104 Fetch.requestPaused
 755 Page.navigatedWithinDocument
 733 Page.frameStoppedLoading
 731 Page.frameStartedLoading
 730 Page.frameNavigated
 725 Page.loadEventFired
 724 Page.domContentEventFired
 717 Runtime.executionContextsCleared
 555 Target.targetCreated
 267 Page.javascriptDialogOpening
 267 Page.javascriptDialogClosed
 241 Target.targetDestroyed
 177 Page.frameResized
  83 Target.attachedToTarget
  81 Target.detachedFromTarget
  78 Inspector.detached
  56 Network.resourceChangedPriority
  35 Page.frameScheduledNavigation
  35 Page.frameRequestedNavigation
  35 Page.frameClearedScheduledNavigation
  13 Page.frameAttached
  11 Page.frameDetached
   8 Log.entryAdded
   3 Page.windowOpen
   3 Network.loadingFailed