Framework Setup

Introduction

In this section, we will create a single configuration file to store all our Test Runner settings, which will be used when running any of our tests. This file is pretty large, but thankfully the Test Runner provides a utility which asks a series of questions in order to automatically create an appropriate configuration file for us.

Let’s begin 🙂

WDIO Test Runner utility

  1. Open up Terminal (or Command prompt) and change directory (cd) into the project root again…
    cd webdriverio-framework

     (or whatever your path is)

  2. Enter in the following to begin the Test Runner utility…
    ./node_modules/.bin/wdio

    It will recognise that we haven’t yet created a configuration file, so will begin asking us questions in order to create an appropriate one for us.

Where do you want to execute your tests?

  1. For the first question, select to execute our tests on our local machine like below, and press Enter…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? (Use arrow keys)
    ❯ On my local machine 
      In the cloud using Sauce Labs, Browserstack or Testingbot 
      In the cloud using a different service 
      I have my own Selenium cloud

Which framework do you want to use?

  1. For the second question, select to use the Cucumber framework like below, and press Enter…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? 
      mocha 
      jasmine 
    ❯ cucumber
    • Select ‘Yes’ when asked to install the framework adapter for Cucumber…
      =========================
      WDIO Configuration Helper
      =========================
      
      - Where do you want to execute your tests? On my local machine
      - Which framework do you want to use? cucumber
      - Shall I install the framework adapter for you? (Y/n) Y

Where are your Feature files located?

  1. For the third question, enter in an appropriate relative path to where our Cucumber Feature files will exist and press Enter (it is common practice to have a ‘/src/resources’ directory and then have a ‘/features’ directory within the ‘/src/resources’ directory to keep our Feature files in)…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? (./features/**/*.feature) ./src/resources/features/**/*.feature

Where are your step definitions located?

  1. For the next question, enter in an appropriate relative path to where our Step Definition files will exist and press Enter (it is again common practice to keep our Step Definition files in a ‘/src/test/steps’ directory).  Step Definitions are the glue that connects our Cucumber Feature files (written in Gherkin language) to our Javascript code…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/features/**/*.feature
    - Where are your step definitions located? (./features/step-definitions) ./src/test/steps/**/*.js

Which reporter do you want to use?

  1. Next, select the reporter you want to use when running your tests and press Enter. In this blog series, I will be using Spec reporter due to the output gives on passing and failing test cases. You could instead use another like TestRail if you wanted to push the test results into TestRail (For more information please see http://webdriver.io/v3.4/guide/testrunner/reporters.html)…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/resources/features/**/*.feature
    - Where are your step definitions located? ./src/test/steps/**/*.js
    - Which reporter do you want to use? 
     ◯  mochawesome - https://github.com/fijijavis/wdio-mochawesome-reporter
     ◯  slick - https://github.com/codeclown/wdio-slick-reporter
     ◯  dot - https://github.com/webdriverio/wdio-dot-reporter
    ❯◯  spec - https://github.com/webdriverio/wdio-spec-reporter
     ◯  junit - https://github.com/webdriverio/wdio-junit-reporter
     ◯  allure - https://github.com/webdriverio/wdio-allure-reporter
     ◯  teamcity - https://github.com/sullenor/wdio-teamcity-reporter
    (Move up and down to reveal more choices)

Do you want to add a service to your test setup?

  1. Next, we will select to add the Selenium Standalone service, so that we can automatically start an instance of Selenium Standalone before our tests our run (you could alternatively select a cloud-based testing platform like SauceLabs or BrowserStack if your company uses that).  Select ‘Selenium Standalone’ and press Enter…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/resources/features/**/*.feature
    - Where are your step definitions located? ./src/test/steps/**/*.js
    - Which reporter do you want to use? 
    - Do you want to add a service to your test setup? 
     ◯  testingbot - https://github.com/testingbot/wdio-testingbot-service
     ◯  appium - https://github.com/rhysd/wdio-appium-service
     ◯  firefox-profile - https://github.com/webdriverio/wdio-firefox-profile-service
    ❯◯  selenium-standalone - https://github.com/webdriverio/wdio-selenium-standalone-service
     ◯  phantomjs - https://github.com/cognitom/wdio-phantomjs-service
     ◯  static-server - https://github.com/LeadPages/wdio-static-server-service
     ◯  visual-regression - https://github.com/zinserjan/wdio-visual-regression-service
    (Move up and down to reveal more choices)

Level of logging verbosity

  1. Next, select a suitable level of logging to output and press Enter.  For the purpose of this blog series, I will select ‘silent’ so that less noise is output, but you could select ‘verbose’ to output all logs or choose a specific level of logging like ‘error’ to only output that…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/resources/features/**/*.feature
    - Where are your step definitions located? ./src/test/steps/**/*.js
    - Which reporter do you want to use? 
    - Do you want to add a service to your test setup? 
    - Level of logging verbosity (Use arrow keys)
    ❯ silent 
      verbose 
      command 
      data 
      result 
      error

In which directory should screenshots gets saved if a command fails?

  1. For the next question, select a suitable relative path to store an screenshots that are taken when a test fails, and press Enter.  For the purpose of this blog series, I will stick to the default directory path…
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/resources/features/**/*.feature
    - Where are your step definitions located? ./src/test/steps/**/*.js
    - Which reporter do you want to use? 
    - Do you want to add a service to your test setup? 
    - Level of logging verbosity silent
    - In which directory should screenshots gets saved if a command fails? (./errorShots/)

What is the base URL?

  1. For the last question, enter the Base URL of the website you will be testing and press Enter.  For the purpose of this blog series, I will be showing an example test of going to DuckDuckGo search engine, searching for Reddit, selecting the first result and then asserting that we are indeed on the Reddit home page. Based on this, my base URL will be https://start.duckduckgo.com/
    =========================
    WDIO Configuration Helper
    =========================
    
    - Where do you want to execute your tests? On my local machine
    - Which framework do you want to use? cucumber
    - Shall I install the framework adapter for you? Yes
    - Where are your feature files located? ./src/resources/features/**/*.feature
    - Where are your step definitions located? ./src/test/steps/**/*.js
    - Which reporter do you want to use? 
    - Do you want to add a service to your test setup? 
    - Level of logging verbosity silent
    - In which directory should screenshots gets saved if a command fails? ./errorShots/
    - What is the base url? (http://localhost) https://start.duckduckgo.com/

Now that all questions have been answered, the WDIO packages will install. Once complete, a WDIO configuration file (wdio.conf.js) will be created based on all the questions we just answered…

=========================
WDIO Configuration Helper
=========================

- Where do you want to execute your tests? On my local machine
- Which framework do you want to use? cucumber
- Shall I install the framework adapter for you? Yes
- Where are your feature files located? ./src/resources/features/**/*.feature
- Where are your step definitions located? ./src/test/steps/**/*.js
- Which reporter do you want to use? 
- Do you want to add a service to your test setup? 
- Level of logging verbosity silent
- In which directory should screenshots gets saved if a command fails? ./errorShots/
- What is the base url? https://start.duckduckgo.com/

Installing wdio packages:

Packages installed successfully, creating configuration file...

Configuration file was created successfully!
To run your tests, execute:

$ wdio wdio.conf.js

➜  webdriverio-framework

Our WebDriverIO Test Runner is now setup, with its configuration file (wdio.conf.js) existing in our project root.

In the next section, we will begin to create the folder structure for our test framework and add the necessary files.  We will also tweak our Test Runner configuration file a bit to make things run smoother down the line. 🙂

 

 

Liked it? Take a second to support Thomas on Patreon!

Previous Article

Next Article

3 Replies to “Part 2. Framework Setup (WDIO TestRunner)”

  1. When installing the cucumber framework adapter, I receive an error “make failed with exit code 2”, “node-gyp” failed with exit code 2″
    “please make sure you are using a supported platform and node version. If you would like to compile fibers on this machine please make sure you have setup your build environment” and it gives me a github article to look at.

    I followed the instructions at the github article (github.com/nodejs/node-gyp) and when I try to rebuild gyp, it gives me an error
    “No rule to make target ‘Release/obj.target/binding/src/binding.o’, needed by ‘Release/binding.node’. Stop”

    When I search for this on sites like stack overflow, google, and others, it ends up being a rabbit hole of people yelling at other people and blame gaming each other. Seems to be a common issue that nobody’s sure how to solve.

    Do you have any insight on this?

    1. Hi Paul,

      Sorry for the delay in a reply. Unfortunately I don’t have much insight in to this but if I had to make an educated guess I would say check the version numbers of your wdio packages in the package.json, and maybe try deleting the package.json and regenerating with npm install.

      Cheers,
      -Tom

  2. Hi Tom,
    This is how the Configuration Helper is asking the questions now so I thought that maybe you can edit this article to be up to date ? I’m unsure if it’s correct or not but I took a shoot based on what you have already selected

    ? 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? Babel (https://babeljs.io/)
    ? Where are your feature files located? ./features/**/*.feature
    ? Where are your step definitions located? ./features/step-definitions/steps.js
    ? Do you want WebdriverIO to autogenerate some test files? Yes
    ? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? No
    ? Which reporter do you want to use? spec, cucumber
    ? Do you want to add a service to your test setup? selenium-standalone
    ? What is the base url? https://start.duckduckgo.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.