Upload
linkme-srl
View
250
Download
0
Embed Size (px)
Citation preview
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>