webdriver.io

whoami

Giovanni Lela

CTO @ linkme srl

Main background Node.js backend developer

What I needed

- Test as the user would do - 100% dumb blackbox tests of the web interface - basically user stories acceptance

- As easy to use as it gets

Secondary objectives

Have an easy to learn language so that QA and non hardcore javascript people can use it

Do more than just browser automation - also prepare the database, trigger websocket events, prompt for passwords

Can run tests on multiple OS/Browser versions and combinations

Compatible with mocha / chai

Compatible with existing automation scripts (grunt, gulp, whatever)

Enter webdriver.io

var assert = require('assert'); //OR chai or whatever

describe('webdriver.io page', function() {

it('should have the right title', function () {

browser.url('http://webdriver.io');

var title = browser.getTitle();

assert.equal(title, 'WebdriverIO - Selenium 2.0 javascript bindings for nodejs');

});

});

1- javascript - node.js2- mocha3- a browser object - where does it come from?4- synchronous code

Is this what i need? Testing like a user

Yes, it just automates an actual browser with selenium (we’ll get to it)

● we emulate user interaction on the browser and then read the result strait out of the dom

● it as an actual browser not the damn phantomjs (which can still be used)

○ Flexbox compatibility

○ Some configuration / installation issues

Ease of use

1- javascript synchronous commands - ok cool no need for performance here2- lots of selector strategies :● Css query selector style - browser.click('h2.subheading a');

● Visible text matching - browser.click('*=I’M A LINK!')

● XPath :/

● Mobile selectors - yes you heard right

Ease of use - wdio test runner

npm i -g wdio selenium-standalone

● wdio config sets up thw whole thing for you letting you choose:

○ local test / cloud test (saucelabs, browserstack)○ test runner (mocha / jasmine / cucumber) - also installas the connector for you○ test reporter○ .. and so on

● selenium standalone install and selenium standalone start

● write your tests

● wdio <config file>

You can also use it as standalone

var webdriverio = require('webdriverio');

var options = {..};

webdriverio

.remote(options)

.init()

.url('http://www.google.com')

.getTitle().then(function(title) {

console.log('Title was: ' + title);

})

.end();

It also has plugins for grunt / gulp

Custom commands

Unfortunately we cannot add async commands directly in the test but we can define custom commands.

browser.addCommand('getOneTimePassword', function async(){

return new Promise((resolve, reject)=>{

rl.question('Your one time password?', (test) => {

resolve(test)

rl.close()

})

})

})---const myPass = browser.getOneTimePassword()

browser.setValue('input[name="otp"]', stuff)

how does this work?

● The testing script

● The selenium webdriver server

● The browser

The communication to web driver followsthe webdriver protocol

https://w3c.github.io/webdriver/webdriver-spec.html

test script

webdriver

browser / mobile app

selenium WebDriver protocol

POST /wd/hub/session/e1252817-b577-4f21-8041-570fbc727f62/url HTTP/1.1

Connection: keep-alive

[...]

host: 127.0.0.1:4444

{"url":"http://webdriver.io"}

HTTP/1.1 200 OK

Date: Sun, 29 May 2016 21:19:53 GMT

Content-Type: application/json; charset=utf-8

{"state":"success","sessionId":"e1252817-b577-4f21-8041-570fbc727f62","hCode":836948231,"value":null,"class":"org.openqa.selenium.remote.Response","status":0}

Cool stuff I did not know about

CSS regression settings

● Define areas within your application that should always look the same● Use WebdriverIO and WebdriverCSS to write some E2E tests and take screenshots of these areas● Continue working on your application or website● After a while rerun the tests● If desired areas differ from previous taken screenshots an image diff gets generated and you get

notified in your tests

CSS Regression testing

client .init() .url('http://example.com') .webdrivercss('startpage',[ { name: 'header', elem: '#header' }, { name: 'hero', elem: '//*[@id="hero"]/div[2]' } ], function(err, res) { assert.ifError(err); assert.ok(res.header[0].isWithinMisMatchTolerance); assert.ok(res.hero[0].isWithinMisMatchTolerance); }) .end();

Other cool stuff

● Page object support

● Sauce labs support

● Mobile / Appium support

var selector = 'new UiSelector().text("Cancel")).className("android.widget.Button")';

browser.click(selector);

client.rotate(114, 198, 5, 3, 220, 2);

Uncool things I did not know about

● Keeping selenium and the chrome driver up to date is not funny, also you will need java to run it

● Not all browsers are created equal, so are their drivers

● Webdriver css is not compatibile with recent releases of webdriver.io

● For single page application you end up writing a lot of stuff like this

browser.waitForExist('div.btn-primary-color-full.btn-large') browser.click('div.btn-primary-color-full.btn-large')

Next steps

● Wait for webdriver css to get on par with the current wdio release

● Selenium ide - translate from selenese

<table> <tr><td>open</td><td></td><td>/download/</td></tr> <tr><td>assertTitle</td><td></td><td>Downloads</td></tr> <tr><td>verifyText</td><td>//h2</td><td>Downloads</td></tr></table>