https://seleniumcamp.com/talk/webdriverio-puppeteer-double-gun-double-fun/ In the automation world, W3C Webdriver HTTP protocol has been successfully used for a long time. With its help, many projects and libraries in various languages ​​have been implemented (selenide, protractor, webdriverio and thousands of others). But more and more teams decide to use Chrome Debug Protocol, in particular the Puppeteer tool. It is based on WebSockets, and has its own special features – two-way communication, ability to subscribe to events in the browser, and much more. In this talk, we will look at the capabilities of both protocols, experiment and combine them together in one project to make the browser work at full power, and take the best from both communication channels.

1. Webdriver + Puppeteer
Double gun - double fun
Oleksandr Khotemskyi, 2020
xotabu4.github.io

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

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

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

6. https://w3c.github.io/webdr
/

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

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

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

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

11. 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

17. WebDriver + CDP

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

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

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

23. CSS and JS code coverage

24. CSS and JS code coverage

26. File upload handling

27. Browser and Page events

28. Browser and Page events

29. Custom events
https://stackoverflow.com/questions/47107465/puppeteer-how-to-listen-to-object-events

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

34. Other browsers
• Есть поддержка Firefox в 2.1.0
• Есть инициатива -
compatibility.remotedebug.org - по
адаптации chrome debug protocol на
другие браузеры
• Потенциально это будет работать и
для нового Chromium-EDGE
• microsoft/playwright - новый проект,
основывается на наработках
puppeteer, поддерживает больше
браузеров, и имеет похожее API

35. xotabu4.github.io

36. Существующий 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_t
ools
Code coverate HTML report для Puppeteer:
https://github.com/istanbuljs/puppeteer-to-istanbul
Всякие вкусности для Chrome Debug Protocol:
https://github.com/ChromeDevTools/awesome-chrome-devtools