WebDriver/RemoteProtocol/GutenbergCDPUsage: Difference between revisions

m
Whimboo moved page Remote/GutenbergCDPUsage to WebDriver/RemoteProtocol/GutenbergCDPUsage: Reorganization for WebDriver BiDi project documenation
m (→‎Methods ranked by frequency: Separate Methods from ranked list)
m (Whimboo moved page Remote/GutenbergCDPUsage to WebDriver/RemoteProtocol/GutenbergCDPUsage: Reorganization for WebDriver BiDi project documenation)
 
(13 intermediate revisions by 3 users not shown)
Line 2: Line 2:


__FORCETOC__
__FORCETOC__
== Running the gutenberg tests against Firefox ==
=== Prerequisites ===
The following is a quickstart based on Gutenberg's [https://github.com/WordPress/gutenberg/blob/master/docs/contributors/testing-overview.md#end-to-end-testing docs].
# Make sure Docker is running
# <code>nvm install</code> in gutenberg dir to ensure correct node version is installed
# <code>npm ci</code> -- you might see some warnings, this is fine.
# <code>npm run build</code>
# Build local env: <code>npm run wp-env install</code>. Avoid running <code>npm run dev</code>; takes a long time, not useful.
# Start the environment: <code>npm run wp-env start</code>
To stop the local WordPress instance: <code>npm run env stop</code>
=== Firefox prerequisites ===
Update the config in <code>packages/scripts/config/puppeteer.config.js</code>:
<pre>
module.exports = {
    launch: {
        headless: false,
        slowMo: 0,
        executablePath: 'path/to/firefox',
    },
};
</pre>
<small>Note: Puppeteer can download and install Firefox Nightly and you can use the path it installs into for the executablePath. For example, on macOS: <code>path/to/gutenberg/node_modules/puppeteer/.local-firefox/mac-80/Firefox\ Nightly.app/Contents/MacOS/firefox</code></small>
# Copy Firefox's modifications of Puppeteer:
<pre>
cp -r <mozilla-central>/remote/test/puppeteer/ node_modules/puppeteer/
npm run build
</pre>
=== Running tests ===
Select Firefox by setting <code>PUPPETEER_PRODUCT</code>, otherwise Chromium will be used. `DEBUG=*` will show all debug logs, or you
can filter it as in the example below:
<pre>
PUPPETEER_PRODUCT=firefox DEBUG=puppeteer:* npm run test-e2e
</pre>
To run a specific test:
<pre>
npm run test-e2e links.test.js
</pre>
The <code>--puppeteer-interactive</code> option can be useful for debugging:
<pre>
npm run test-e2e links.test.js -- --puppeteer-interactive
</pre>
Equivalent to <code>PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test-e2e:watch</code>
=== Simple tests to consider ===
* mentions.tests.js
* post-visibility.test.js
* manage-reusable-blocks.test.js
* style-variation-test.js


== Methods ==
== Methods ==
Line 72: Line 140:
* Target.setAutoAttach
* Target.setAutoAttach


== Methods & Events logged during test setup ==
=== Methods ===
<pre>
cat visit-admin-page.log create-new-post.log | grep '"id":'  | grep -oE '"method":"[^"]+\.[^"]+"' | sed 's/"method":"//' | sed 's/"//' | sort | uniq -c | sort -r
  52 Runtime.callFunctionOn
  52 Input.dispatchKeyEvent
  16 Runtime.releaseObject
  11 Runtime.evaluate
  9 Input.dispatchMouseEvent
  8 Page.navigate
  6 Emulation.setDeviceMetricsOverride
  4 Target.setDiscoverTargets
  3 Page.getLayoutMetrics
  3 DOM.getContentQuads
  2 Target.setAutoAttach
  2 Target.getBrowserContexts
  2 Target.createTarget
  2 Target.closeTarget
  2 Target.attachToTarget
  2 Runtime.enable
  2 Performance.enable
  2 Page.setInterceptFileChooserDialog
  2 Page.getFrameTree
  2 Page.enable
  2 Page.createIsolatedWorld
  2 Page.addScriptToEvaluateOnNewDocument
  2 Network.enable
  2 Log.enable
  1 DOM.resolveNode
  1 DOM.describeNode
</pre>
=== Events ===
<pre>
cat visit-admin-page.log create-new-post.log | grep -v '"id":'  | grep -oE '"method":"[^"]+\.[^"]+"' | sed 's/"method":"//' | sed 's/"//' | sort | uniq -c | sort -r
820 Network.dataReceived
576 Network.requestWillBeSent
571 Network.loadingFinished
560 Network.responseReceived
298 Network.responseReceivedExtraInfo
275 Network.requestServedFromCache
273 Network.requestWillBeSentExtraInfo
110 Page.lifecycleEvent
  53 Target.targetInfoChanged
  24 Runtime.executionContextCreated
  20 Runtime.executionContextDestroyed
  16 Target.targetCreated
  14 Runtime.consoleAPICalled
  10 Runtime.executionContextsCleared
  10 Page.loadEventFired
  10 Page.frameNavigated
  10 Page.frameStoppedLoading
  10 Page.frameStartedLoading
  10 Page.domContentEventFired
  8 Page.navigatedWithinDocument
  6 Emulation.setTouchEmulationEnabled
  6 Page.frameResized
  5 Target.targetDestroyed
  3 Network.resourceChangedPriority
  3 Log.entryAdded
  2 Target.detachedFromTarget
  2 Target.attachedToTarget
  2 Page.setLifecycleEventsEnabled
  2 Page.frameScheduledNavigation
  2 Page.frameRequestedNavigation
  2 Page.frameClearedScheduledNavigation
  2 Inspector.detached
</pre>


== Methods & Events ranked by frequency ==
== Methods & Events ranked by frequency ==
Line 77: Line 216:
Note that Puppeteer doesn't necessarily depend on many of the Network, Runtime, Fetch and Page items.
Note that Puppeteer doesn't necessarily depend on many of the Network, Runtime, Fetch and Page items.


=== Methods only ===
=== Methods ===


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


<pre>
15594 Input.dispatchKeyEvent
14924 Input.dispatchKeyEvent
12738 Runtime.callFunctionOn
12462 Runtime.callFunctionOn
7324 Input.dispatchMouseEvent
7709 Input.dispatchMouseEvent
3088 Runtime.releaseObject
3107 Runtime.releaseObject
1893 Page.getLayoutMetrics
1891 Page.getLayoutMetrics
1893 DOM.getContentQuads
1891 DOM.getContentQuads
1101 Runtime.evaluate
1514 Runtime.executionContextCreated
1091 Fetch.continueRequest
1019 Runtime.evaluate
  977 DOM.resolveNode
  947 DOM.resolveNode
  977 DOM.describeNode
  947 DOM.describeNode
  636 Emulation.setTouchEmulationEnabled
  881 Fetch.continueRequest
  636 Emulation.setDeviceMetricsOverride
676 Page.frameNavigated
  595 Page.navigate
598 Emulation.setTouchEmulationEnabled
  496 Runtime.getProperties
  598 Emulation.setDeviceMetricsOverride
  267 Page.handleJavaScriptDialog
  560 Page.navigate
   83 Target.setAutoAttach
  529 Runtime.getProperties
   83 Target.attachToTarget
  238 Page.handleJavaScriptDialog
   83 Runtime.enable
   81 Target.setAutoAttach
   83 Performance.enable
   81 Target.attachToTarget
   83 Page.setLifecycleEventsEnabled
   81 Runtime.enable
   83 Page.setInterceptFileChooserDialog
   81 Performance.enable
   83 Page.getFrameTree
   81 Page.setLifecycleEventsEnabled
   83 Page.enable
   81 Page.setInterceptFileChooserDialog
   83 Page.createIsolatedWorld
   81 Page.getFrameTree
   83 Page.addScriptToEvaluateOnNewDocument
   81 Page.enable
   83 Network.enable
   81 Page.createIsolatedWorld
   83 Log.enable
   81 Page.addScriptToEvaluateOnNewDocument
   81 Target.closeTarget
   81 Network.enable
   80 Target.setDiscoverTargets
   81 Log.enable
   79 Target.getBrowserContexts
   79 Target.closeTarget
   79 Target.createTarget
   78 Target.setDiscoverTargets
   35 Page.reload
   77 Target.getBrowserContexts
   23 Input.insertText
   77 Target.createTarget
   28 Page.reload
   22 Input.insertText
   14 Network.setCacheDisabled
   14 Network.setCacheDisabled
   12 Fetch.fulfillRequest
   12 Fetch.fulfillRequest
Line 122: Line 259:
   8 Fetch.enable
   8 Fetch.enable
   6 Fetch.disable
   6 Fetch.disable
  4 Network.emulateNetworkConditions
   4 DOM.getBoxModel
   4 DOM.getBoxModel
   3 DOM.setFileInputFiles
   3 DOM.setFileInputFiles
  2 Network.emulateNetworkConditions
</pre>
</pre>


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


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


65119 Network.dataReceived
92569 Network.dataReceived
56977 Network.requestWillBeSent
92363 Network.requestWillBeSent
56906 Network.loadingFinished
92274 Network.loadingFinished
55864 Network.responseReceived
83137 Network.responseReceived
37106 Network.requestServedFromCache
68170 Network.requestServedFromCache
14924 Input.dispatchKeyEvent
24018 Network.responseReceivedExtraInfo
12462 Runtime.callFunctionOn
8669 Page.lifecycleEvent
7709 Input.dispatchMouseEvent
6573 Network.requestWillBeSentExtraInfo
6232 Page.lifecycleEvent
3597 Target.targetInfoChanged
3367 Target.targetInfoChanged
2113 Runtime.consoleAPICalled
3107 Runtime.releaseObject
1626 Runtime.executionContextCreated
1891 Page.getLayoutMetrics
1456 Runtime.executionContextDestroyed
1891 DOM.getContentQuads
1104 Fetch.requestPaused
1514 Runtime.executionContextCreated
  755 Page.navigatedWithinDocument
1510 Runtime.consoleAPICalled
  733 Page.frameStoppedLoading
1346 Runtime.executionContextDestroyed
  731 Page.frameStartedLoading
1019 Runtime.evaluate
  730 Page.frameNavigated
947 DOM.resolveNode
  725 Page.loadEventFired
947 DOM.describeNode
724 Page.domContentEventFired
893 Fetch.requestPaused
  717 Runtime.executionContextsCleared
  881 Fetch.continueRequest
  555 Target.targetCreated
699 Page.navigatedWithinDocument
  267 Page.javascriptDialogOpening
  681 Page.frameStoppedLoading
  267 Page.javascriptDialogClosed
  678 Page.frameStartedLoading
  241 Target.targetDestroyed
  676 Page.frameNavigated
177 Page.frameResized
  674 Page.domContentEventFired
   83 Target.attachedToTarget
  666 Runtime.executionContextsCleared
   81 Target.detachedFromTarget
  664 Page.loadEventFired
   78 Inspector.detached
621 Target.targetCreated
   56 Network.resourceChangedPriority
  598 Emulation.setTouchEmulationEnabled
   35 Page.frameScheduledNavigation
598 Emulation.setDeviceMetricsOverride
   35 Page.frameRequestedNavigation
560 Page.navigate
   35 Page.frameClearedScheduledNavigation
529 Runtime.getProperties
   13 Page.frameAttached
238 Page.javascriptDialogOpening
   11 Page.frameDetached
  238 Page.javascriptDialogClosed
   8 Log.entryAdded
  238 Page.handleJavaScriptDialog
235 Target.targetDestroyed
  89 Page.frameResized
   81 Target.setAutoAttach
  81 Target.attachedToTarget
   81 Target.attachToTarget
  81 Runtime.enable
  81 Performance.enable
  81 Page.setLifecycleEventsEnabled
  81 Page.setInterceptFileChooserDialog
  81 Page.getFrameTree
  81 Page.enable
  81 Page.createIsolatedWorld
  81 Page.addScriptToEvaluateOnNewDocument
  81 Network.enable
  81 Log.enable
  79 Target.detachedFromTarget
  79 Target.closeTarget
   78 Target.setDiscoverTargets
   77 Target.getBrowserContexts
   77 Target.createTarget
  30 Page.frameScheduledNavigation
   30 Page.frameRequestedNavigation
   30 Page.frameClearedScheduledNavigation
   28 Page.reload
  22 Input.insertText
  14 Network.setCacheDisabled
  12 Fetch.fulfillRequest
   11 Network.resourceChangedPriority
  10 Page.frameAttached
   8 Page.bringToFront
  8 Fetch.enable
  7 Page.frameDetached
  6 Fetch.disable
  4 Log.entryAdded
  4 DOM.getBoxModel
   3 Page.windowOpen
   3 Page.windowOpen
   3 Network.loadingFailed
   3 Network.loadingFailed
  3 DOM.setFileInputFiles
  2 Network.emulateNetworkConditions
</pre>
</pre>
canmove, Confirmed users, Bureaucrats and Sysops emeriti
4,747

edits