August 8, 2020

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: 
First up: Installing WebdriverIO!

What is WebdriverIO? 


"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


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:
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

  • 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


  • 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 | YouTubeLinkedIn | Articles

8 comments:

tejaswini said...

Its most perceptibly horrendous piece was that the item just worked spasmodically and the data was not exact. You unmistakably canot confront anyone about what you have found if the information isn't right.
https://360digitmg.com/course/project-management-professional-pmp

360digitmgdelhi said...

What an extremely wonderful post this is. Genuinely, perhaps the best post I've at any point seen to find in as long as I can remember. Goodness, simply keep it up.
artificial intelligence course in delhi








360digitmgdelhi said...

What an extremely wonderful post this is. Genuinely, perhaps the best post I've at any point seen to find in as long as I can remember. Goodness, simply keep it up.
artificial intelligence course in delhi








Anonymous said...

Hello,
You can try using https://www.robodog.in

It is completely free now and is very easy to test any site with just s few steps.
No coding is required, just need to know how to get xpath.
Thanks.

360DigiTMG said...

Your astounding wise data involves a lot to me and particularly to my friends. Much obliged a ton; from us all.
hrdf training course

AI Courses said...


incredible article!! sharing these kind of articles is the decent one and I trust you will share an article on information science.By giving an organization like 360DigiTMG.it is one the best foundation for doing guaranteed courses
AI Courses

dataanalyticscourse said...

Here at this site actually the particular material assortment with the goal that everyone can appreciate a great deal.
big data course malaysia

hrdf claimable courses said...

I looked at some very important and to maintain the length of the strength you are looking for on your website
"
hrdf claimable courses"