header

WebdriverIO Getting Started

WebdriverIO Is an automation framework based in NodeJS designed to support cross-browser testing and modern mobile native applications. It’s archictecture is based on plugins you can use to extend easily functionlality. WebdriverIO rely on WebDriver protocols that guarantees a true cross-browsing experience and also is a truly open source project driven by OpenJSFoundation. Let’s start by installing NodeJS in our computer, I highly recommend to use NVM so you can manage different versions. Once installed let’s create a new directory named webdriverio-getting-started and execute this command:

npm init

Answer general questions about this project coming in the prompt line, so you can have a package.json generated very similar to this one:

{
  "name": "webdriverio-getting-started",
  "version": "1.0.0",
  "description": "A cool automation framework",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/josdem/webdriverio-getting-started.git"
  },
  "keywords": [
    "webdriverio"
  ],
  "author": "josdem",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/josdem/webdriverio-getting-started/issues"
  },
  "homepage": "https://github.com/josdem/webdriverio-getting-started#readme"
}

Next step is to install WebdriverIO CLI which will allow us to use command line WendriverIO interface.

npm i --save-dev @wdio/cli

Now it is time to configure WebdriverIO adding some dependencies:

@wdio/local-runner
@wdio/mocha-framework
@wdio/spec-reporter
chromedriver
wdio-chromedriver-service

in order to do that, type this command:

npx wdio config

And answer prompt questions with:

  • Where is your automation backend located? -> On my local machine
  • Which framework do you want to use? -> Mocha
  • Do you want to use a compiler? -> No
  • Where are your test specs located? -> ./test/specs/**/*.js
  • Do you want WebdriverIO to autogenerate some test files? - No
  • Which reporter do you want to use? -> spec
  • Do you want to add a service to your test setup? -> chromedriver
  • What is the base url? -> http://localhost

This will gererate a WebdriverIO configuration file named wdio.conf.js. Finally we can create our first test, let’s create a spec file named helloWorld.js under ${PROJECT_HOME}/test/specs/helloWorld.js

const assert = require('assert')

describe('Loading webpage', () => {

   it('validates website title', async() => {
       await browser.url('https://josdem.io/')
       const title = await browser.getTitle()
       assert.strictEqual(title, "josdem")
   })

})

You are good to execute it with: npx wdio run wdio.conf.js, and you should see this output:

"spec" Reporter:
------------------------------------------------------------------
[chrome 94.0.4606.81 linux #0-0] Running: chrome (v94.0.4606.81) on linux
[chrome 94.0.4606.81 linux #0-0] Session ID: 6c452fa2e8f3528b031a3f92b47620e3
[chrome 94.0.4606.81 linux #0-0]
[chrome 94.0.4606.81 linux #0-0] » /test/specs/helloWorld.js
[chrome 94.0.4606.81 linux #0-0] Loading webpage
[chrome 94.0.4606.81 linux #0-0]    ✓ validates website title
[chrome 94.0.4606.81 linux #0-0]
[chrome 94.0.4606.81 linux #0-0] 1 passing (1.1s)

To browse the code go here, to download the project:

git clone git@github.com:josdem/webdriverio-getting-started.git

Return to the main article

comments powered by Disqus