Chrome Devtools Protocol via Selenium/Appium (English)
0 likes460 views
The document discusses the Chrome DevTools Protocol (CDP) and its integration with Selenium and Appium, focusing on how to communicate with the Google Chrome browser directly. It includes various commands and demonstrations on enabling features, executing commands, and accessing browser information through CDP. Additionally, it mentions security considerations and other frameworks like Playwright for automated testing.
![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"}
….](https://image.slidesharecdn.com/20200516-cdp-seleniumen-200516095500/85/Chrome-Devtools-Protocol-via-Selenium-Appium-English-8-320.jpg)
![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]](https://image.slidesharecdn.com/20200516-cdp-seleniumen-200516095500/85/Chrome-Devtools-Protocol-via-Selenium-Appium-English-26-320.jpg)
Chrome Devtools Protocol via Selenium/Appium (English)
- 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…
- 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