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

24 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"

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

360DigiTMG AI Course in malaysia said...

I truly like your style of blogging. I added it to my preferred's blog webpage list and will return soon…
360DigiTMG AI Course in malaysia

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

Trending Technologies said...

I finally found a great article here with valuable information and just added your blog to my bookmarking sites thank you.
Data Science Course in Bangalore

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

Jon Hendo said...

Thanks mate. I am really impressed with your writing talents and also with the layout on your weblog. Appreciate, Is this a paid subject matter or did you customize it yourself? Either way keep up the nice quality writing, it is rare to peer a nice weblog like this one nowadays. Thank you, check also event marketing and thank you for attending our webinar

coolbuddy said...

Nice to read this.This helps me a lot.ISO 9001 internal auditor training in india

sathishkumar said...

Thanks for sharing such nice info. I hope you will share more information like this. please keep on sharing!

Python Training In Bangalore | Python Online Training

Artificial Intelligence Training In Bangalore | Artificial Intelligence Online Training

Data Science Training In Bangalore | Data Science Online Training

Machine Learning Training In Bangalore | Machine Learning Online Training

AWS Training In Bangalore | AWS Online Training

IoT Training In Bangalore | IoT Online Training

Adobe Experience Manager (AEM) Training In Bangalore | Adobe Experience Manager (AEM) Online Training

Oracle Apex Training In Bangalore | Oracle Apex Online Training

Bharath said...

Thanks for the blog and it is really a very useful one.

TOGAF Training In Bangalore | TOGAF Online Training

Oracle Cloud Training In Bangalore | Oracle Cloud Online Training

Power BI Training In Bangalore | Power BI Online Training

Alteryx Training In Bangalore | Alteryx Online Training

API Training In Bangalore | API Online Training

Ruby on Rails Training In Bangalore | Ruby on Rails Online Training

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

Nikhil Sharma said...

I read your post. It is very informative and helpful to me. I admire the message valuable information you provided in your article.
online training

EddieBrock said...

Only required information’s., Great blog to check out.
Selenium Course in Chennai
Software Testing Course in Chennai

senthilpraveen said...

Such a nice blog with the reference links. Thanks for sharing with others.
Selenium Training Institute in Chennai
selenium online course
Best Selenium Training in Bangalore