WebdriverIO allows controlling browsers using code and integrates with BDD frameworks like Cucumber and Mocha. It manages Selenium and supports various browsers. Tests are written with Gherkin feature files, step definitions convert these to code, and page objects represent page elements. The browser API allows interacting with pages by URL, waiting for elements, clicking, and more. Challenges include maintaining matching versions as browsers and drivers update.

1. Automated tests with webdriverIO
1João Casalta Nabais

2. What is WebdriverIO?
• Allows you to control a browser using code
• Out of the box hook integration with BDD frameworks:
• Cucumber
• Jasmine
• Mocha
• Out of the box support for reporters
• Manages Selenium for you
2

3. Setup
3
Feature Step
Page
Object
WebdriverIO browser
API
Selenium
Server
Webdriver
Browser
Driver
• geckodriver
• chromedriver
• safaridriver
• iedriver
• (…)
Browser
• firefox
• chrome
• Safari
• ie
• (…)

4. Features
Allows you to write the test cases using Gherkin (“natural
language”), e.g.:
4
Search.feature

5. Steps (Step Definitions)
Responsible to “convert” gherkin statements to a set of code
instructions, e.g.:
5
Search.feature
google-search-steps.js

6. Page Objects
Represent the elements and actions of a web page, e.g.:
6
google-search-page.js
google-search-steps.js

7. Browser API
Represent the elements and actions of a web page, e.g.:
7
google-search-page.js
• browser – abstraction used for interacting
with the web browser;
• .url() – opens the browser in the provided
URI
• .waitForExist – waits for an element to exist
in the DOM
• .waitForVisible – waits for an element to be
visible in the DOM
• .isVisible() – returns true if the element is
visible in the DOM, otherwise returns false

8. Browser API
Other useful commands:
• browser.scroll([selector][,xoffset][,yoffset]);
• browser.click(selector);
• browser.pause(milliseconds);
• browser.moveToObject(selector,xoffset,yoffset);
• browser.setValue(selector,values);
• browser.execute(script[,argument1,...,argumentN]);
• browser.getCookie([name]);
8

9. Demo
• Google Search Features:
• Search by a static term
• Search by parameter
9

10. Reporters
10
• Allure
• Xunit
• Dot
• Step
• (…)

11. Challenges
• Configuration of Browsers
• Stability of webdriverio project
• Version matching (repos, selenium server, browser drivers, browsers)
• E.g. If chrome automatically updates and by some reason you have a fixed
chromedriver version it might break L
• Support of webdriver protocol (JSON Wire)
• Some drivers do not have all the actionsimplemented, so even if Webdriverio
API sends the request to selenium, the driver might not have it supported for
the targeted browser L (e.g. window maximize in latest chrome version)
11

12. References
• Gherkin Features
• https://cucumber.io/docs/reference
• Cucumber Step Definitions
• https://cucumber.io/docs/reference#step-definitions
• Page Objects
• http://webdriver.io/guide/testrunner/pageobjects.html#description
• https://martinfowler.com/bliki/PageObject.html
• WebdriverIO API (Browser API)
• http://webdriver.io/api.html
12

13. References
• WebdriverIO GitHub
• https://github.com/webdriverio/webdriverio/
• WebdriverIO Gitter
• https://gitter.im/webdriverio/webdriverio
13

14. Thank You!
14João Casalta Nabais