Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

32 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

×