This document discusses using the Chrome DevTools Protocol (CDP) via Selenium and Appium to control and inspect Chrome and Android Chrome browsers. It provides examples of executing CDP commands through Selenium for Chrome on desktop and through Appium for Android Chrome. The CDP allows programs to remotely control and inspect browser activity and state.

1. Chrome DevTools Protocol
via Selenium
5 Selenium

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

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

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

5. Chrome DevTools Protocol
• Google Chrome browser
• https://developers.google.com/web/tools/chrome-devtools/
• ( Chrome )

6. chrome://inspect —remote-debugger-port=9222

8. 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. CDP
• Google Chrome browser
• https://developers.google.com/web/tools/chrome-devtools/
• ( Chrome )

10. • ” ”
• Pupetter
• https://github.com/addyosmani/puppeteer-webperf
• HeadSpin
• CDP …
• JS

11. • 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
:
POST, /session/{session-id}/goog/cdp/execute

14. CDP via Selenium
ChromeDriver
port: 9515
Selenium clients
:
POST, /session/{session-id}/goog/cdp/execute
ChromeDriver
remote-debugger-address

15. CDP Selenium

16. > 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. remote-debugger-address …?
ChromeDriver
port: 9515
Selenium clients
:
POST, /session/{session-id}/goog/cdp/execute
ChromeDriver
remote-debugger-address

18. -remote-debugger-address
> driver.session_storage

19. -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. CURL
• CURL Selenium
• curl -X POST http://localhost:9515/session/{session_id}/goog/cdp/execute
-d '{"cmd": "Browser.getVersion", "params": {}}’
• ‘goog’ vendor
• MicrosoftEdge ’ms’
• webdriverio Pupetter

21. CURL CDP

22. CURL
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. Appium Android Chrome
CDP

24. Android Chrome
• Appium CDP Chrome
• Appium 1.18.0

25. 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
[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. • Chrome DevTools Protocol
• Chrome DevTools Protocol via Selenium/Appium

28. : playwright
• pipe Chrome CDP
• https://github.com/microsoft/playwright/blob/master/src/server/
chromium.ts#L177
• https://github.com/microsoft/playwright/tree/master/
browser_patches

29. Twitter: @Kazu_cocoa