Chrome DevTools в Selenium тестах

CodeFest 2017 (https://2017.codefest.ru/lecture/1158)

Video: https://www.youtube.com/watch?v=9O47T8tW1Ps

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 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
120. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 62
121. +--------------+ | ChromeDriver | +-+ +--------------+ |C| |h| |r| |o| +----------+ |m| | DevTools | |e| +----------+ +-+ 63
122. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
123. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
124. +--------------+ +-+ | ChromeDriver | | | +-+ +--------------+ |P| |C| |r| |h| |o| |r| |x| |o| +----------+ |y| |m| | DevTools | | | |e| +----------+ +-+ +-+ 64
125. https://youtu.be/JDtuXAptypY
126. https://youtu.be/JDtuXAptypY
128. devtools-proxy
129. План 67 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
130. Аналогичные решения 68
131. Аналогичные решения ✦ Remote debugger for Android 68
132. Remote Debugger for Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
133. Remote Debugger for Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
134. Аналогичные решения 71
135. Аналогичные решения ✦ Remote debugger for Android 71
136. Аналогичные решения ✦ Remote debugger for Android ✦ Headless Chrome 71
137. Headless Chrome https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
138. Headless Chrome 73
139. Headless Chrome 73 https://chrome-devtools-frontend.appspot.com /serve_file /${hash} /${devtoolsFrontendUrl} &remoteFrontend=true
140. Headless Chrome 73 https://chrome-devtools-frontend.appspot.com /serve_file /${hash} /${devtoolsFrontendUrl} &remoteFrontend=true
141. 74 /json/list [{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …] Headless Chrome
142. 74 /json/list [{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …] Headless Chrome
143. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome
144. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome
145. 75 /json/version { "Browser": "Chrome/54.0.2840.98", "Protocol-Version": "1.2", "User-Agent": "…", "WebKit-Version": "537.36 (@8ee402c…ad)" } Headless Chrome hash
146. ?
147. https://youtu.be/X-dL_eKB1VE
148. Иииха!
149. План 79 ✦ Как видеть HTTP запросы во время прохождения теста Как работают Chrome DevTools Как работает ChromeDriver ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools
150. – А как запускать тесты на медленных устройствах?
151. Медленные устройства 81
152. Медленные устройства ✦ Медленная сеть 81
153. Медленные устройства ✦ Медленная сеть — Network Throttling 82
154. Медленные устройства https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-emulateNetworkConditions
155. Медленные устройства ✦ Медленная сеть — Network Throttling 84
156. Медленные устройства ✦ Медленная сеть — Network Throttling ✦ Слабый процессор 84
157. Медленные устройства ✦ Медленная сеть — Network Throttling ✦ Слабый процессор — CPU Throttling 85
158. Медленные устройства https://chromedevtools.github.io/debugger-protocol-viewer/tot/Emulation/#method-setCPUThrottlingRate
159. +-+ |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| +-+ 87 Command, id=42
160. +-+ +-+ +-+ +--------+ +------------+ |P| |C| |T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h| |e| +--------+ +------------+ |o|<->|r| |s| |x| |o| |t|<------------------------------------->|y| |m| +-+ +-+ |e| +-+ WebSocket Connection 88
161. > { "id":0, "method":"Emulation.setCPUThrottlingRate", "params":{ "rate": 10 } } 89
162. > { "id":0, "method":"Emulation.setCPUThrottlingRate", "params":{ "rate": 10 } } N times slower 89
163. https://youtu.be/NU46EkrRoYo
164. Полезно знать 91
165. Полезно знать ✦ devtools-proxy полностью совместим с Selenium 91
166. Полезно знать ✦ devtools-proxy полностью совместим с Selenium ✦ Пока нет поддержки Windows 91
167. Полезно знать ✦ devtools-proxy полностью совместим с Selenium ✦ Пока нет поддержки Windows ✦ Только для Chromium / Google Chrome 91
168. Планы на будущее
169. Планы на будущее 93
170. Планы на будущее 93 ✦ Научиться останавливаться на debugger / breakpoints
171. Планы на будущее 93 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification
172. https://gauntface.github.io/simple-push-demo/
173. https://gauntface.github.io/simple-push-demo/
174. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification
175. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android
176. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android ✦ Поддержка Windows (для chrome-wrapper)
177. Планы на будущее 96 ✦ Научиться останавливаться на debugger / breakpoints ✦ Научиться получать данные Chrome Push Notification ✦ Поддержка Android ✦ Поддержка Windows (для chrome-wrapper) ✦ Поддержка Firefox / Edge
178. Сегодня я многое понял… 97
179. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста 97
180. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста ✦ Как видеть выполнение теста 97
181. Сегодня я многое понял… ✦ Как видеть HTTP запросы во время прохождения теста ✦ Как видеть выполнение теста ✦ Как использовать все инструменты из Chrome DevTools 97
182. Спасибо!
183. Где взять-то?
184. bayandin / devtools-proxy
185. bayandin / devtools-proxy BadooDev & BadooTech (en) Badoo tech.badoo.com techblog.badoo.com (en) abayandin
186. The original, largest and leading dating network