Webdriver.io
0 likes2,176 views
This document discusses the webdriver.io framework for automated browser testing. The author needed a framework for blackbox testing of a web interface like a user would. Webdriver.io provides JavaScript bindings for Selenium that allow writing tests in a synchronous style using the browser object. Tests can run across multiple browsers and platforms. The framework is easy to set up and use, supports plugins, and allows custom commands. Under the hood, it communicates with Selenium using the WebDriver protocol to automate actual browsers.
![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)](https://image.slidesharecdn.com/webdriver-160608105432/85/Webdriver-io-10-320.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}](https://image.slidesharecdn.com/webdriver-160608105432/85/Webdriver-io-12-320.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();](https://image.slidesharecdn.com/webdriver-160608105432/85/Webdriver-io-14-320.jpg)
Webdriver.io
- 1. webdriver.io
- 2. whoami Giovanni Lela CTO @ linkme srl Main background Node.js backend developer
- 3. 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
- 4. 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)
- 5. 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.js 2- mocha 3- a browser object - where does it come from? 4- synchronous code
- 6. 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
- 7. Ease of use 1- javascript synchronous commands - ok cool no need for performance here 2- 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
- 8. 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>
- 9. 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
- 10. 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)
- 11. how does this work? ● The testing script ● The selenium webdriver server ● The browser The communication to web driver follows the webdriver protocol https://w3c.github.io/webdriver/webdriver-spec.html test script webdriver browser / mobile app
- 12. 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}
- 13. 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
- 14. 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();
- 15. 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);
- 16. 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')
- 17. 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>