UI автотесты на максималках или как писать автотесты на JS используя Protractor и Chrome DevTools протокол

Transcript

1. UI autotests at maximum mode or How to write autotests on JS using Protractor and Chrome DevTools protocol Andrei Dzeichyk EPAM Systems, Minsk rev. 2.0
2. About myself • Software Test Automation Engineer at EPAM Systems • JS/TS autotests developer 2
3. Agenda 1. Problems definition 2. W3C WebDriver protocol 3. Chrome DevTools protocol 4. How to integrate Protractor with Puppeteer 5. Pros and cons 6. Q&A 3
4. 1. Problem definition 4
5. How Protractor waits for Angular 5 https://github.com/angular/protractor/blob/master/lib/clientsidescripts.js#L125
6. Getting browser logs 6 • BROWSER - Logs originating from the browser • CLIENT - Logs from a WebDriver client • DRIVER - Logs from a WebDriver implementation • PERFORMANCE - Logs related to performance • SERVER - Logs from the remote server https://github.com/SeleniumHQ/selenium/blob/master/javascript/node/selenium-webdriver/lib/logging.js#L604
7. BrowserMob-Proxy 7 https://www.npmjs.com/package/browsermob-proxy
8. WebDriver protocol 8 https://www.w3.org/TR/webdriver/
9. Chrome DevTools protocol 9 https://chromedevtools.github.io/devtools-protocol/
10. HTTP vs WebSocket 10 https://blogs.windows.com/windowsdeveloper/2016/03/14/when-to-use-a-http-call-instead-of-a-websocket-or-http-2-0/
12. Capabilities 12 0. Get capabilities: https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Builder.html #getCapabilities
13. WebSocket’s endpoint 13 1. Go to the endpoint: http://${debuggerAddress}/json/version 2. Get data from: ‘webSocketDebuggerUrl’ key https://chromedevtools.github.io/devtools-protocol/#how-do-i-access-the-browser-target
14. Connecting to Chrome DevTools by WebSocket 14 3. Pass value of ‘webSocketDebuggerUrl’ to instance of WebSocket: https://github.com/aslushnikov/getting-started-with-cdp/blob/master/README.md#protocol-fundamentals
15. Puppeteer 15 Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. © https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#overview
16. Merging Protractor and Puppeteer 16 4. Pass value of ‘webSocketDebuggerUrl’ or ‘debuggerAddress’ to the function puppeteer.connect(options): https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerconnectoptions
17. Default viewport of Puppeteer 17
18. Merging Protractor and Puppeteer 18 5. Pass values of viewport to function puppeteer.connect(options): 6. Wait for the necessary page: 7. Return the instance of the target page: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerconnectoptions https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#browserwaitfortargetpredicate-options https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#targetpage
19. Direct connection to CDP 19 8. Create CPR session: 8.1. Switch on necessary features: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#targetcreatecdpsession https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-cdpsession
20. How to use in test 20
21. Architecture after connection 21
22. One more thing… 1. Is Puppeteer replacing Selenium/WebDriver? 2. Does anyone use this approach in autotests? 3. What is about Selenium? 22 https://github.com/GoogleChrome/puppeteer#q-is-puppeteer-replacing-seleniumwebdriver https://webdriver.io/docs/devtools-service.html https://codecept.io/ https://github.com/SeleniumHQ/selenium/issues/6667 https://github.com/SeleniumHQ/selenium/tree/master/java/client/src/org/openqa/selenium/devtools
23. Advantages 1. Event-driven architecture 2. Easy to use Chrome DevTools features 3. Smart waits 4. Requests, responses tracking 5. Page performance 6. Comprehensive documentation 7. Playground 23
24. Disadvantages 1. Only Chrome • Puppeteer has an experimental library for Firefox 2. Active Chrome DevTools protocol development 3. Strict browser version binding 24
25. NPM trends. Downloads 25 https://www.npmtrends.com/puppeteer-vs-webdriverio-vs-protractor-vs-selenium-webdriver-vs-cypress
26. NPM trends. Stats 26 https://www.npmtrends.com/puppeteer-vs-webdriverio-vs-protractor-vs-selenium-webdriver-vs-cypress
27. Links • Puppeteer: – https://github.com/GoogleChrome/puppeteer – https://pptr.dev/ – https://try-puppeteer.appspot.com/ – https://developers.google.com/web/tools/puppeteer – Examples: • https://developers.google.com/web/tools/puppeteer/examples • Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/ • Protractor: https://www.protractortest.org/ • Author: – GitHub: https://github.com/And93 – Facebook: https://www.facebook.com/andrei.dzeichyk – Linkedin: https://www.linkedin.com/in/andrei-dzeichyk-38821a135/ – Email: andreidei4ik@gmail.com 27
28. The end! 28 Thanks for your attention!