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.

[Deu] Test Automatisierung Mit Web Driver.io

62 views

Published on

In diesem Webinar schauen wir uns ein Open Source Framework genauer an: Webdriver.IO. Es ist eines der längsten entwickelten Projekte mit einer großen Community. Wir schauen uns an, wie die Automatisierung von Browsern oder mobilen Geräten überhaupt funktioniert und wie man Webdriver.IO geschickt dazu einsetzen kann, dies in einer Reihe von Test Skripten zu organisieren.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[Deu] Test Automatisierung Mit Web Driver.io

  1. 1. TEST AUTOMATISIERUNG MIT WEBDRIVER.IO
  2. 2. Ich bin Christian Bromann Software Engineer bei Sauce Labs
  3. 3. 1. WebDriver Protokoll
  4. 4. “WebDriver is a remote control interface that enables introspection and control of user agents.
  5. 5. Was ist das WebDriver Protokoll? ▸ Offizieller W3C Standard für Browser Automatisierung ▸ Vorgänger des JSONWireProtocol ▸ WebDriver !== Selenium!!! ▸ Definiert ein REST Interface ▸ Ermöglicht Automatisierung aller Browser ▸ Kann mit allen Programmiersprachen genutzt werden (minimale Anforderungen: das Senden von HTTP Anfragen)
  6. 6. const elem = $("#myElem") elem.click() Chromedriver Geckodriver IEDriver EdgeDriver SafariDriver Appium Selendroid WebDriverAgent HTTP Selenium Grid
  7. 7. … even on a SmartTV
  8. 8. HTTP const elem = $("#myElem") elem.click()
  9. 9. 1. Webdriver.IO
  10. 10. KEY FEATURES Einfache Installation
  11. 11. KEY FEATURES Integration mit Applitools et al.
  12. 12. KEY FEATURES Online Tutorials und Lern Inhalte
  13. 13. KEY FEATURES Support Community
  14. 14. KEY FEATURES Teil der OpenJS Foundation ❤
  15. 15. Standalone Mode Nutzung der Autom.-befehle über das Node.js Modul: WebdriverIO kann auf drei verschiedenen Arten genutzt werden! WDIO Testrunner Nutzung des Testrunners, um Tests parallel laufen zu lassen: import {remote} from ‘webdriverio’ const client = remote({ capabilities: { ... } }) $ wdio wdio.conf.js Bare Metal Mode Schnittstelle um direkt auf das WebDriver Protokoll zuzugreifen: import WebDriver from 'webdriver' const client = await WebDriver .newSession({ capabilities: { browserName: 'firefox' } })
  16. 16. import WebDriver from 'webdriver' ;(async () => { const client = await WebDriver.newSession({ path: '/', capabilities: { browserName: 'firefox' } }) await client.navigateTo('https://www.google.com/ncr') const searchInput = await client.findElement('css selector', '#lst-ib') await client.elementSendKeys( searchInput['element-6066-11e4-a52e-4f735466cecf'], 'WebDriver' ) // ... console.log(await client.getTitle()) // outputs "WebDriver - Google Search" await client.deleteSession() })() BARE METAL MODE
  17. 17. import { remote } from 'webdriverio' ;(async () => { const browser = await remote({ capabilities: { browserName: 'chrome' } }) await browser.url('http://webdriver.io') const elem = await browser.$('#someElem') await elem.click() // ... await browser.deleteSession() })() STANDALONE MODE
  18. 18. var expect = require('chai').expect; describe('webdriver.io api page', function() { it('should be able to filter for commands', function () { browser.url('http://webdriver.io/api.html'); $('.searchbar input').setValue('getT'); var results = $$('.commands.property a').filter(function (link) { return link.isVisible(); }); expect(results.length).to.be.equal(3); // check out second result results[1].click(); expect($('.doc h1').getText()).to.be.equal('GETTEXT'); }); }); WDIO TESTRUNNER MODE
  19. 19. Die Konfigurationsdatei Die Datei, die alle Konfigurationen für den Testlauf beinhaltet.
  20. 20. UNTERSCHIEDLICHE KONFIGURATIONS- DATEIEN FÜR VERSCHIEDENE UMGEBUNGEN development stagingwdio.conf.js
  21. 21. UNTERSTÜTZTE TEST FRAMEWORKS
  22. 22. PLUGINS & EXTENSIONS Frameworks ▸ Mocha ▸ Jasmine ▸ Cucumber Reporter ▸ Spec ▸ Dot ▸ Allure ▸ JUnit ▸ TeamCity ▸ Tap ▸ Mochaawesome ▸ ... Services ▸ Sauce ▸ Appium ▸ Static Server ▸ Webpack ▸ Chromedriver ▸ Selenium Standalone ▸ Docker ▸ ...
  23. 23. SERVICES IN WEBDRIVER.IO ▸ Möglichkeit Code zu bestimmten Zeiten während des Tests auszuführen ▸ Dazu gibt es sog. Hooks: ▹ onPrepare / onComplete ▹ beforeSession / afterSession ▹ before / after ▹ beforeSuite / afterSuite ▹ beforeTest / afterTest ▹ beforeCommand / afterCommand ▸ Ermöglicht die Modifizierung von Optionen und kann die browser Instanz mit nützlichen Funktionen bereichern ▸ Nutzung von selbst erstellten Services möglich
  24. 24. WDIO DEVTOOLS SERVICE ChromedriverHTTP browser.url("https://webdriver.io") browser.startTracing() WebSockets WebSockets
  25. 25. WAS NOCH? MEHR FUNKTIONEN
  26. 26. Element with certain text const header = $('h1=Welcome to my Page'); const header2 = $('h1*=Welcome'); AUSWÄHLEN VON ELEMENTEN DURCH DAS WEBDRIVER PROTOKOLL CSS Query Selector const elem = $('h2.subheading a'); elem.click(); Link Text <!-- index.html --> <a href="http://webdriver.io">WebdriverIO</a> <h1>Welcome to my Page</h1> // test.js const link = $('=WebdriverIO'); console.log(link.getText()); // outputs: "WebdriverIO" Partial Link Text const link = $('*=driver'); console.log(link.getText()); // outputs: "WebdriverIO" XPath const elem = $('//BODY/P[1]'); elem.click();
  27. 27. React.JS Support <!-- my-component.jsx --> import React from 'react' import ReactDOM from 'react-dom' const MyComponent = (props) => { const { name } = props; const [state] = React.useState(name === 'there' ? ', how are you?' : '') return (<div>Hello {name || 'World'}{state}</div>) } ReactDOM.render( <div> <MyComponent /> <MyComponent name="Barry"/> <MyComponent name="WebdriverIO"/> <MyComponent name="there"/> </div>, document.getElementById('#root'), ) // test.js const myComponent = browser.react$('MyComponent') expect(myComponent.isDisplayed()).toBe(true) // pass const myComponent = browser.react$('MyComponent', {name: 'WebdriverIO'}) expect(myComponent.getText()).toBe('Hello WebdriverIO') // pass const myComponent = browser.react$('MyComponent', {}, ', how are you?') expect(myComponent.getText()).toBe('Hello there, how are you?') // pass AUSWÄHLEN VON ELEMENTEN DURCH DAS WEBDRIVER PROTOKOLL
  28. 28. Accessibility ID const elem = $('~my_identifier'); elem.click(); UI Automator (iOS) const selector = 'UIATarget.localTarget().frontMostApp().mainWindow().buttons()[0]'; const Button = $(`ios=${selector}`); Button.click(); Class Name // iOS example $('UIATextField').click(); // Android example $('android.widget.DatePicker').click(); UI Automator (Android) const selector = 'new UiSelector().text("Cancel").className("android.widget.Button")'; const Button = $(`android=${selector}`); Button.click(); AUSWÄHLEN VON ELEMENTEN MIT Appium
  29. 29. Hervorragend geeignet, um spezifische (asynchrone) Logiken in einen synchronen Befehl zu verwandeln: browser.addCommand('deleteUser', (username) => { return axios.post( '/rest/v1/_test_helpers/delete_user', { user: username } ); }); browser.deleteUser('anonymous123') browser.url('/dashboard') // ... BENUTZERDEFINIERTE BEFEHLE
  30. 30. MULTIREMOTE FEATURE Normaler Test Resultat Multiremote Test Resultat ...
  31. 31. EIN WENIG THEORIE! Das Page Objekt Model.
  32. 32. THE PAGE OBJECT MODEL ▸ Sehr populäres Design pattern in der Testautomatisierung ▸ Hält Code sauber und einfach zu managen ▸ In einer idealen Welt würde ein Page Redesign nur Änderungen im POM erfordern und nicht in den Tests ▸ Alles kann in einem POM abstrahiert werden ▸ Ein POM enthält: ▹ Locators und Elemente ▹ Methoden die spezifische Workflows und Interaktionen mit der Seite abbilden
  33. 33. EINE DEMO SAGT MEHR ALS 1000 WORTE
  34. 34. MULTIREMOTE
  35. 35. PERFORMANCE TESTING
  36. 36. VISUAL REGRESSION TESTING
  37. 37. WATCH MODE
  38. 38. Zusammenfassung ● WebdriverIO ist ein Framework zur Automatisierung von E2E (end-to -end) Tests ● Unterstützt Automatisierung basierend auf dem WebDriver Protokoll und kann dadurch Browser als auch mobile Geräte (web oder native Apps) steuern ● Bietet einen Testrunner, der neben dem Reporting eine große Anzahl von weiteren Aufgaben übernimmt, die beim täglichen Testen anfallen (Integrationen) Wo kann ich anfangen? Projektdokumentation: https://webdriver.io Online Kurs: https://learn.webdriver.io/ Support Chat: https://gitter.im/webdriverio/webdriverio
  39. 39. https://www.meetup.com/de-DE/continuous-testing-meetup-berlin/
  40. 40. DANKE! Noch Fragen? Schreibe mir auf Twitter an: @bromann oder via E-Mail: christian@saucelabs.com Slides: http://bit.ly/test-automation-with-webdriverio
  41. 41. BIG CONCEPT Bring the attention of your audience over a key concept using icons or illustrations
  42. 42. White Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum. YOU CAN ALSO SPLIT YOUR CONTENT Black Is the color of coal, ebony, and of outer space. It is the darkest color, the result of the absence of or complete absorption of light.
  43. 43. IN TWO OR THREE COLUMNS Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
  44. 44. WANT BIG IMPACT? Use big image.
  45. 45. USE CHARTS TO EXPLAIN YOUR IDEAS WHITE BLACKGRAY
  46. 46. AND TABLES TO COMPARE DATA A B C Yellow 10 20 7 Blue 30 15 10 Orange 5 24 16
  47. 47. MAPS our office
  48. 48. 89,526,124Whoa! That’s a big number, aren’t you proud?
  49. 49. 89,526,124$That’s a lot of money 100%Total success! 185,244 usersAnd a lot of users
  50. 50. OUR PROCESS IS EASY First Second Last
  51. 51. LET’S REVIEW SOME CONCEPTS Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage. Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
  52. 52. You can copy&paste graphs from Google Sheets
  53. 53. Place your screenshot here ANDROID PROJECT Show and explain your web, app or software projects using these gadget templates.
  54. 54. Place your screenshot here IPHONE PROJECT Show and explain your web, app or software projects using these gadget templates.
  55. 55. Place your screenshot here TABLET PROJECT Show and explain your web, app or software projects using these gadget templates.
  56. 56. Place your screenshot here DESKTOP PROJECT Show and explain your web, app or software projects using these gadget templates.
  57. 57. THANKS! Any questions? You can find me at @username & user@mail.me
  58. 58. CREDITS Special thanks to all the people who made and released these awesome resources for free: ▸ Simple line icons by Mirko Monti ▸ E-commerce icons by Virgil Pana ▸ Streamline iconset by Webalys ▸ Presentation template by SlidesCarnival ▸ Photographs by Death to the Stock Photo (license)
  59. 59. PRESENTATION DESIGN This presentations uses the following typographies and colors: ▸ Titles: Montserrat ▸ Body copy: Karla You can download the fonts on this page: http://www.google.com/fonts/#UsePlace:use/Collection:Montserrat:400,700|Karla:400,400italic,700,700italic Click on the “arrow button” that appears on the top right Red #F44336 Deep orange #FF5722 Orange #FF9800 Amber #FFC107 Yellow #FFEB3B Lime #CDDC39 Green #8BC34A Dark green #4CAF50 Teal #009688 Cyan #00BCD4 Blue #03A9F4 Dark blue #2196F3 Indigo #3F51B5 Deep Purple #673AB7 Purple #9C27B0 Magenta #E91E63 Blue gray #607D8B You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®
  60. 60. What’s this? This is a free presentation template for Google Slides designed by SlidesCarnival. We believe that good design serves to better communicate ideas, so we create free quality presentation templates for you to focus on the content. Enjoy them at will and share with us your results at: twitter.com/SlidesCarnival facebook.com/slidescarnival ABOUT THIS TEMPLATE How can I use it? Open this document in Google Slides (if you are at slidescarnival.com use the button below this presentation). You have to be signed in to your Google account EDIT IN GOOGLE SLIDES Go to the File menu and select Make a copy. You will get a copy of this document on your Google Drive and will be able to edit, add or delete slides. EDIT IN MICROSOFT POWERPOINT® Go to the File menu and select Download as Microsoft PowerPoint. You will get a .pptx file that you can edit in PowerPoint. Remember to download and install the fonts used in this presentation (you’ll find the links to the font files needed in the Presentation design slide) This template is free to use under Creative Commons Attribution license. If you use the graphic assets (photos, icons and typographies) provided with this presentation you must keep the Credits slide.
  61. 61. Line Icons by Webalys, Virgil Pana and Mirko Monti are published under a Creative Commons Attribution license and Free for both personal and commercial use. You can copy, adapt, remix, distribute or transmit them. If you use these sets on your presentation remember to keep the “Credits” slide or provide a mention and link to these resources: ● Mirko Monti - Simple line icons ● Virgil Pana - E-commerce icons ● Webalys - Streamline iconset

×