O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

492 visualizações

Publicada em

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

Publicada em: Educação
  • 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

×