Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Chrome Devtools Protocol via Selenium/Appium (English)

130 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Chrome Devtools Protocol via Selenium/Appium (English)

  1. 1. Chrome DevTools Protocol via Selenium Selenium Japan User Community Online Meetup Kazuaki Matsuo
  2. 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. 3. Topics • What is Chrome DevTools Protocol • https://chromedevtools.github.io/devtools-protocol/ • Chrome DevTools Protocol via Selenium/Appium
  4. 4. Topics • What is Chrome DevTools Protocol • https://chromedevtools.github.io/devtools-protocol/ • Chrome DevTools Protocol via Selenium/Appium
  5. 5. What is Chrome DevTools Protocol • Communicate with Google Chrome browser directly • https://developers.google.com/web/tools/chrome-devtools/ • Demo…
  6. 6. Remote feature chrome://inspect —remote-debugger-port=9222 で起動する
  7. 7. Demo
  8. 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. 9. Recap-Chrome Devtools Protocol • Communicate with Google Chrome browser directly • https://developers.google.com/web/tools/chrome-devtools/ • Demo…
  10. 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. 11. Topics • What is Chrome DevTools Protocol • https://chromedevtools.github.io/devtools-protocol/ • Chrome DevTools Protocol via Selenium/Appium
  12. 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. 13. CDP via Selenium ChromeDriver port: 9515 Selenium clients Command: POST, /session/{session-id}/goog/cdp/execute
  14. 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. 15. Demo
  16. 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. 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. 18. Dig in the session storage to watch remote-debugger-address > driver.session_storage
  19. 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. 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. 21. Demo
  22. 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. 23. CDP command over Appium
  24. 24. For Android Chrome • Of course, the CDP command is available on Appium • It requires Appium 1.18.0+
  25. 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. 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. 27. Topics • What is Chrome DevTools Protocol • Chrome DevTools Protocol via Selenium/Appium
  28. 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. 29. Have a good automation Twitter: @Kazu_cocoa

×