Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webdriver.io

1,297 views

Published on

Automated browser testing with webdriver.io

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Webdriver.io

  1. 1. webdriver.io
  2. 2. whoami Giovanni Lela CTO @ linkme srl Main background Node.js backend developer
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×