Exploring WebdriverIO - Installation

Over the past five years, I've constructed many automation test frameworks, both tinkering here at home and creating ones on-the-job. 

For this next series of blog entries, I will be exploring Webdriver IO Version 6, which uses JavaScript, Node Js, and the Node Package Manager (NPM). The only problem? I last used this particular toolset back when I was working on a Nightwatch JS project four years ago. So, here it goes! 

The WebdriverIO robot

Related Links: 

• Official Site: https://webdriver.io/
• Github site: https://github.com/webdriverio/
• TestAutomation University course,  UI Automation with WebdriverIO by Julia Pottinger
• YouTube: Learn WebDriverIO by Kevin Lamping

First up: Installing WebdriverIO!

What is WebdriverIO? 

Taken from Selenium and WebdriverIO — A Historical Overview by Germain Boue.

"WebdriverIO is an independent implementation of the JSON Wire Protocol by Christian Bromann. It is a test framework for Node.js. It wraps its lower level requests into useful commands, with a concise syntax [...] 

• "WebdriverIO is fully built using Javascript. This means that if you are comfortable with JS you can immediately start writing automation using their documentation. It also means, that it is front end friendly by nature. Your team members do not need to learn a new language and it can easily be adopted
• "It’s syntax is simple. You essentially grab an element via selectors and call a method on it. It is compatible with most assertion libraries and testing framework such as mocha or jasmine
• "The Page Object pattern is a convention that is easily put in place with webdriverIO (https://webdriver.io/docs/pageobjects.html) By placing all the getters and functions in a Page Object, you can import within spec and keep your code readable. This means your specs serve as documentation for non-technical individuals. As well, if a it block fails, by using best coding practices your web devs can debug faster
• "It also comes with a test runner and the configuration utility helps you create a config file in a matter of seconds. It contains plenty of comments, and you can start customizing your project within a matter of minutes".

How To Install WebdriverIO

Getting Started: https://webdriver.io/docs/gettingstarted.html 

For this project, I will be installing on my Windows 10 machine at home. For the Mac and Linux machines, the instructions are slightly different.

Taking the First Step: According to the instructions on the Getting Started page on Webdriver.io, you will need to:

• Download and Install Node JS: https://nodejs.org/ ... the site will detect if you are using a Windows or Mac. 
• Using a Windows machine? Make sure to add C:\Program Files\nodejs\ (or wherever you installed Node JS) to the Path of your environment variables so you can execute NPM commands on your MS Command Prompt.  
• Installing NPM on Windows, you can also follow instructions on https://github.com/nodejs/node-gyp#on-windows to install Microsoft's Windows Build Tools which also installs Python 2.7.
• Did NPM install? Check the version of NPM you have: npm -v

Set Up Your Project: According to the Getting Started page:

• Initialize a new NPM (Node Package Manager) project: Create a new directory and type: npm init -y
• Install the WebdriverIO Command Line Interface (CLI) Tool in order to install their TestRunner in the WDIO CLI npm package which will also install the Jake JavaScript build tool https://jakejs.com/: npm i --save-dev @wdio/cli
• Generate a Configuration File to store settings in wdio.conf.js: npx wdio config -y

 =========================  
 WDIO Configuration Helper  
 =========================  
 Installing wdio packages:  
 - @wdio/local-runner  
 - @wdio/mocha-framework  
 - @wdio/spec-reporter  
 - wdio-chromedriver-service  
 - @wdio/sync  
 - chromedriver  
 Configuration file was created successfully!  
 To run your tests, execute:  
 $ npx wdio run wdio.conf.js  

How To Create Tests

Creating Spec Files:

• For Windows, create a test folder: mkdir .\test\specs
• Change into the test directory just created: cd .\test\specs
• On Windows, you can use Notepad to create a new text file called basic.js: notepad basic.js
• Copy and paste the following test file into basic.js and save the file. 

 describe('webdriver.io page', () => {  
   it('should have the right title', () => {  
     browser.url('https://webdriver.io')  
     expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');  
   })  
 })  

Running The Tests

Start the Testrunner:

• To run the tests, go back to the main directory you created and run: npx wdio wdio.conf.js

... And after all of that we have errors. 

 @wdio/runner: Error: Cannot find module '..pageobjects/login.page'  
   
 "spec" Reporter:  
 ------------------------------------------------------------------  
 [chrome 84.0.4147.105 windows #0-0] Spec: C:\Users\tmaher\webdriverio-test\test\specs\basic.js  
 [chrome 84.0.4147.105 windows #0-0] Running: chrome (v84.0.4147.105) on windows  
 [chrome 84.0.4147.105 windows #0-0] Session ID: 5cdc4739eb005508359487d0cc92863a  
 [chrome 84.0.4147.105 windows #0-0]  
 [chrome 84.0.4147.105 windows #0-0] webdriver.io page  
 [chrome 84.0.4147.105 windows #0-0]  ✓ should have the right title  
 [chrome 84.0.4147.105 windows #0-0]  
 [chrome 84.0.4147.105 windows #0-0] 1 passing (2.8s)  
   
   
 Spec Files:   1 passed, 1 failed, 2 total (100% completed) in 00:00:12  
   

Digging into the project, it looks like the above test ran perfectly. 

• A browser opened up.
• The browser navigated to http://webdriver.io
• The expectation to have the title "WebdriverIO · Next-gen browser and mobile automation test framework for Node.js" was met.

The problem is that yet another sample project was also installed... one performing a few tests on my favorite test sites, Dave Haeffner's Login page on The Internet: https://the-internet.herokuapp.com/login  .

Diving into the code, I am wondering if someone designed their tests for The Internet on a Mac, and since I am running them on Windows 10, they didn't check if the code could be run on both a Mac and PC, detecting the proper folder structure. 

What's Next?

Coming up in the next couple of weeks we will:

• Examine the code in the basic.js test. 
• Review the code in the example.e2e test. 

Happy Testing!

-T.J. Maher
Sr. QA Engineer, Software Engineer in Test
Meetup Organizer, Ministry of Testing - Boston

Twitter | YouTube | LinkedIn | Articles