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

29 comments:

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.

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

arshiya fouzia said...

Nice Post,This is very nice information, Thank you for sharing.
software testing course in chennai

vivikhapnoi said...

It's really amazing to have many lists of will help to make thanks a lot for sharing

đặt vé máy bay đi trung quốc

vé máy bay đi thượng hải giá rẻ

đặt vé máy bay đi quảng châu trung quốc

vé máy bay đi đài loan giá bao nhiêu

vé máy bay tphcm đi taipei

varsha said...

really true info u have shared with your audience and I am really loving it dear.

top exercise for home

top treadmill to have in home

dataanalyticscourse said...

Thank you for the update it was a sobering report.
https://360digitmg.com/hrdf-training

Aditi said...

Thanks for sharing this

janvi said...

Amazing Article, Thankyou so much

Gaming Chair India said...

I’m really impressed with your writing skills as well as with the layout on your blog.
Is this a paid theme or did you customize it yourself?
Anyway keep up the excellent quality writing, it’s
rare to see a great blog like this one nowadays.

best gaming chair in India
best gaming chair Under 5000
best gaming chair Under 10000
best gaming chair Under 15000

lakshmanan a said...

Superb blog post! And this blog clearly explain about for useful information. I would Thanks for sharing this wonderful content. Its very useful to us. Keep it up!
core php interview questions
advanced php interview questions
php developer interview questions
php technical interview questions
php interview questions and answers for experienced

Monisha said...

Wonderful Blog, thanks for sharing this blog with us, waiting for your next update.
Big Data Training in Chennai
Big Data Training Online
Why Data Science is Important?

Mia said...

I didn’t have any expectations concerning that title, but the more I was astonished. The author did a great job. I spent a few minutes reading and checking the facts. Everything is very clear and understandable. I like posts that fill in your knowledge gaps. This one is of the sort.

vishesh paliwal said...

Thanks for sharing the information..
DevOps Training

kriti said...

Nice Article. Very informative.
Training for devops

varsha said...

sharing information is very important in todays era and there are only few websites sharing good info like this one.


kitchen chimney india


top dishwasher india

Vidhyamenon said...


Nice blog, it is very impressive.

Protocol Testing Course Online
Protocol Testing course in Bangalore

Prime Bit said...
This comment has been removed by the author.
Vidhyamenon said...

Nice blog, it is very impressive.

Protocol Testing Course Online
Protocol Testing course in Bangalore

Anonymous said...

Useful blog, keep sharing with us.
Devops Training Institute in KPHB

phil123321 said...

This is usefuk blog. So convenient that you can have a good time without leaving home. Come to the casinoschileonline and rest from all worries

Portfolio photographers in india said...

very useful.. portfolio photographers in india

Greece Assignment help said...

Great blog
Are you feeling overwhelmed by the sheer complexity of your programming assignments? You need not worry anymore, as GreeceAssignmentHelp.com is here to provide you with expert programming assignment help in Greece. Our team of seasoned programmers can deliver exceptional quality work that meets your requirements and ensures academic success.

Classy Artz said...

"At ClassyArtz.com, we specialize in varmala preservation resin with our expert techniques. Our skilled artisans carefully seal your varmala in a durable and transparent resin, creating a mesmerizing display that encapsulates the joy and romance of your wedding day."

sahanisha0105 said...

Elevate the significance of your Varmala by preserving it in resin. Our expert in Varmala Preservation Service encapsulates the garland in high-quality resin, protecting its color and form for years to come. This thoughtful gesture allows you to revisit the memories of your special day and cherish the moments that brought you together.

Mark Antony said...

Exploring WebdriverIO's journey with insightful guides is a fantastic way to grasp automation. Your step-by-step installation guide simplifies the process for both beginners and experienced users. Great job! Conversión Divorcio Nueva York Estado

Resin Arts Jaipur said...

"Experience the beauty of Resin Arts Jaipur with our handcrafted collection by Kavita Dadheech. Our resin art store near you offers a wide range of unique and elegant Handmade Resin Items, perfect for enhancing any space. Visit us for exclusive resin art products in Jaipur."