header

WebdriverIO with Cucumber 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. This time we will connect WebdriverIO with Cucumber Framework. 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-cucumber-getting-started and execute this command inside that new directory:

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-cucumber-getting-started",
  "version": "1.0.0",
  "description": "A cool automation framework with Cucumber",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/josdem/webdriverio-cucumber-getting-started.git"
  },
  "keywords": [
    "webdriverio"
  ],
  "author": "josdem",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/josdem/webdriverio-cucumber-getting-started/issues"
  },
  "homepage": "https://github.com/josdem/webdriverio-cucumber-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/cucumber-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? -> cucumber
  • Do you want to use a compiler? -> No
  • Where are your test specs located? -> ./features/step-definitions/steps.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 plugin to your test setup? wait-for
  • 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 case, let’s create a feature file named helloWorld.feature under ${PROJECT_HOME}/features/helloWorld.feature

Feature: To test a website

Scenario: Loading webpage
  Given A webpage as "https://josdem.io/"
  When I get page title
  Then I validate title is "josdem"

Inside the features folder create a step-definitions/steps.js file with this content:

const { Given, When, Then } = require('@cucumber/cucumber')

After that we should be good to create our steps definition with this command:

./node_modules/.bin/cucumber-js

Copy generated code (step definition methods) and paste them into the steps.js file. Your file should look like this:

const { Given, When, Then } = require('@cucumber/cucumber')

Given('A webpage as {string}', function (string) {
  // Write code here that turns the phrase above into concrete actions
  return 'pending;
})


When('I get page title', function () {
  // Write code here that turns the phrase above into concrete actions
  return 'pending'
})

Then('I validate title is {string}', function (string) {
  // Write code here that turns the phrase above into concrete actions
  return 'pending'
});

Finally add your steps implementation

const { Given, When, Then } = require("@cucumber/cucumber")

let title

Given("A webpage as {string}", async (keyword) => {
  browser.url(keyword)
})

When("I get page title", async () => {
  title = browser.getTitle()
})

Then("I validate title is {string}", async (title) => {
  expect(title === "josdem").toBeTruthy()
})

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

 "spec" Reporter:
------------------------------------------------------------------
[chrome 98.0.4758.80 linux #0-0] Running: chrome (v98.0.4758.80) on linux
[chrome 98.0.4758.80 linux #0-0] Session ID: 3176c7b69b896934eaf6d4dbb65939ea
[chrome 98.0.4758.80 linux #0-0]
[chrome 98.0.4758.80 linux #0-0] » /features/helloWorld.feature
[chrome 98.0.4758.80 linux #0-0] To test a website
[chrome 98.0.4758.80 linux #0-0] Loading webpage
[chrome 98.0.4758.80 linux #0-0]    ✓ Given A webpage as "https://josdem.io/"
[chrome 98.0.4758.80 linux #0-0]    ✓ When I get page title
[chrome 98.0.4758.80 linux #0-0]    ✓ Then I validate title is "josdem"
[chrome 98.0.4758.80 linux #0-0]
[chrome 98.0.4758.80 linux #0-0] 3 passing (1s)


Spec Files:	 1 passed, 1 total (100% completed) in 00:00:02

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

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

Return to the main article

comments powered by Disqus