WebdriverIO Cribs: A Tour Through the Newly Architected WebdriverIO Home

Join us as Christian Bromann, WebdriverIO core contributor, and lead engineer on the DevTools team at Sauce Labs, talks about the latest version of WebdriverIO. He will provide insights into the major differences in this newest version, plus show how to upgrade your existing WebdriverIO projects, leverage new features, and discuss what is next on the project roadmap.

Some background: at SauceCon 2018 Christian talked about a new version of WebdriverIO that would not only allow users to endlessly scale their test suites but that would also completely re-architect the project to enable more contributors to easier participate in the development of it. After more than a year and over 800 commits from 30 different contributors later the new version was finally released to NPM with a brand new documentation around it.

Even though project maintainers do their best to make updates to a new release as seamless as possible, there are inevitable changes that are required to put the project back on track and allow it to grow with its usage. In this talk Christian discusses these changes and how they will affect your current projects.

Transcript

2. Software Engineer at I am working on ▪ DevTools team ▪ WebdriverIO ▪ Some things Hello ! I AM CHRISTIAN 2
3. 1 A NEW VERSION Why do you let me rewrite all my existing tests again??? 3
4. GOALS 4
5. “Working day jobs, maintainers today can struggle to find the time to fix critical bugs, all the while facing incessant demands from users requesting free support on GitHub. Maintainer burnout is a monstrous challenge.” techcrunch.com 5
6. 6 Community First!
7. 7 Governance
8. Month of active development 12 32 Unique collaborators 800 Commits 8
9. later 7 weeks 68 Unique collaborators 1023 Commits 9
10. 10 NEW MODULE SYSTEM Powered by Lerna.io
12. Package Names Changed 12 Internal Maintained Packages: wdio-dot-reporter → @wdio/dot-reporter wdio-mocha-framework → @wdio/mocha-framework wdio-sauce-service → @wdio/sauce-service ▪ Packages starting with @wdio are “official” maintained packages ▪ Community packages stay as is (e.g. wdio-*-service) ▪ @wdio packages are being preferred before wdio-* packages
13. webdriverio Consumes the webdriver package and adds syntactic sugar on top of it (e.g. stale element retries) SEPARATION OF CONCERNS webdriver Is responsible to provide a simple non-opinionated interface to make HTTP requests to a driver. @wdio/cli A testrunner that provides everything needed to build a test suite on a large scale. 13
14. SEPARATION OF CONCERNS import WebDriver from 'webdriver' ;(async () => { const client = await WebDriver.newSession({ path: '/', capabilities: { browserName: 'firefox' } }) await client.navigateTo('https://www.google.com/ncr') const searchInput = await client.findElement('css selector', '#lst-ib') await client.elementSendKeys(searchInput['element-6066-11e4-a52e-4f735466cecf'], 'WebDriver') const searchBtn = await client.findElement('css selector', 'input[value="Google Search"]') await client.elementClick(searchBtn['element-6066-11e4-a52e-4f735466cecf']) console.log(await client.getTitle()) // outputs "WebDriver - Google Search" await client.deleteSession() })() 14 webdriver
15. Webdriver package $ npm install webdriver ▪ The true protocol binding ▪ Defines commands for WebDriver, JSONWire Protocol, Appium, Mobile JSONWire Protocol, Chromium and SauceLabs ▪ Easy to maintain: all commands are defined as a JSON ▪ Client only gets commands assigned based on its capabilities from the session response ▪ !!! Required us to rename a bunch of commands !!! (see CHANGELOG.md for details) 15
16. Webdriver package 16 "/session/:sessionId/url": { "GET": { "command": "getUrl", "description": "The Get Current URL command returns the URL of the current top-level browsing context.", "ref": "https://w3c.github.io/webdriver/#dfn-get-current-url", "parameters": [] }, "POST": { "command": "navigateTo", "description": "The navigateTo (go) command is used to cause the user agent to navigate the current ...", "ref": "https://w3c.github.io/webdriver/#dfn-navigate-to", "parameters": [{ "name": "url", "type": "string", "description": "string representing an absolute URL (beginning with http(s)), possibly including ...", "required": true }], "returns": { "type": "String", "name": "url", "description": "current document URL of the top-level browsing context." } } },
17. ▪ Browser vs. Element scope ▪ No command chaining anymore SEPARATION OF CONCERNS browser.url('http://v4.webdriver.io/api.html'); $('.searchbar input').setValue('getT'); var results = $$('.commands.property a').filter(function (link) { return link.isVisible(); }); expect(results.length).to.be.equal(3); // check out second result results[1].click(); expect($('.doc h1').getText()).to.be.equal('GETTEXT'); 17 webdriverio
18. SEPARATION OF CONCERNS // wdio.conf.js const path = require('path') exports.config = { /** * server configurations */ hostname: 'ondemand.saucelabs.com', port: 443, region: 'eu', /** * specify test files */ specs: [path.resolve(__dirname, 'mocha.test.js')], // ... } 18 @wdio/cli $ ./node_modules/.bin/wdio wdio.conf.js
19. NEW FEATURES e.g. DevTools service with performance capabilities 19
20. 20 DEVTOOLS SERVICE Chromedriver HTTP browser.url("https://webdriver.io") browser.startTracing() WebSockets WebSockets
21. NEW FEATURES e.g. Applitools service 21
22. NEW FEATURES e.g. Watch Functionality 22
23. NEW FEATURES e.g. Debugging 23
24. NEW DOCS ...with blog, videos and much more 24
25. 25 How To Update? https://www.youtube.com/watch?v=vC3X4ZdysYI
26. 26 Roadmap
27. 27 one last note
28. Thanks! ANY QUESTIONS? You can find me 24/7 on the Gitter.im support channel or @bromann on Twitter or @christian-bromann on GitHub 28
29. SlidesCarnival icons are editable shapes. This means that you can: • Resize them without losing quality. • Change fill color and opacity. Isn’t that nice? :) Examples: 29
30. Now you can use any emoji as an icon! And of course it resizes without losing quality and you can change the color. How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328 ✋❤ and many more... 30