English edition of https://www.slideshare.net/KazuMatsu/chrome-devtools-protocol-via-seleniumappium-japanese

1. Chrome DevTools Protocol
via Selenium
Selenium Japan User Community Online Meetup
Kazuaki Matsuo

2. About Me
• Kazuaki Matsuo, KazuCocoa
• HeadSpin, Inc.
• Senior Software Engineer, Device Automation
• ex-Cookpad、ACCESS
• https://www.headspin.io/
• OSS
• Develop Appium project

3. Topics
• What is Chrome DevTools Protocol
• https://chromedevtools.github.io/devtools-protocol/
• Chrome DevTools Protocol via Selenium/Appium

4. Topics
• What is Chrome DevTools Protocol
• https://chromedevtools.github.io/devtools-protocol/
• Chrome DevTools Protocol via Selenium/Appium

5. What is Chrome DevTools Protocol
• Communicate with Google Chrome browser directly
• https://developers.google.com/web/tools/chrome-devtools/
• Demo…

6. Remote feature
chrome://inspect —remote-debugger-port=9222
で起動する

7. Demo

8. Requests to chrome browser on the WebSocket
=> {"id":1,"method":"Network.enable","params":{"maxPostDataSize":65536}}
=> {"id":2,"method":"Page.enable"}
=> {"id":3,"method":"Page.getResourceTree"}
=> {"id":4,"method":"Runtime.enable"}
=> {"id":5,"method":"Debugger.enable","params":{"maxScriptsCacheSize":10000000}}
=> {"id":6,"method":"Debugger.setPauseOnExceptions","params":{"state":"none"}}
=> {"id":7,"method":"Debugger.setAsyncCallStackDepth","params":{"maxDepth":32}}
=> {"id":8,"method":"Profiler.enable"}
=> {"id":9,"method":"Log.enable"}
=> {"id":10,"method":"Log.startViolationsReport","params":{"config":[{"name":"longTask","threshold":200},
{"name":"longLayout","threshold":30},{"name":"blockedEvent","threshold":100},{"name":"blockedParser","threshold":-1},
{"name":"handler","threshold":150},{"name":"recurringHandler","threshold":50},
{"name":"discouragedAPIUse","threshold":-1}]}}
=> {"id":11,"method":"DOM.enable"}
=> {"id":12,"method":"CSS.enable"}
=> {"id":13,"method":"Overlay.enable"}
….

9. Recap-Chrome Devtools Protocol
• Communicate with Google Chrome browser directly
• https://developers.google.com/web/tools/chrome-devtools/
• Demo…

10. What can do
• e.g. Measure performance on the browser
• Pupetter can do the below link via CDP feature
• https://github.com/addyosmani/puppeteer-webperf
• Cannot get native contexts. Then, external service like HeadSpin is a
good place :)
• Please check the CDP page…
• It allows users to download an arbitrary file, for example, so please take
care of security issues when you make the debugger port public

11. Topics
• What is Chrome DevTools Protocol
• https://chromedevtools.github.io/devtools-protocol/
• Chrome DevTools Protocol via Selenium/Appium

12. Chrome Devtools via Selenium
https://source.chromium.org/chromium/chromium/src/+/master:chrome/test/chromedriver/server/http_handler.cc;l=885?q=%2Fcdp%2Fexecute&ss=chromium&originalUrl=https:%2F

13. CDP via Selenium
ChromeDriver
port: 9515
Selenium clients
Command:
POST, /session/{session-id}/goog/cdp/execute

14. CDP via Selenium
ChromeDriver
port: 9515
Selenium clients
Command:
POST, /session/{session-id}/goog/cdp/execute
ChromeDriver
launches a browser
with
‘remote-debugger-address’
argument

15. Demo

16. Demo
> driver = Selenium::WebDriver.for :chrome, url: 'http://localhost:9515'
=> #<Selenium::WebDriver::Chrome::Driver:0x4d11f74261f6ab42 browser=:chrome>
> driver.get 'http://youtube.com'
=> nil
> driver.execute_cdp 'Browser.getVersion'
=> {"jsVersion"=>"8.1.307.32",
"product"=>"Chrome/81.0.4044.138",
"protocolVersion"=>"1.3",
"revision"=>"@8c6c7ba89cc9453625af54f11fd83179e23450fa",
"userAgent"=>
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/81.0.4044.138 Safari/537.36”}
> driver.execute_cdp ‘Page.navigate’, { url: ‘http://www.selenium.jp/’ }

17. Where is remote-debugger-address?
ChromeDriver
port: 9515
Selenium clients
Command:
POST, /session/{session-id}/goog/cdp/execute
ChromeDriver
launches a browser
with
‘remote-debugger-address’
argument

18. Dig in the session storage
to watch remote-debugger-address
> driver.session_storage

19. Dig in the session storage
to watch remote-debugger-address
> driver.session_storage
=> #<Selenium::WebDriver::HTML5::SessionStorage:0x00007fcf3802a418
@bridge=
#<Selenium::WebDriver::Remote::W3C::Bridge:0x00007fcf6010bd50
@browser=:chrome,
@capabilities=
#<Selenium::WebDriver::Remote::W3C::Capabilities:0x00007fcf6010bdc8
@capabilities=
{:proxy=>nil,
:browser_name=>"chrome",
……
{"chromedriverVersion"=>
"80.0.3987.106 (f68069574609230cf9b635cd784cfb1bf81bb53a-refs/branch-heads/3987@{#882})",
"userDataDir"=>
"/var/folders/34/2222sh8n27d6rcp7jqlkw8km0000gn/T/.com.google.Chrome.N74Q8x"},
"goog:chromeOptions"=>{"debuggerAddress"=>"localhost:53224"},
"networkConnectionEnabled"=>false,
"setWindowRect"=>true,
"strictFileInteractability"=>false,
"unhandledPromptBehavior"=>"dismiss and notify"}>,
@file_detector=nil,

20. Post the command via CURL
• Easy to add the command since you can send the command via
CURL
• curl -X POST http://localhost:9515/session/{session_id}/goog/cdp/
execute -d '{"cmd": "Browser.getVersion", "params": {}}’
• ‘goog’ is a vendor prefix
• MicrosoftEdge is ’ms’
• webdriverio communicates with CDP over Pupetter

21. Demo

22. Demo
curl -X POST http://localhost:9515/session/{session_id}/goog/cdp/execute -d '{"cmd": "Browser.getVersion", "params": {}}’
> {"value":{"jsVersion":"8.1.307.32","product":"Chrome/
81.0.4044.138","protocolVersion":"1.3","revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","userAgent":"Mozilla/5.0 (Macintos
Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36”}}

23. CDP command over Appium

24. For Android Chrome
• Of course, the CDP command is available on Appium
• It requires Appium 1.18.0+

25. Demo
require 'appium_lib_core'
@core = Appium::Core.for url: 'http://localhost:4723/wd/hub', desired_capabilities: {
"deviceName": "Android",
"automationName": "UiAutomator2",
"autoAcceptsAlerts": "true",
"platformName": "Android",
"browserName": "chrome"
}
@driver = @core.start_driver
@driver.execute_cdp 'Browser.getVersion'
=> {"jsVersion"=>"6.9.427.23",
"product"=>"Chrome/69.0.3497.100",
"protocolVersion"=>"1.3",
"revision"=>"@8920e690dd011895672947112477d10d5c8afb09",
"userAgent"=>
"Mozilla/5.0 (Linux; Android 9; Android SDK built for x86_64 Build/PSR1.180720.093)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36"}

26. Appium server log
[HTTP] --> POST /wd/hub/session/11d6751a-def1-4a1d-a401-2d928bdf3065/goog/cdp/execute
[HTTP] {"cmd":"Browser.getVersion","params":{}}
[W3C (11d6751a)] Driver proxy active, passing request on via HTTP proxy
[debug] [WD Proxy] Matched '/wd/hub/session/11d6751a-def1-4a1d-a401-2d928bdf3065/goog/cdp/execute' to
command name 'executeCdp'
[debug] [WD Proxy] Proxying [POST /wd/hub/session/11d6751a-def1-4a1d-a401-2d928bdf3065/goog/cdp/
execute] to [POST http://127.0.0.1:8000/wd/hub/session/d54ca3ff98f09fa0a4c11ce14705b9e1/goog/cdp/
execute] with body: {"cmd":"Browser.getVersion","params":{}}
[debug] [WD Proxy] Got response with status 200:
{"sessionId":"d54ca3ff98f09fa0a4c11ce14705b9e1","status":0,"value":{"jsVersion":"6.9.427.23","product":"Chrome/
69.0.3497.100","protocolVersion":"1.3","revision":"@8920e690dd011895672947112477d10d5c8afb09","userAgent":"
Mozilla/5.0 (Linux; Android 9; Android SDK built for x86_64 Build/PSR1.180720.093) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36"}}
[WD Proxy] Replacing sessionId d54ca3ff98f09fa0a4c11ce14705b9e1 with 11d6751a-def1-4a1d-
a401-2d928bdf3065
[HTTP] <-- POST /wd/hub/session/11d6751a-def1-4a1d-a401-2d928bdf3065/goog/cdp/execute 200 411 ms - 388
[HTTP]

27. Topics
• What is Chrome DevTools Protocol
• Chrome DevTools Protocol via Selenium/Appium

28. One more thing: playwright
• Launches Chrome as pipe mode
• https://github.com/microsoft/playwright/blob/master/src/server/
chromium.ts#L177
• https://github.com/microsoft/playwright/tree/master/
browser_patches

29. Have a good automation
Twitter: @Kazu_cocoa