Chrome Devtools Protocol via Selenium/Appiumのオンライン資料

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