QA-конференция heisenbug.ru ChromeDriver Jailbreak, Александр Баяндин (Badoo) Chrome DevTools — один из наиболее полезных инструментов веб-разработчика. Он позволяет получать исчерпывающую информацию о странице и запросах и эмулировать мобильные браузеры на медленных устройствах. ChromeDriver использует тот же Chrome Debugging Protocol, что и DevTools для реализации Selenium JSON Wire Protocol взаимодействия с браузером. Этот протокол описывает самый базовый набор методов для взаимодействия со страницей, который несомненно уже всего набора методов, доступных в DevTools. В своём докладе Александр расскажет о том, как можно использовать (почти) всю мощь DevTools в Selenium-тестах и как сделать их отладку наиболее удобной.

1. ChromeDriver Jailbreak
Александр Баяндин

2. “ THIS IS THE
MOST POPULAR
DATING APP IN
THE WORLD
— Time

3. 400KРегистраций
в день
5
Платформ
330MПользователей
1.8ч
Использование
в день
350MСообщений в
день
21M
DAU
54M
MAU
10MФотозагрузок
в день
О нас

4. 400KРегистраций
в день
5
Платформ
330MПользователей
1.8ч
Использование
в день
350MСообщений в
день
21M
DAU
54M
MAU
10MФотозагрузок
в день
О нас

5. Платформы
✦ Desktop Web
4

6. Платформы
✦ Desktop Web
✦ iOS
4

7. Платформы
✦ Desktop Web
✦ iOS
✦ Android
4

8. Платформы
✦ Desktop Web
✦ iOS
✦ Android
✦ Windows Phone
4

9. Платформы
✦ Desktop Web
✦ iOS
✦ Android
✦ Windows Phone
✦ Mobile Web
4

10. Mobile Test Automation
Платформы
✦ Desktop Web
✦ iOS
✦ Android
✦ Windows Phone
✦ Mobile Web
4

11. Mobile Test Automation
Платформы
✦ Desktop Web
✦ iOS
✦ Android
✦ Windows Phone
✦ Mobile Web
4

12. Mobile Test Automation
Платформы
✦ Desktop Web
✦ iOS
✦ Android
✦ Windows Phone
✦ Mobile Web
4

13. Mobile
Test Automation
Team

14. Mobile Test Automation Team
✦ Ruby & Cucumber
6

15. Mobile Test Automation Team
✦ Ruby & Cucumber
✦ Calabash, Selenium & Winium.Mobile
6

16. Mobile Test Automation Team
✦ Ruby & Cucumber
✦ Calabash, Selenium & Winium.Mobile
✦ TeamCity
6

17. Mobile Test Automation Team
✦ Ruby & Cucumber
✦ Calabash, Selenium & Winium.Mobile
✦ TeamCity
✦ Кросс-платформенная автоматизация
6

18. 7
Scenario
Кросс-платформенная
автоматизация

19. 7
Scenario
Step
Кросс-платформенная
автоматизация

20. 7
Step Definition
Scenario
Step
Кросс-платформенная
автоматизация

21. Page Objects
7
Step Definition
Scenario
Step
Кросс-платформенная
автоматизация

22. Page Objects
7
Step Definition
Scenario
Step
Кросс-платформенная
автоматизация

23. 8
Step Definition
iOS POAndroid Page Objects MW PO WP PO
Scenario
Step
Кросс-платформенная
автоматизация

24. 8
Step Definition
iOS POAndroid Page Objects MW PO WP PO
Scenario
Step
Calabash
Кросс-платформенная
автоматизация

25. 8
Step Definition
iOS POAndroid Page Objects MW PO WP PO
Scenario
Step
Calabash Selenium
Кросс-платформенная
автоматизация

26. 8
Step Definition
iOS POAndroid Page Objects MW PO WP PO
Scenario
Step
Calabash Selenium Winium.Mobile
Кросс-платформенная
автоматизация

27. Mobile Test Automation Team
✦ Ruby & Cucumber
✦ Calabash, Selenium & Winium.Mobile
✦ TeamCity
✦ Кросс-платформенная автоматизация
9

28. Mobile Test Automation Team
✦ Ruby & Cucumber
✦ Calabash, Selenium & Winium.Mobile
✦ TeamCity
✦ Кросс-платформенная автоматизация
✦ Мы клёвые !
9

29. Автоматизация

30. Процесс разработки
11

31. Процесс разработки
✦ Разработчик разрабатывает
11

32. Процесс разработки
✦ Разработчик разрабатывает
✦ Тестировщик тестирует
11

33. Процесс разработки
✦ Разработчик разрабатывает
✦ Тестировщик тестирует
✦ Пользователь пользуется
11

34. ✦ Разработчик разрабатывает
✦ Тестировщик тестирует
✦ Пользователь пользуется
Процесс разработки
12

35. ✦ Разработчик разрабатывает
✦ Тестировщик тестирует
✦ Пользователь пользуется
Процесс разработки
12
Автоматизация
тестирования

36. ✦ Разработчик разрабатывает
✦ Тестировщик тестирует
✦ Пользователь пользуется
Процесс разработки
12
Автоматизация
тестирования

37. – Саша, у меня
падает тест

38. – В нетворке пусто

39. – Руками не
воспроизводится

40. Варианты ответа
16

41. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
16

42. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
16

43. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
✦ ???
16

44. У нас же Chrome!
17

45. У нас же Chrome!
✦ ChromeDriver умеет Performance log
https://sites.google.com/a/chromium.org/chromedriver/logging/performance-log

46. У нас же Chrome!
http://www.softwareishard.com/har/viewer/

47. У нас же Chrome!
20
✦ ChromeDriver умеет Performance log
✦ Нужно конвертировать Performance log в HAR

48. https://github.com/woodsaj/chromedriver_har

49. woodsaj/chromedriver_har
✦ Конвертирует Performance log в HAR
22

50. woodsaj/chromedriver_har
✦ Конвертирует Performance log в HAR
✦ Написан на и для Go
22

51. woodsaj/chromedriver_har
23
RubyGo

52. woodsaj/chromedriver_har
GoRuby
24

53. woodsaj/chromedriver_har
GoRuby
Сохранить Performance log
в JSON файл
24

54. woodsaj/chromedriver_har
Go
Прочитать файл
Ruby
Сохранить Performance log
в JSON файл
24

55. woodsaj/chromedriver_har
Go
Прочитать файл
Десериализовать
Ruby
Сохранить Performance log
в JSON файл
24

56. woodsaj/chromedriver_har
Go
Прочитать файл
Десериализовать
Конвертировать в HAR
Ruby
Сохранить Performance log
в JSON файл
24

57. woodsaj/chromedriver_har
Go
Прочитать файл
Десериализовать
Конвертировать в HAR
Сохранить HAR файл
Ruby
Сохранить Performance log
в JSON файл
24

58. woodsaj/chromedriver_har
https://gist.github.com/bayandin/2645a367a7132b355ea25d372a481e84
Go
Прочитать файл
Десериализовать
Конвертировать в HAR
Сохранить HAR файл
Ruby
Сохранить Performance log
в JSON файл

59. Решение
✦ Включить Performance log в тестах
✦ Конвертировать Performance log в HAR
26

60. В Performance log
нет тела ответа

62. Как работает
драйвер

63. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
30

64. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
Selenium / test
30

65. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
WebDriver
Protocol
Selenium / test
30

66. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
WebDriver
Protocol
Protocol
Selenium / test
30

67. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
WebDriver
Protocol
Chrome Debugging
Protocol
Selenium / test
31
ChromeDriver Chrome

68. +------+ +------------+ +-------+
|Client|<------>| Driver |<------>|Browser|
+------+ +------------+ +-------+
WebDriver
Protocol
Chrome Debugging
Protocol
Selenium / test
31
ChromeDriver Chrome

69. Chrome Debugging Protocol
✦ Реализован поверх WebSocket
32

70. Chrome Debugging Protocol
✦ Реализован поверх WebSocket
✦ Используется в Chrome DevTools
https://developer.chrome.com/devtools/docs/debugger-protocol

73. Тело ответа в DevTools
Network.getResponseBody
Returns content served for the given request.
PARAMETERS
requestId: RequestId
RETURN OBJECT
body: string
base64Encoded: boolean
https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-getResponseBody

74. Решение
✦ Включить Performance log в тестах
✦ Конвертировать Performance log в HAR
36

75. Решение
✦ Включить Performance log в тестах
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
37

76. Решение
✦ Включить Performance log в тестах
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
✦ Добавить ответы в HAR
37

77. +-+
+-+ +--------+ +------------+ |C|
|T|<---->|Selenium|<---->|ChromeDriver|<------->|h|
|e| +--------+ +------------+ |r|
|s| |o|
|t|<------------------------------------------->|m|
+-+ |e|
+-+
WebSocket
Connection
38

78. Возможно только одно
одновременное
подключениe
Chrome Debugging Protocol
https://developer.chrome.com/devtools/docs/debugger-protocol#simultaneous

80. +-+
+-+ +--------+ +------------+ |C|
|T|<---->|Selenium|<---->|ChromeDriver|<------->|h|
|e| +--------+ +------------+ |r|
|s| |o|
|t|<------------------------------------------->|m|
+-+ |e|
+-+
WebSocket
Connection
41

81. +-+
+-+ +--------+ +------------+ |C|
|T|<---->|Selenium|<---->|ChromeDriver|<------->|h|
|e| +--------+ +------------+ |r|
|s| |o|
|t|<------------------------------------------->|m|
+-+ |e|
+-+
WebSocket
Connection
/////
/////
41

82. Нужен прокси

83. +-+
+-+ +--------+ +------------+ |C|
|T|<---->|Selenium|<---->|ChromeDriver|<------->|h|
|e| +--------+ +------------+ |r|
|s| |o|
|t|<------------------------------------------->|m|
+-+ |e|
+-+
WebSocket
Connection
/////
/////
43

84. +-+ +-+
+-+ +--------+ +------------+ |P| |C|
|T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h|
|e| +--------+ +------------+ |o|<->|r|
|s| |x| |o|
|t|<------------------------------------->|y| |m|
+-+ +-+ |e|
+-+
WebSocket
Connection
44

85. Как встроить прокси?
45

86. Как работает
драйвер. Часть 2

87. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
47

88. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
47

89. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
DesiredCapabilities
47

90. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
DesiredCapabilities
chromeOptions
47

91. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
DesiredCapabilities
chromeOptions
binary
47

92. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
google-chrome
DesiredCapabilities
chromeOptions
binary
47

93. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
google-chrome … --remote-debugging-port=X
DesiredCapabilities
chromeOptions
binary
48

94. +-+
|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
48

95. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| |m|
|i| |e|
|v| +-+
|e|
|r|
+-+
49

96. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| |m|
|i| |e|
|v| +-+
|e|
|r|
+-+
/json/version
49

97. +-+
|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)"
}
49

98. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| |m|
|i| |e|
|v| +-+
|e|
|r|
+-+
/json/list
/json/version
50

99. +-+
|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
50

100. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| |m|
|i| |e|
|v| +-+
|e|
|r|
+-+
ws://webSocketDebuggerUrl
/json/list
/json/version
51

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
set-up + chromeOptions
51

102. Как встроить прокси?
52

103. Как встроить прокси?
Использовать свой скрипт в binary в ChromeOptions.
52

104. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
DesiredCapabilities
chromeOptions
binary
53

105. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
chrome-wrapper
DesiredCapabilities
chromeOptions
binary
53

106. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
chrome-wrapper … --remote-debugging-port=X
DesiredCapabilities
chromeOptions
binary
54

107. +-+
|C|
|h|
|r|
|o|
|m|
|e|
|D|
|r|
|i|
|v|
|e|
|r|
+-+
POST /session
chrome-wrapper … --remote-debugging-port=X
DesiredCapabilities
chromeOptions
binary
portX
54

108. +-+
|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
54

109. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
55

110. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
/json/version
portX
55

111. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
/json/version
portX
portY
55

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
55

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
55

114. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
ws
ws
portX
portY
56

115. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
ws
ws
Tests
portX
portY
56

116. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
ws
ws
Tests
w
s
portXportX
portY
56

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
Tests
w
s
portXportX
portY
56

118. +-+
|C|
|h|
|r| +-+
|o| |C|
|m| |h|
|e| |r|
|D| |o|
|r| +--------------+ |m|
|i| |DevTools Proxy| |e|
|v| +--------------+ +-+
|e|
|r|
+-+
ws
wsw
s
Tests
portZportX
portY
57

119. Финальная логика
✦ Включить Performance log в тестах
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
✦ Добавить ответы в HAR
58

120. Финальная логика
✦ Передать chrome-wrapper в binary в ChromeOptions
✦ Включить Performance log в тестах
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
✦ Добавить ответы в HAR
59

121. Получение тела
ответа

122. > {
"id":0,
"method":"Network.getResponseBody",
"params":{ "requestId":"28781.18" }
}
61

123. < {
"id":0,
"error":{
"code":-32000,
"message":"No resource with given identifier found"
}
}
> {
"id":0,
"method":"Network.getResponseBody",
"params":{ "requestId":"28781.18" }
}
61

125. 63

126. +-+
|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
64

127. +-+
|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
64

128. ChromeDriver set-up
65

129. {'id': 1, 'params': {}, 'method': 'Network.enable'}
{'id': 2, 'params': {}, 'method': 'Log.enable'}
{'id': 3, 'params': {}, 'method': 'Runtime.enable'}
{'id': 5, 'params': {}, 'method': 'Page.enable'}
ChromeDriver set-up
65

130. DevTools set-up
66

131. DevTools set-up
{'id': 1, 'method': 'Log.enable'}
{'id': 2, 'method': 'Runtime.enable'}
{'id': 3, 'method': 'Network.enable',
'params': {'maxResourceBufferSize': 5000000, 'maxTotalBufferSize': 10000000}}
{'id': 4, 'method': 'Page.enable'}
{'id': 6, 'method': 'Debugger.enable'}
{'id': 9, 'method': 'DOM.enable'}
{'id': 10, 'method': 'CSS.enable'}
{'id': 12, 'method': 'Worker.enable'}
{'id': 13, 'method': 'Profiler.enable'}
{'id': 15, 'method': 'ServiceWorker.enable'}
{'id': 23, 'method': 'Inspector.enable'}
66

132. DevTools set-up
{'id': 1, 'method': 'Log.enable'}
{'id': 2, 'method': 'Runtime.enable'}
{'id': 3, 'method': 'Network.enable',
'params': {'maxResourceBufferSize': 5000000, 'maxTotalBufferSize': 10000000}}
{'id': 4, 'method': 'Page.enable'}
{'id': 6, 'method': 'Debugger.enable'}
{'id': 9, 'method': 'DOM.enable'}
{'id': 10, 'method': 'CSS.enable'}
{'id': 12, 'method': 'Worker.enable'}
{'id': 13, 'method': 'Profiler.enable'}
{'id': 15, 'method': 'ServiceWorker.enable'}
{'id': 23, 'method': 'Inspector.enable'}
66

133. > {
"id":1,
"method":"Network.enable",
"params":{}
}
ChromeDriver
67

134. > {
"id":1,
"method":"Network.enable",
"params":{}
}
ChromeDriver
> {
"id":3,
"method":"Network.enable",
"params":{
"maxTotalBufferSize":10000000,
"maxResourceBufferSize":5000000
}
}
DevTools
67

135. Финальная логика
✦ Передать chrome-wrapper в binary в ChromeOptions
✦ Включить Performance log в тестах
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
✦ Добавить ответы в HAR
68

136. Финальная логика
✦ Передать chrome-wrapper.sh в binary в ChromeOptions
✦ Включить Performance log в тестах
✦ Отправить “правильный” Network.enable
✦ Получить тело ответа для всех запросов
✦ Конвертировать Performance log в HAR
✦ Добавить ответы в HAR
69

137. …

138. …?

139. Оно работает!

140. – Саша, у меня
падает тест

141. – В нетворке пусто

142. – Руками не
воспроизводится

143. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
✦ ???
75

144. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
✦ Можно получить HAR
76

145. Но это ещё не всё

146. – В нетворке пусто

147. – В нетворке пусто
Почему?

148. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
79

149. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
Network.enable
79

150. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
80

151. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
request
80

152. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
request
80

153. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
response
81

154. +-+
| |
|C|
+----------+ |h|
| DevTools | |r|
+----------+ |o|
|m|
|e|
| |
+-+
response
81

155. 82

156. 83

157. 84

158. 85

159. 86

160. +----------+ +-+
| Client 1 | | |
+----------+ |C|
|h|
|r|
|o|
+----------+ |m|
| Client 2 | |e|
+----------+ | |
+-+
87

161. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
88

162. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
89

163. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
89

164. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
89

165. https://youtu.be/JDtuXAptypY

166. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
✦ Можно получить HAR
91

167. Варианты ответа
✦ Остановить тест за шаг до падения, последний шаг
проделать вручную (с открытыми DevTools)
✦ Поставить прокси
✦ Можно получить HAR
✦ В нетворке есть всё
92

168. Круто!

169. – Круто!

170. – А как посмотреть
как сам тест идёт?

171. – Ещё одно окно —
неудобно

172. Chrome Remote debugger
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

173. Headless Chrome
https://bugs.chromium.org/p/chromium/issues/detail?id=546953

174. Headless Chrome
99

175. Headless Chrome
99
https://chrome-devtools-frontend.appspot.com
/serve_file
/${hash}
/${devtoolsFrontendUrl}
&remoteFrontend=true

176. Headless Chrome
99
https://chrome-devtools-frontend.appspot.com
/serve_file
/${hash}
/${devtoolsFrontendUrl}
&remoteFrontend=true

177. 100
/json/list
[{
"id": "…",
"webSocketDebuggerUrl": "…",
"devtoolsFrontendUrl": "…",
…
},
…]
Headless Chrome

178. 100
/json/list
[{
"id": "…",
"webSocketDebuggerUrl": "…",
"devtoolsFrontendUrl": "…",
…
},
…]
Headless Chrome

179. 101
/json/version
{
"Browser": "Chrome/54.0.2840.98",
"Protocol-Version": "1.2",
"User-Agent": "…",
"WebKit-Version": "537.36 (@8ee402c…ad)"
}
Headless Chrome

180. 101
/json/version
{
"Browser": "Chrome/54.0.2840.98",
"Protocol-Version": "1.2",
"User-Agent": "…",
"WebKit-Version": "537.36 (@8ee402c…ad)"
}
Headless Chrome

181. 101
/json/version
{
"Browser": "Chrome/54.0.2840.98",
"Protocol-Version": "1.2",
"User-Agent": "…",
"WebKit-Version": "537.36 (@8ee402c…ad)"
}
Headless Chrome
hash

182. ?

184. https://youtu.be/X-dL_eKB1VE

185. One more thing…

186. Что он может ещё?

187. +-+ +-+
+-+ +--------+ +------------+ |P| |C|
|T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h|
|e| +--------+ +------------+ |o|<->|r|
|s| |x| |o|
|t|<------------------------------------->|y| |m|
+-+ +-+ |e|
+-+
WebSocket
Connection
107

188. Технические детали

189. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
109

190. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 1, …}
109

191. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 1}
{ “id”: 1, …}
109

192. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 1}
110

193. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 1}
¯_( )_/¯
"
110

194. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
111

195. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19, …}
{ “id”: 19, …}
111

196. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
{ “id”: 19, …}
{ “id”: 19, …}
111

197. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
×2
{ “id”: 19, …}
{ “id”: 19, …}
111

198. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
112

199. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
¯_( )_/¯
"
112

200. ID
?
113

201. ID
2147483647Max:
114

202. ID
2³¹-1
115

203. ID
19
116

204. 0000000000000000000000000010011
id = 19
117

205. 0000000000000000000000000010011
id = 19client id
118

206. 0000000010000000000000000010011
id = 19client id
119

207. 0000000010000000000000000010011
id = 19client id
4194323
=
119

208. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
120

209. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19, …}
{ “id”: 19, …}
120

210. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
{ “id”: 19, …}
{ “id”: 19, …}
120

211. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19}
{ “id”: 19, …}
{ “id”: 19, …}
{ “id”:
4194323}
120

212. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”:
4194323}
121

213. +-+
+----------+ | | +-+
| Client 1 | | | | |
+----------+ |P| |C|
|r| |h|
|o| |r|
|x| |o|
+----------+ |y| |m|
| Client 2 | | | |e|
+----------+ | | | |
+-+ +-+
{ “id”: 19, …}
{ “id”:
4194323}
121

214. Технические детали
122
Нужно заранее знать количество клиентов (по умолчанию 8)

215. Примеры
✦ Network Throttling
https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-emulateNetworkConditions

216. Примеры
https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-emulateNetworkConditions

217. Примеры
✦ Network Throttling
✦ CPU Throttling (EXPERIMENTAL)
https://chromedevtools.github.io/debugger-protocol-viewer/tot/Emulation/#method-setCPUThrottlingRate

218. Примеры
https://chromedevtools.github.io/debugger-protocol-viewer/tot/Emulation/#method-setCPUThrottlingRate

219. > {
"id":0,
"method":"Emulation.setCPUThrottlingRate",
"params":{ "rate": 10 }
}
127

220. > {
"id":0,
"method":"Emulation.setCPUThrottlingRate",
"params":{ "rate": 10 }
}
N times slower
127

221. https://youtu.be/NU46EkrRoYo

222. – Как запустить
тесты на плохом
соединении?

223. – О! Вы и это уже
можете

224. Где взять?

225. Полезно знать
132

226. Полезно знать
✦ devtools-proxy полностью совместим с Selenium
132

227. Полезно знать
✦ devtools-proxy полностью совместим с Selenium
✦ Пока нет поддержки Windows
132

228. Полезно знать
✦ devtools-proxy полностью совместим с Selenium
✦ Пока нет поддержки Windows
✦ Только для Chromium / Google Chrome
132

229. Где взять?
bayandin / devtools-proxy
133

230. Планы на будущее

231. Планы на будущее
135

232. Планы на будущее
135
✦ Научиться останавливаться на debugger / breakpoints

233. Планы на будущее
135
✦ Научиться останавливаться на debugger / breakpoints
✦ Научиться получать данные Chrome Push Notification

234. https://gauntface.github.io/simple-push-demo/

235. https://gauntface.github.io/simple-push-demo/

236. Планы на будущее
138
✦ Научиться останавливаться на debugger / breakpoints
✦ Научиться получать данные Chrome Push Notification

237. Планы на будущее
138
✦ Научиться останавливаться на debugger / breakpoints
✦ Научиться получать данные Chrome Push Notification
✦ Поддержка Android

238. Планы на будущее
138
✦ Научиться останавливаться на debugger / breakpoints
✦ Научиться получать данные Chrome Push Notification
✦ Поддержка Android
✦ Поддержка Windows (для chrome-wrapper)

239. Планы на будущее
138
✦ Научиться останавливаться на debugger / breakpoints
✦ Научиться получать данные Chrome Push Notification
✦ Поддержка Android
✦ Поддержка Windows (для chrome-wrapper)
✦ Поддержка Firefox / Edge

240. Сегодня я многое понял…
139

241. Сегодня я многое понял…
✦ Как видеть HTTP запросы во время прохождения теста
139

242. Сегодня я многое понял…
✦ Как видеть HTTP запросы во время прохождения теста
✦ Как видеть как идёт тест
139

243. Сегодня я многое понял…
✦ Как видеть HTTP запросы во время прохождения теста
✦ Как видеть как идёт тест
✦ Использовать любые Chrome Debugging Protocol методы
139

244. Спасибо!

245. BadooDev & BadooTech (en)
Badoo
tech.badoo.com
techblog.badoo.com (en)
bayandin / devtools-proxy
abayandin

246. The original, largest and leading
dating network