This presentation provides an overview of WebDriver.io, an open-source automation framework for browser and mobile testing. It discusses the key features of WebDriver.io, including its simple installation, integration with other tools, online tutorials and support community. The presentation also demonstrates different modes for using WebDriver.io (standalone, bare metal, test runner), custom commands, multi-remote testing, and visual and performance testing capabilities. Examples are provided to illustrate interacting with elements, selecting elements, and React support.

1. TEST AUTOMATISIERUNG
MIT WEBDRIVER.IO

2. Ich bin Christian Bromann
Software Engineer
bei Sauce Labs

3. 1.
WebDriver
Protokoll

4. “WebDriver is a remote control
interface that enables
introspection and control of user
agents.

6. 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)

7. const elem = $("#myElem")
elem.click()
Chromedriver
Geckodriver
IEDriver
EdgeDriver
SafariDriver
Appium
Selendroid
WebDriverAgent
HTTP
Selenium Grid

8. … even on a SmartTV

9. HTTP
const elem = $("#myElem")
elem.click()

10. 1.
Webdriver.IO

11. KEY FEATURES
Einfache Installation

12. KEY FEATURES
Integration mit Applitools et al.

13. KEY FEATURES
Online Tutorials und Lern Inhalte

14. KEY FEATURES
Support Community

15. KEY FEATURES
Teil der OpenJS Foundation
❤

16. 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'
}
})

17. 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

18. 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

19. 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

21. Die Konfigurationsdatei
Die Datei, die alle Konfigurationen für den Testlauf
beinhaltet.

22. UNTERSCHIEDLICHE
KONFIGURATIONS-
DATEIEN FÜR
VERSCHIEDENE
UMGEBUNGEN
development stagingwdio.conf.js

23. UNTERSTÜTZTE TEST FRAMEWORKS

24. PLUGINS & EXTENSIONS
Frameworks
▸ Mocha
▸ Jasmine
▸ Cucumber
Reporter
▸ Spec
▸ Dot
▸ Allure
▸ JUnit
▸ TeamCity
▸ Tap
▸ Mochaawesome
▸ ...
Services
▸ Sauce
▸ Appium
▸ Static Server
▸ Webpack
▸ Chromedriver
▸ Selenium Standalone
▸ Docker
▸ ...

25. 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

26. WDIO DEVTOOLS SERVICE
ChromedriverHTTP
browser.url("https://webdriver.io")
browser.startTracing()
WebSockets
WebSockets

28. WAS NOCH?
MEHR
FUNKTIONEN

29. 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();

30. 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

31. 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

32. 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

33. MULTIREMOTE
FEATURE
Normaler Test
Resultat
Multiremote Test
Resultat
...

34. EIN WENIG THEORIE!
Das Page
Objekt Model.

35. 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

38. EINE DEMO SAGT
MEHR ALS 1000 WORTE

39. MULTIREMOTE

40. PERFORMANCE
TESTING

41. VISUAL REGRESSION
TESTING

42. WATCH MODE

43. 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

44. https://www.meetup.com/de-DE/continuous-testing-meetup-berlin/

45. DANKE!
Noch Fragen?
Schreibe mir auf Twitter an: @bromann
oder via E-Mail: christian@saucelabs.com
Slides: http://bit.ly/test-automation-with-webdriverio

46. BIG CONCEPT
Bring the attention of your audience over a key
concept using icons or illustrations

47. 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.

48. 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.

49. WANT BIG IMPACT?
Use big
image.

50. USE CHARTS TO
EXPLAIN YOUR
IDEAS
WHITE BLACKGRAY

51. AND TABLES TO COMPARE DATA
A B C
Yellow 10 20 7
Blue 30 15 10
Orange 5 24 16

52. MAPS
our office

53. 89,526,124Whoa! That’s a big number, aren’t you proud?

54. 89,526,124$That’s a lot of money
100%Total success!
185,244 usersAnd a lot of users

55. OUR PROCESS IS
EASY
First
Second
Last

56. 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.

57. You can copy&paste graphs from Google Sheets

58. Place your screenshot here
ANDROID PROJECT
Show and explain your web, app
or software projects using
these gadget templates.

59. Place your screenshot
here
IPHONE PROJECT
Show and explain your web, app
or software projects using
these gadget templates.

60. Place your screenshot here
TABLET PROJECT
Show and explain your web, app
or software projects using
these gadget templates.

61. Place your screenshot here
DESKTOP PROJECT
Show and explain your
web, app or software
projects using these
gadget templates.

62. THANKS!
Any questions?
You can find me at @username &
user@mail.me

63. 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)

64. 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®

65. 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.

66. 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