Александр Баяндин (Badoo), Как использовать Chrome DevTools в Selenium тестах, CodeFest 2017

https://2017.codefest.ru/lecture/1158

Chrome DevTools — один из наиболее полезных инструментов веб-разработчика. Он позволяет получать исчерпывающую информацию о странице и запросах и эмулировать мобильные браузеры на медленных устройствах. В своём докладе Александр расскажет о том, как можно использовать мощь DevTools в Selenium-тестах и как сделать их отладку более удобной.

Transcript

1. Chrome DevTools в Selenium тестах Александр Баяндин
2. https://2017.codefest.ru/speaker/3158/
3. https://2017.codefest.ru/speaker/3158/
4. “ THIS IS THE MOST POPULAR DATING APP IN THE WORLD — Time
5. 400K Регистраций в день 5 Платформ 340M Пользователей 1.8ч Использование в день 350M Сообщений в день 21M DAU 60M MAU 10M Фотозагрузок в день О нас
6. 400K Регистраций в день 5 Платформ 340M Пользователей 1.8ч Использование в день 350M Сообщений в день 21M DAU 60M MAU 10M Фотозагрузок в день О нас
7. Платформы ✦ Desktop Web 5
8. Платформы ✦ Desktop Web ✦ iOS 5
9. Платформы ✦ Desktop Web ✦ iOS ✦ Android 5
10. Платформы ✦ Desktop Web ✦ iOS ✦ Android ✦ Windows Phone 5
11. Платформы ✦ Desktop Web ✦ iOS ✦ Android ✦ Windows Phone ✦ Mobile Web 5
12. Mobile Test Automation Платформы ✦ Desktop Web ✦ iOS ✦ Android ✦ Windows Phone ✦ Mobile Web 5
13. Mobile Test Automation Платформы ✦ Desktop Web ✦ iOS ✦ Android ✦ Windows Phone ✦ Mobile Web 5
14. Mobile Test Automation Платформы ✦ Desktop Web ✦ iOS ✦ Android ✦ Windows Phone ✦ Mobile Web 5
15. Mobile Test Automation 6
16. Mobile Test Automation 6 ✦ Ruby & Cucumber
17. Mobile Test Automation 6 ✦ Ruby & Cucumber ✦ Calabash
18. Mobile Test Automation 6 ✦ Ruby & Cucumber ✦ Calabash ✦ Winium.Mobile
19. Mobile Test Automation 6 ✦ Ruby & Cucumber ✦ Calabash ✦ Winium.Mobile ✦ Selenium + Chrome
20. План 7
21. План 7 ✦ Как видеть HTTP запросы во время прохождения теста
22. План 7 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools
23. План 7 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver
24. План 7 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста
25. План 7 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
26. DevTools
29. 10 DevTools
32. DevTools в тестах
38. – В нетворке пусто
39. – В нетворке пусто — А мы хитрее! ;)
48. – В нетворке пусто
49. – В нетворке пусто Почему?
50. План 28 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
51. DevTools https://developers.google.com/web/tools/chrome-devtools/
52. DevTools ✦ Это веб-приложение (html, css, js) https://developers.google.com/web/tools/chrome-devtools/
53. DevTools ✦ Это веб-приложение (html, css, js) ✦ Использует Chrome Debugging Protocol https://developers.google.com/web/tools/chrome-devtools/
54. +-+ |C| +----------+ |h| | DevTools |<---------------------------------->|r| +----------+ |o| |m| |e| +-+ 30
55. +-+ |C| +----------+ |h| | DevTools |<---------------------------------->|r| +----------+ |o| |m| |e| +-+ 30 Chrome Debugging Protocol
56. Chrome Debugging Protocol https://developer.chrome.com/devtools/docs/debugger-protocol
57. Chrome Debugging Protocol ✦ Реализован поверх WebSocket https://developer.chrome.com/devtools/docs/debugger-protocol
58. Chrome Debugging Protocol ✦ Реализован поверх WebSocket ✦ Команды https://developer.chrome.com/devtools/docs/debugger-protocol
59. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 32 Command, id=42
60. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 33 Result, id=42
61. Chrome Debugging Protocol ✦ Реализован поверх WebSocket ✦ Команды https://developer.chrome.com/devtools/docs/debugger-protocol
62. Chrome Debugging Protocol ✦ Реализован поверх WebSocket ✦ Команды ✦ Подписки на события https://developer.chrome.com/devtools/docs/debugger-protocol
63. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 35
64. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 35 Network.enable
65. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 36
66. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 36 request
67. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 36 request
68. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 37
69. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 37 response
70. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 37 response
71. План 38 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
72. Как работает драйвер
73. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ 40
74. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ Selenium / test 40
75. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ WebDriver Protocol Selenium / test 40
76. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ WebDriver Protocol Protocol Selenium / test 40
77. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ WebDriver Protocol Chrome Debugging Protocol Selenium / test 41 ChromeDriver Chrome
78. +------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+ WebDriver Protocol Chrome Debugging Protocol Selenium / test 41 ChromeDriver Chrome
79. +-+ +-+ +--------+ +------------+ |C| |T|<---->|Selenium|<---->|ChromeDriver|<------->|h| |e| +--------+ +------------+ |r| |s| |o| |t| ----------------------->|m| +-+ |e| +-+ DevTools 42
80. Возможно только одно одновременное подключениe Chrome Debugging Protocol https://developer.chrome.com/devtools/docs/debugger-protocol#simultaneous
81. +-+ +-+ +--------+ +------------+ |C| |T|<---->|Selenium|<---->|ChromeDriver|<------->|h| |e| +--------+ +------------+ |r| |s| |o| |t| ----------------------->|m| +-+ |e| +-+ 44 DevTools
82. +-+ +-+ +--------+ +------------+ |C| |T|<---->|Selenium|<---->|ChromeDriver|<------->|h| |e| +--------+ +------------+ |r| |s| |o| |t| ----------------------->|m| +-+ |e| +-+ / / / / / / / / / / 44 DevTools
83. Нужен прокси
84. +-+ +-+ +--------+ +------------+ |C| |T|<---->|Selenium|<---->|ChromeDriver|<------->|h| |e| +--------+ +------------+ |r| |s| |o| |t| ----------------------->|m| +-+ |e| +-+ / / / / / / / / / / 46 DevTools
85. +-+ +-+ +-+ +--------+ +------------+ |P| |C| |T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h| |e| +--------+ +------------+ |o|<->|r| |s| |x| |o| |t| ----------------->|y| |m| +-+ +-+ |e| +-+ 47 DevTools
86. Как встроить прокси? 48
87. Как работает драйвер. Часть 2
88. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ 50
89. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session 50
90. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session DesiredCapabilities 50
91. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session DesiredCapabilities chromeOptions 50
92. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session DesiredCapabilities chromeOptions binary 50
93. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session google-chrome DesiredCapabilities chromeOptions binary 50
94. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session google-chrome … --remote-debugging-port=X DesiredCapabilities chromeOptions binary 51
95. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session google-chrome … --remote-debugging-port=X 12000 < X < 13000 DesiredCapabilities chromeOptions binary 51
96. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ 52
97. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ /json/version 52
98. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } 52
99. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ /json/list /json/version 53
100. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ /json/list [{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …] /json/version 53
101. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ ws:/ /webSocketDebuggerUrl /json/list /json/version 54
102. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| |m| |i| |e| |v| +-+ |e| |r| +-+ ws:/ /webSocketDebuggerUrl /json/list /json/version set-up + chromeOptions 54
103. Как встроить прокси? 55
104. Как встроить прокси? Использовать свой скрипт в binary в ChromeOptions. 55
105. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session DesiredCapabilities chromeOptions binary 56
106. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session chrome-wrapper DesiredCapabilities chromeOptions binary 56
107. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session chrome-wrapper … --remote-debugging-port=X DesiredCapabilities chromeOptions binary 57
108. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session chrome-wrapper … --remote-debugging-port=X DesiredCapabilities chromeOptions binary portX 57
109. +-+ |C| |h| |r| |o| |m| |e| |D| |r| |i| |v| |e| |r| +-+ POST /session chrome-wrapper … --remote-debugging-port=X DesiredCapabilities chromeOptions binary portY portX 57
110. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ 58
111. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ /json/version portX 58
112. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ /json/version portX portY 58
113. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ /json/version portX portY 58
114. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ /json/version portX portY 58
115. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ ws ws DevTools portX portY 59
116. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ ws ws DevTools w s portX portX portY 59
117. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ : 12000 < X < 13000 ws ws DevTools w s portX portX portY 59
118. +-+ |C| |h| |r| +-+ |o| |C| |m| |h| |e| |r| |D| |o| |r| +--------------+ |m| |i| |DevTools Proxy| |e| |v| +--------------+ +-+ |e| |r| +-+ ws ws w s portZ portX portY 60 DevTools
119. План 61
120. План 61 ✦ Как видеть HTTP запросы во время прохождения теста
121. План 61 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools
122. План 61 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver
123. План 61 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста
124. План 61 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
125. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 62
126. +--------------+ | ChromeDriver | +-+ +--------------+ |C| |h| |r| |o| +----------+ |m| | DevTools | |e| +----------+ +-+ 63
127. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
128. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
129. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
130. https://youtu.be/JDtuXAptypY
131. https://youtu.be/JDtuXAptypY
133. devtools-proxy
134. План 67 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
135. Аналогичные решения 68
136. Аналогичные решения ✦ Remote debugger for Android 68
137. Remote Debugger for Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
138. Remote Debugger for Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
139. Аналогичные решения 71
140. Аналогичные решения ✦ Remote debugger for Android 71
141. Аналогичные решения ✦ Remote debugger for Android ✦ Headless Chrome 71
142. Headless Chrome https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
143. Headless Chrome 73
144. Headless Chrome 73 https://chrome-devtools-frontend.appspot.com /serve_file /${hash} /${devtoolsFrontendUrl} &remoteFrontend=true
145. Headless Chrome 73 https://chrome-devtools-frontend.appspot.com /serve_file /${hash} /${devtoolsFrontendUrl} &remoteFrontend=true
146. 74 /json/list [{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …] Headless Chrome
147. 74 /json/list [{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …] Headless Chrome
148. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome
149. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome
150. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome hash
151. ?
152. https://youtu.be/X-dL_eKB1VE
153. https://youtu.be/X-dL_eKB1VE
154. Иииха!
155. План 79 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
156. – А как запускать тесты на медленных устройствах?
157. Медленные устройства 81
158. Медленные устройства ✦ Медленная сеть 81
159. Медленные устройства 82
160. Медленные устройства ✦ Медленная сеть — Network Throttling 82
161. Медленные устройства https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-emulateNetworkConditions
162. Медленные устройства ✦ Медленная сеть — Network Throttling 84
163. Медленные устройства ✦ Медленная сеть — Network Throttling ✦ Слабый процессор 84
164. Медленные устройства ✦ Медленная сеть — Network Throttling ✦ Слабый процессор — CPU Throttling 85
165. Медленные устройства https://chromedevtools.github.io/debugger-protocol-viewer/tot/Emulation/#method-setCPUThrottlingRate
166. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 87 Command, id=42
167. +-+ +-+ +-+ +--------+ +------------+ |P| |C| |T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h| |e| +--------+ +------------+ |o|<->|r| |s| |x| |o| |t|<------------------------------------->|y| |m| +-+ +-+ |e| +-+ WebSocket Connection 88
168. > { "id":0, "method":"Emulation.setCPUThrottlingRate", "params":{ "rate": 10 } } 89
169. > { "id":0, "method":"Emulation.setCPUThrottlingRate", "params":{ "rate": 10 } } N times slower 89
170. https://youtu.be/NU46EkrRoYo
171. https://youtu.be/NU46EkrRoYo
172. Полезно знать 91
173. Полезно знать ✦ devtools-proxy полностью совместим с Selenium 91
174. Полезно знать ✦ devtools-proxy полностью совместим с Selenium ✦ Пока нет поддержки Windows 91
175. Полезно знать ✦ devtools-proxy полностью совместим с Selenium ✦ Пока нет поддержки Windows ✦ Только для Chromium / Google Chrome 91
176. Планы на будущее
177. Планы на будущее 93
178. Планы на будущее 93 ✦ Научиться останавливаться на debugger / breakpoints
179. Планы на будущее 93 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification
180. https://gauntface.github.io/simple-push-demo/
181. https://gauntface.github.io/simple-push-demo/
182. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification
183. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android
184. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android ✦ Поддержка Windows (для chrome-wrapper)
185. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android ✦ Поддержка Windows (для chrome-wrapper) ✦ Поддержка Firefox / Edge
186. Сегодня я многое понял… 97
187. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста 97
188. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста ✦ Как видеть выполнение теста 97
189. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools 97
190. Спасибо!
191. Где взять-то?
192. bayandin / devtools-proxy
193. bayandin / devtools-proxy BadooDev & BadooTech (en) Badoo tech.badoo.com techblog.badoo.com (en) abayandin
194. The original, largest and leading dating network