WebDriverIO — Getting Started

What is WebDriverIO?

It’s a Next generation of WebDriver test framework for Node.JS.

What it’s the difference between WebDriver and WebDriverIO?

WebDriver: it’s a common standar like CSS, HTML, etc.

WebDriverIO: is a particular a NodeJS test framework implementation for using WebDriver.

What it’s the benefit of using WebDriverIO over just selenium?

The main benefit of WebDriverIO: it’s simplifies commands by combining actions. So WebDriverIO is a framework that provides a binding to Selenium, that allow simplify several Selenium commands for us.

How it’s integrated with other services and third-party libraries?

There exist many ways to extend their functionalities by using built-in services such as:

• Applitools,
• Appium
• BrowserStack
• SauceLabs
• etc.

Standalone Mode vs WDIO Testrunner

So basically means that wedriverio npm module dependency (v5), is not tied to some specific test runner. It’s up to you to choose, the better for your needs. But if it be possible, you will prefer WDIO Testrunner, for several reasons, like as their seamless integrated with webdriverio implementation, and also because resolve a lot of things for you (there is not needed to use promise anymore, it’s sync for nature, session handler, etc).

Setup configuration

• We assume that you alredy install NodeJS, otherwise you can take a look the oficial documentation.
• installing Test runner: npm i --save-dev @wdio/cli (from v5, the testrunner is separate in different module)
• Generate Configuration file: ./node_modules/.bin/wdio config , which will ask you a several settings questions about how do you like to set your particular config.
• Then you will need to install some driver, for instance a chromedriver . For that, if we are using brew , we can easly do that doing: brew cask install chromedriver .
• Finally be sure that Chrome is already installed in your google chrome apps from: /Applications/Google\ Chrome.app , if not, go to install it here.

Let start to create out first Test!

We need to create a folder that match, with that we defined in the previous steps. For instance, mkdir -p ./test/specs .

Then create a new file vi ./test/specs/basic.js and open it:

const assert = require('assert');
describe('webdriver.io page', () => {
it('should have the right title', () => {
browser.url('https://webdriver.io');
const title = browser.getTitle();
      
      assert.strictEqual(title, 'WebdriverIO · Next-gen WebDriver test framework for Node.js');
   });
});

NOTE: if all was properly configured, you will have access to a global selenium instanced calledbrowser.

Last step, run our first green flag test!

For that, just run in your root project: ./node_modules/.bin/wdio wdio.conf.js

Some architecture design from WebDriverIO Team

• WebDriverIO v5, was designed thinking in Page Object Pattern pattern, which is about hide detail of your accessor methods and encourage to encapsulation principle. What does it mean, for instance, think of your chunk of your HTML page, or the whole page as an Object. That object know how to access and change their data. Result of that, you have a declarative way to manipulate your users actions, in a TellDontAsk way. Then WebDriverIO Team encourage to inheritance between page objects to share this knowledge and implement this pattern.*

• Also describe the way that are build this object with selectors with getter function instead of methods, (object.nameinstead of object.getName) . In that way, These functions get evaluated when you actually access the property and not when you generate the object. More detail you can take a look the oficial page.

* I’m not personally agree on that, because for sharing code propouse, there exist better ways than use inheritance, “Inheritance it’s for specialization not for sharing code”. I would prefer “Composition over Inheritance” approach (GoF book 1996), but this is a complete topic itself :)

Of course it’s not a full course about WebdriverIO, but it’s just an introduction, to start learning about this framework.

Please give me your thoughts about this short article, I love to share ideas, learn from others and I hope this article may be helpful for someone out there!

Also you can following me on Twitter!