ChromeDriver Jailbreak

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

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

400KРегистраций

в день

5Платформ

330MПользователей

1.8чИспользование

в день

350MСообщений в

день

21MDAU

54MMAU

10MФотозагрузок

в день

О нас

400KРегистраций

в день

5Платформ

330MПользователей

1.8чИспользование

в день

350MСообщений в

день

21MDAU

54MMAU

10MФотозагрузок

в день

О нас

Платформы

✦ Desktop Web

4

Платформы

✦ Desktop Web

✦ iOS

4

Платформы

✦ Desktop Web

✦ iOS

✦ Android

4

Платформы

✦ Desktop Web

✦ iOS

✦ Android

✦ Windows Phone

4

Платформы

✦ Desktop Web

✦ iOS

✦ Android

✦ Windows Phone

✦ Mobile Web

4

Mobile Test Automation

Платформы

✦ Desktop Web

✦ iOS

✦ Android

✦ Windows Phone

✦ Mobile Web

4


Платформы

✦ Desktop Web

✦ iOS

✦ Android

✦ Windows Phone

✦ Mobile Web

4


Платформы

✦ Desktop Web

✦ iOS

✦ Android

✦ Windows Phone

✦ Mobile Web

4

Mobile Test Automation Team


✦ Ruby & Cucumber

6


✦ Ruby & Cucumber

✦ Calabash, Selenium & Winium.Mobile

6


✦ Ruby & Cucumber


✦ TeamCity

6


✦ Ruby & Cucumber


✦ TeamCity

✦ Кросс-платформенная автоматизация

6

7

Scenario

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

7

Scenario

Step


7

Step Definition

Scenario

Step


Page Objects

7

Step Definition

Scenario

Step


Page Objects

7

Step Definition

Scenario

Step


8

Step Definition

iOS POAndroid Page Objects MW PO WP PO

Scenario

Step


8

Step Definition


Scenario

Step

Calabash


8

Step Definition


Scenario

Step

Calabash Selenium


8

Step Definition


Scenario

Step

Calabash Selenium Winium.Mobile



✦ Ruby & Cucumber


✦ TeamCity


9


✦ Ruby & Cucumber


✦ TeamCity


✦ Мы клёвые !

9

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

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

11


✦ Разработчик разрабатывает

11



✦ Тестировщик тестирует

11




✦ Пользователь пользуется

11





12





12

Автоматизация тестирования





12

Автоматизация тестирования

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

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

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

Варианты ответа

16


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

16



✦ Поставить прокси

16




✦ ???

16

У нас же Chrome!

17


✦ ChromeDriver умеет Performance log

https://sites.google.com/a/chromium.org/chromedriver/logging/performance-log

https://sites.google.com/a/chromium.org/chromedriver/logging/performance-log


http://www.softwareishard.com/har/viewer/

http://www.softwareishard.com/har/viewer/


20

✦ ChromeDriver умеет Performance log

✦ Нужно конвертировать Performance log в HAR

https://github.com/woodsaj/chromedriver_har

https://github.com/woodsaj/chromedriver_har

woodsaj/chromedriver_har

✦ Конвертирует Performance log в HAR

22


✦ Конвертирует Performance log в HAR

✦ Написан на и для Go

22


23

RubyGo

woodsaj/chromedriver_harGoRuby

24

woodsaj/chromedriver_harGoRuby

Сохранить Performance log в JSON файл

24

woodsaj/chromedriver_harGo

Прочитать файл

Ruby


24



Десериализовать

Ruby


24




Конвертировать в HAR

Ruby


24





Сохранить HAR файл

Ruby


24


https://gist.github.com/bayandin/2645a367a7132b355ea25d372a481e84

Go




Сохранить HAR файл

Ruby


https://gist.github.com/bayandin/2645a367a7132b355ea25d372a481e84

Решение

✦ Включить Performance log в тестах

✦ Конвертировать Performance log в HAR

26

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

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

+------+ +------------+ +-------+ |Client|<------>| Driver |<------>|Browser| +------+ +------------+ +-------+

30


Selenium / test

30


WebDriver Protocol

Selenium / test

30


WebDriver Protocol Protocol

Selenium / test

30


WebDriver Protocol

Chrome Debugging Protocol

Selenium / test

31

ChromeDriver Chrome


WebDriver Protocol


Selenium / test

31

ChromeDriver Chrome


✦ Реализован поверх WebSocket

32


✦ Реализован поверх WebSocket

✦ Используется в Chrome DevTools

https://developer.chrome.com/devtools/docs/debugger-protocol

https://developer.chrome.com/devtools/docs/debugger-protocol

Тело ответа в DevToolsNetwork.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

https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-getResponseBody

Решение



36

Решение


✦ Получить тело ответа для всех запросов


37

Решение




✦ Добавить ответы в HAR

37

+-+ +-+ +--------+ +------------+ |C| |T|<---->|Selenium|<---->|ChromeDriver|<------->|h| |e| +--------+ +------------+ |r| |s| |o| |t|<------------------------------------------->|m| +-+ |e| +-+

WebSocket Connection

38

Возможно только одно одновременное подключениe


https://developer.chrome.com/devtools/docs/debugger-protocol#simultaneous

https://developer.chrome.com/devtools/docs/debugger-protocol#simultaneous



41



/////

/////

41

Нужен прокси



/////

/////

43

+-+ +-+ +-+ +--------+ +------------+ |P| |C| |T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h| |e| +--------+ +------------+ |o|<->|r| |s| |x| |o| |t|<------------------------------------->|y| |m| +-+ +-+ |e| +-+


44

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

45

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

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

47

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

POST /ses

sion

47

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

POST /ses

sion

DesiredCapabi

lities

47

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

POST /ses

sion

DesiredCapabi

lities

chromeOpti

ons

47

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

POST /ses

sion

DesiredCapabi

lities

chromeOpti

ons

binary

47

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

POST /ses

sion

google-chrome

DesiredCapabi

lities

chromeOpti

ons

binary

47

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

POST /ses

sion

google-chrome … --remote-debugging-port=X

DesiredCapabi

lities

chromeOpti

ons

binary

48

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

POST /ses

sion

google-chrome … --remote-debugging-port=X12000 < X < 13000

DesiredCapabi

lities

chromeOpti

ons

binary

48

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

49


/json/version

49


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

49


/json/list/json/version

50


/json/list[{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …]

/json/version

50


ws://webSocketDebuggerUrl/json/list

/json/version

51



/json/version

set-up + chromeOptions

51


52


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

52

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

POST /ses

sion

DesiredCapabi

lities

chromeOpti

ons

binary

53

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

POST /ses

sion

chrome-wrapper

DesiredCapabi

lities

chromeOpti

ons

binary

53

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

POST /ses

sion

chrome-wrapper … --remote-debugging-port=X

DesiredCapabi

lities

chromeOpti

ons

binary

54

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

POST /ses

sion


DesiredCapabi

lities

chromeOpti

ons

binary

portX

54

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

POST /ses

sion


DesiredCapabi

lities

chromeOpti

ons

binary

portY

portX

54

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

55


/json/versionportX

55


/json/versionportX

portY

55


/json/versionportX

portY

55


/json/versionportX

portY

55


ws

ws

portX

portY

56


ws

ws

Tests

portX

portY

56


ws

ws

Tests

ws

portXportX

portY

56


: 12000 < X < 13000ws

ws

Tests

ws

portXportX

portY

56


ws

wsws

TestsportZportX

portY

57

Финальная логика





58


✦ Передать chrome-wrapper в binary в ChromeOptions





59

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

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

61

< { "id":0, "error":{ "code":-32000, "message":"No resource with given identifier found" } }

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

61

63



/json/version


64



/json/version


64

ChromeDriver set-up

65

{'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

DevTools set-up

66

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

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

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

ChromeDriver

67

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

ChromeDriver

> { "id":3, "method":"Network.enable", "params":{ "maxTotalBufferSize":10000000, "maxResourceBufferSize":5000000 } }

DevTools

67


✦ Передать chrome-wrapper в binary в ChromeOptions





68


✦ Передать chrome-wrapper.sh в binary в ChromeOptions


✦ Отправить “правильный” Network.enable




69

…

…?

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

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


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




✦ ???

75




✦ Можно получить HAR

76

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



Почему?

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

79

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

Network.enable

79

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

80

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

request

80

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

request

80

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

response

81

+-+ | | |C| +----------+ |h| | DevTools | |r| +----------+ |o| |m| |e| | | +-+

response

81

82

83

84

85

86

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

87

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

88


89


89


89

https://youtu.be/JDtuXAptypY

https://youtu.be/JDtuXAptypY





91





✦ В нетворке есть всё

92

Круто!

– Круто!

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

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

Chrome Remote debugger

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Headless Chrome

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

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

Headless Chrome

99

Headless Chrome

99

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

Headless Chrome

99

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

100

/json/list

[{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …]

Headless Chrome

100

/json/list

[{ "id": "…", "webSocketDebuggerUrl": "…", "devtoolsFrontendUrl": "…", … }, …]

Headless Chrome

101

/json/version

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

Headless Chrome

101

/json/version


Headless Chrome

101

/json/version


Headless Chrome

hash

?

https://youtu.be/X-dL_eKB1VE

https://youtu.be/X-dL_eKB1VE

One more thing…

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

+-+ +-+ +-+ +--------+ +------------+ |P| |C| |T|<---->|Selenium|<---->|ChromeDriver|<->|r| |h| |e| +--------+ +------------+ |o|<->|r| |s| |x| |o| |t|<------------------------------------->|y| |m| +-+ +-+ |e| +-+


107

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


109


{ “id”: 1, …}

109


{ “id”: 1}

{ “id”: 1, …}

109


{ “id”: 1}

110


{ “id”: 1}

¯\_(�)_/¯

"

110


111


{ “id”: 19, …}

{ “id”: 19, …}

111


{ “id”: 19}

{ “id”: 19, …}

{ “id”: 19, …}

111


{ “id”: 19}×2

{ “id”: 19, …}

{ “id”: 19, …}

111


{ “id”: 19}

112


{ “id”: 19}

¯\_(�)_/¯

"

112

ID?

113

ID2147483647Max:

114

ID2³¹-1

115

ID19

116

0000000000000000000000000010011id = 19

117

0000000000000000000000000010011id = 19client id

118

0000000010000000000000000010011id = 19client id

119

0000000010000000000000000010011id = 19client id

4194323

=119


120


{ “id”: 19, …}

{ “id”: 19, …}

120


{ “id”: 19}

{ “id”: 19, …}

{ “id”: 19, …}

120


{ “id”: 19}

{ “id”: 19, …}

{ “id”: 19, …}{ “id”:

4194323}

120


{ “id”: 4194323}

121


{ “id”: 19, …}{ “id”:

4194323}

121

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

122

Нужно заранее знать количество клиентов (по умолчанию 8)

Примеры

✦ Network Throttling

https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/#method-emulateNetworkConditions


Примеры



Примеры

✦ Network Throttling

✦ CPU Throttling (EXPERIMENTAL)

https://chromedevtools.github.io/debugger-protocol-viewer/tot/Emulation/#method-setCPUThrottlingRate


Примеры



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

127

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

N times slower

127

https://youtu.be/NU46EkrRoYo

https://youtu.be/NU46EkrRoYo

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

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

Где взять?

Полезно знать

132


✦ devtools-proxy полностью совместим с Selenium

132



✦ Пока нет поддержки Windows

132



✦ Пока нет поддержки Windows

✦ Только для Chromium / Google Chrome

132

Где взять?

bayandin / devtools-proxy

133

https://github.com/bayandin/devtools-proxy

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


135


135

✦ Научиться останавливаться на debugger / breakpoints


135


✦ Научиться получать данные Chrome Push Notification

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





138




138



✦ Поддержка Android


138




✦ Поддержка Windows (для chrome-wrapper)


138




✦ Поддержка Windows (для chrome-wrapper)

✦ Поддержка Firefox / Edge

Сегодня я многое понял…

139


✦ Как видеть HTTP запросы во время прохождения теста

139



✦ Как видеть как идёт тест

139



✦ Как видеть как идёт тест

✦ Использовать любые Chrome Debugging Protocol методы

139

Спасибо!

BadooDev & BadooTech (en)

Badoo

tech.badoo.com

techblog.badoo.com (en)

bayandin / devtools-proxyabayandin

The original, largest and leading dating network

Technology

ChromeDriver Jailbreak