webdriver.io
TRANSCRIPT
![Page 1: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/1.jpg)
webdriver.io
![Page 2: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/2.jpg)
whoami
Giovanni Lela
CTO @ linkme srl
Main background Node.js backend developer
![Page 3: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/3.jpg)
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
![Page 4: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/4.jpg)
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)
![Page 5: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/5.jpg)
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
![Page 6: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/6.jpg)
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
![Page 7: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/7.jpg)
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
![Page 8: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/8.jpg)
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>
![Page 9: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/9.jpg)
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
![Page 10: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/10.jpg)
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)
![Page 11: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/11.jpg)
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
![Page 12: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/12.jpg)
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}
![Page 13: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/13.jpg)
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
![Page 14: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/14.jpg)
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();
![Page 15: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/15.jpg)
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);
![Page 16: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/16.jpg)
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')
![Page 17: Webdriver.io](https://reader036.vdocuments.mx/reader036/viewer/2022092623/5871aab81a28abda6a8b569f/html5/thumbnails/17.jpg)
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>