Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
WebdriverIO + Puppeteer.
Double gun - double fun
Oleksandr Khotemskyi, 2019

xotabu4.github.io
Александр Хотемской
• Software Development Engineer in Test

• Independent Contractor

• 8+ лет автоматизации тестирования...
WebDriver
W3C protocol
Что это и как
работает?
Что это?
• Это стандартизированный протокол
управления браузерами

• Можно управлять разными браузерами
одинаковыми команд...
Your tests
code
W3C
Webdriver
Protocol
Browser Driver Browser
Server with website
https://w3c.github.io/
webdriver/
Your tests code
Selenoid Servers
Load Balancer Server
(GGR)
Selenium Server on Mac OS X
Chrome Debug
Protocol
Что это и как
работает?
Chrome DevTools
• Инструмент для разработчиков

• Включен в Chrome с самых первых версий

• Может практически полностью
ко...
https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchMouseEvent
WebSockets
• Chrome Debug Protocol использует WebSockets
как транспорт

• Одно из основных отличий что WebSocket это
двухс...
Puppeteer
• JS библиотека

• Запускает и подключается к
браузеру и управляет им
через Chrome Debug Protocol

• Может скачи...
WebDriver + CDP
Chrome
NodeJS
ChromeDriver
Web Server
WebApplication
HTTP (W3C WebDriver)
PuppeteerWebdriver
HTTP WebSocket
WebSocket (CDP...
Настройка
• Нужно запустить браузер с помощью WebDriver как
обычно, но с дополнительной capability --remote-
debugging-por...
Возможности
• Обратная совместимость с существующими
тестами

• Дополнительные puppeteer команды теперь
доступны в тестах
...
CSS and JS code coverage
CSS and JS code coverage
Request/Response interception
File upload handling
Selenoid + WebdriverIO + Puppeteer
• Selenoid (а также GGR) может
перенаправлять CDP запросы внутрь
контейнера с Chrome бр...
Other browsers
• Есть экспериментальная поддержка
Firefox

• Есть инициатива -
compatibility.remotedebug.org - по
адаптаци...
Существующий WDIO-devtools-service: https://github.com/
webdriverio/webdriverio/blob/master/packages/wdio-devtools-service...
xotabu4.github.io
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun
Prochain SlideShare
Chargement dans…5
×

QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun

481 vues

Publié le

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

Publié dans : Formation
  • Login to see the comments

QA Fest 2019. Александр Хотемской. WebdriverIO + Puppeteer. Double gun - double fun

  1. 1. WebdriverIO + Puppeteer. Double gun - double fun Oleksandr Khotemskyi, 2019
 xotabu4.github.io
  2. 2. Александр Хотемской • Software Development Engineer in Test • Independent Contractor • 8+ лет автоматизации тестирования и смежных областях • Основной стек технологий - JavaScript/TypeScript, NodeJS xotabu4.github.io
  3. 3. WebDriver W3C protocol Что это и как работает?
  4. 4. Что это? • Это стандартизированный протокол управления браузерами • Можно управлять разными браузерами одинаковыми командами • Можно управлять браузером из разных языков программирования • Разработчики браузера если хотят быть полностью w3c standarts compatible – должны реализовать это API
  5. 5. Your tests code W3C Webdriver Protocol Browser Driver Browser Server with website
  6. 6. https://w3c.github.io/ webdriver/
  7. 7. Your tests code Selenoid Servers Load Balancer Server (GGR) Selenium Server on Mac OS X
  8. 8. Chrome Debug Protocol Что это и как работает?
  9. 9. Chrome DevTools • Инструмент для разработчиков • Включен в Chrome с самых первых версий • Может практически полностью контролировать что происходит в браузере • Может инспектировать различные аспекты работы страницы • Может внедрятся и исполнять свои команды в браузере
  10. 10. https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
  11. 11. https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchMouseEvent
  12. 12. WebSockets • Chrome Debug Protocol использует WebSockets как транспорт • Одно из основных отличий что WebSocket это двухсторонний протокол передачи данных • Быстрей чем HTTP • Обе стороны могут инициировать отправку данных, а не только клиент
  13. 13. Puppeteer • JS библиотека • Запускает и подключается к браузеру и управляет им через Chrome Debug Protocol • Может скачивать Chromium браузер автоматически • По сути - высокоуровневая клиентская библиотека для работы с Chrome Debug Protocol
  14. 14. WebDriver + CDP
  15. 15. Chrome NodeJS ChromeDriver Web Server WebApplication HTTP (W3C WebDriver) PuppeteerWebdriver HTTP WebSocket WebSocket (CDP) WebSocket (CDP)
  16. 16. Настройка • Нужно запустить браузер с помощью WebDriver как обычно, но с дополнительной capability --remote- debugging-port=xxxx • Перед стартом тестов - вызвать puppeteer.connect и указать наш remote-debugging-port • Присвоить созданный объект Browser (от puppeteer) в глобальную переменную
  17. 17. Возможности • Обратная совместимость с существующими тестами • Дополнительные puppeteer команды теперь доступны в тестах • Для более быстрых команд - можно выбирать быстрый puppeteer клиент • Для стабильности и максимальной эмуляции пользователя - webdriver клиент
  18. 18. CSS and JS code coverage
  19. 19. CSS and JS code coverage
  20. 20. Request/Response interception
  21. 21. File upload handling
  22. 22. Selenoid + WebdriverIO + Puppeteer • Selenoid (а также GGR) может перенаправлять CDP запросы внутрь контейнера с Chrome браузером • Для этого нам нужно указать для подключения URL формата: ws:// selenoid.example.com:4444/devtools/ <session-id> • Это позволяет использовать существующую тестовую ферму для подключения и webdriver и puppeteer
  23. 23. Other browsers • Есть экспериментальная поддержка Firefox • Есть инициатива - compatibility.remotedebug.org - по адаптации chrome debug protocol на другие браузеры • Потенциально это будет работать и для нового Chromium-EDGE
  24. 24. Существующий 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
  25. 25. xotabu4.github.io

×