В мире автоматизации давным-давно успешно используют W3C Webdriver HTTP протокол. С его помощью реализовано множество проектов и библиотек на различных языках (selenide, protractor, webdriverio и тысячи других). Но так же в последнее время все больше и больше команд решают использовать Chrome Debug Protocol, в частности инструмент Puppeteer. Он основан на WebSockets, и имеет свои особые возможности - двухсторонняя связь, возможность подписки на события в браузере, и многое другое. В этом докладе мы посмотрим возможности обоих протоколов, поэкспериментируем и совместим их вместе в одном проекте, чтобы заставить браузер работать на полную и взять лучшее от двух каналов связи.

1. WebdriverIO + Puppeteer.
Double gun - double fun
Oleksandr Khotemskyi, 2019
xotabu4.github.io

2. Александр Хотемской
• Software Development Engineer in Test
• Independent Contractor
• 8+ лет автоматизации тестирования и смежных
областях
• Основной стек технологий - JavaScript/TypeScript,
NodeJS
xotabu4.github.io

4. WebDriver
W3C protocol
Что это и как
работает?

5. Что это?
• Это стандартизированный протокол
управления браузерами
• Можно управлять разными браузерами
одинаковыми командами
• Можно управлять браузером из разных языков
программирования
• Разработчики браузера если хотят быть
полностью w3c standarts compatible – должны
реализовать это API

6. Your tests
code
W3C
Webdriver
Protocol
Browser Driver Browser
Server with website

7. https://w3c.github.io/
webdriver/

8. Your tests code
Selenoid Servers
Load Balancer Server
(GGR)
Selenium Server on Mac OS X

9. Chrome Debug
Protocol
Что это и как
работает?

10. Chrome DevTools
• Инструмент для разработчиков
• Включен в Chrome с самых первых версий
• Может практически полностью
контролировать что происходит в браузере
• Может инспектировать различные аспекты
работы страницы
• Может внедрятся и исполнять свои команды
в браузере

11. https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

12. https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchMouseEvent

13. WebSockets
• Chrome Debug Protocol использует WebSockets
как транспорт
• Одно из основных отличий что WebSocket это
двухсторонний протокол передачи данных
• Быстрей чем HTTP
• Обе стороны могут инициировать отправку
данных, а не только клиент

14. Puppeteer
• JS библиотека
• Запускает и подключается к
браузеру и управляет им
через Chrome Debug Protocol
• Может скачивать Chromium
браузер автоматически
• По сути - высокоуровневая
клиентская библиотека для
работы с Chrome Debug
Protocol

15. WebDriver + CDP

16. Chrome
NodeJS
ChromeDriver
Web Server
WebApplication
HTTP (W3C WebDriver)
PuppeteerWebdriver
HTTP WebSocket
WebSocket (CDP)
WebSocket (CDP)

17. Настройка
• Нужно запустить браузер с помощью WebDriver как
обычно, но с дополнительной capability --remote-
debugging-port=xxxx
• Перед стартом тестов - вызвать puppeteer.connect и
указать наш remote-debugging-port
• Присвоить созданный объект Browser (от puppeteer) в
глобальную переменную

21. Возможности
• Обратная совместимость с существующими
тестами
• Дополнительные puppeteer команды теперь
доступны в тестах
• Для более быстрых команд - можно выбирать
быстрый puppeteer клиент
• Для стабильности и максимальной эмуляции
пользователя - webdriver клиент

22. CSS and JS code coverage

23. CSS and JS code coverage

24. Request/Response interception

25. File upload handling

26. Selenoid + WebdriverIO + Puppeteer
• Selenoid (а также GGR) может
перенаправлять CDP запросы внутрь
контейнера с Chrome браузером
• Для этого нам нужно указать для
подключения URL формата: ws://
selenoid.example.com:4444/devtools/
<session-id>
• Это позволяет использовать существующую
тестовую ферму для подключения и
webdriver и puppeteer

29. Other browsers
• Есть экспериментальная поддержка
Firefox
• Есть инициатива -
compatibility.remotedebug.org - по
адаптации chrome debug protocol на
другие браузеры
• Потенциально это будет работать и
для нового Chromium-EDGE

30. Существующий WDIO-devtools-service: https://github.com/
webdriverio/webdriverio/blob/master/packages/wdio-devtools-service/
src/index.js
Puppeteer API: https://pptr.dev/
Низкоуровневый CDP API: https://chromedevtools.github.io/devtools-
protocol/
Selenoid и CDP: https://aerokube.com/selenoid/latest/
#_accessing_browser_developer_tools
Code coverate HTML report для Puppeteer: https://github.com/
istanbuljs/puppeteer-to-istanbul
Всякие вкусности для Chrome Debug Protocol: https://github.com/
ChromeDevTools/awesome-chrome-devtools

31. xotabu4.github.io