Join us on :

Architecture of WebdriverIO

Selenium Standalone can be referred to as the middlelayer between our automation framework and the browsers where we'll be executing our tests.

connection-of-webdriverio-working So take a look at the above image. The foundations of our Automation Framework is going to be built upon NodeJS layer.

We are going to use different libraries such as mocha and webdriver to also construct our framework. And finally we get a create javascript files which will be our test cases.

Now in our tests uses a Jason wire protocol to communicate with selenium standalone server. We would be writing Our tests using WebdriverIO but it will reach Selenium Standalone server as JSON wire protocol.

So as you can see from the following example selenium standalone serve as the middleman between our automation framework and our browsers.

So selenium standalone server passes on our test messages to the relevant browser which will run our tests against the application under test.

Pre-Requsites for WebdriverIO

VS Code :


1. Install VSCode, VSCode is nothing but another version of Visual Studio but available for free.

2. Navigate to https://code.visualstudio.com/

3. Click download button

4. Download the VSCode software according to your operating system.

VSCode-download-webdriverio

5. Install the VScode like any other exe file, go along with the recommended setting only.

6. Launch the VSCode, and UI will look like below. VSCode-ui-webdriverio

Install NodeJs

We would be using end language as Javascript, so we must install NodeJs for using supporting functions and supporting packages.

1. Navigate to : https://nodejs.org/en/download/

2. Download the package according to your operating system. install-nodeja-webdriverio 3. Install the downloaded NodeJs file.

4. Once installation is complete, open cmd and type node, if cmd doesnot throw any error then NodeJS got installed successfully.

nodejs-successful-installtion-webdriverio

5. if you want only a a secific version of NodeJS, then try to download it from : https://nodejs.org/dist/ old-versions-of-nodejs-webdriverio

Prepare for Installing WebdriverIO

Before proceeding to install the webdriverIO, you can create a folder/workspace for the project. This is nothing but creating a new folder for the project.

For my example, I have created a folder called webdriverioProject in D: driver create-new-folder-webdriverio

Now Open the same folder using the Open Folder option present in the VSCode under File Menu. [Yea, you can create the folder using the VS code itself instead of first step] vscode-folder-vscode-webdriverio

Now Open the Terminal, Terminal > New Terminal. we need the terminal to install the packages from the NPM repository open-terminal-vscode-webdriverio

NPM Repository is like Maven Repository (for java) but the only difference is NPM repository is for JavaScript and related technologies.

Video Tutorial for WebdriverIO Installation

Subscribe to my youtube channel :


Installing WebdriverIO

On the VSCode Terminal, you can type the following command to install the WebdriverIO, You can get the following comand by searching the package in the NPM repository : https://www.npmjs.com/

install-webdriverio-package

Copy the command from the webdriverIO page and paste into the Terminal of VSCode.


									npm i webdriverio
									or
									npm install webdriverio
									

You can install a specific version by provide the version number after the @ sign, for latest version you donot have to specify the version.


									npm i webdriverio@version
									or
									npm install webdriverio@version
									

You will see below messages if the installation is successful. installtion-successful-webdriverio

You can verify whether installation is successful or not by navigation to node_modules folder under the project folder. if webdriverio is present then installtion is successful. verify-installation-of-webdriverio

Install Mocha

Now we need to install mocha framework, Mocha is a JavaScript test framework similar to Jasmine framework running on Node.js

We have a dedicated chapter for the Mocha framework


									npm install mocha
									or
									npm i mocha
									

mocha-installation

Install selenium Standalone server

We need to install the selenium standalone server to communicate with the browser.


									npm install selenium-standalone
									or
									npm i selenium-standalone
									

Post installation you should see below messages seleniumstandalone-server-webdriverio Now we have installed the selenium-standalone package but we have not installed it dependences like jar fiels and zip files.

To check whether all those got installed or not just type below command.


									.\node_modules\.bin\selenium-standalone
									

You tend to see "No actions provided" message if nothing installed from the selenium-standalone server selenium-standalone-install-webdriverio You can install them using below command.


									.\node_modules\.bin\selenium-standalone install
									

selenium-standalone-installation-successful

intsall wdio & cli

So far we have inatalled the softwares that we need to download for using the webdriverIO, Now we have to download the softwares required for running the webdriverIO.

We need wdio packages to create and config file and and run the webdriverIO, to install wdiopackage follow below commands.

Donot change the installation order for below two

									npm install wdio
									npm install @wdio/cli
									
									

@wdio/cli is required to cerate a files called wdio & wdio.cmd inside bin folder of Node Modules wdio-cli-webdriverio If above installation is successful then you should be able to see, wdio, wdio.cmd files under .\node_modules\.bin\ folder wdio-files-in-bin-webdriverio

All Installations


									npm install webdriverio@latest
									npm install mocha
									npm install selenium-standalone
									.\node_modules\.bin\selenium-standalone install
									npm install wdio
									npm install @wdio/cli
									.\node_modules\.bin\wdio config
									

Set up the WDIO runner file

Run below command to start the setup of the runner file in your system.


									.\node_modules\.bin\wdio config
									
wdio-conf-file-creation

Enter following details on the screen


Q: Where should your tests be launched?
A: local

Q: Shall I install the runner plugin for you?
A: Yes

Q: Where is your automation backend located?
A: On my local machine

Q: Which framework do you want to use?
A: mocha

Q: Shall I install the framework adapter for you?
A: Yes (just press enter)

Q: Do you want to run WebdriverIO commands synchronous or asynchronous?
A: sync (just press enter, you can also run commands async and handle promises by yourself but for the sake of simplicity let's run them synchronously)

Q: Where are your test specs located?
A: ./test/specs/*/.js (just press enter)

Q: Which reporter do you want to use?
A: dot (just press space and enter)

Q: Shall I install the reporter library for you?
A: Yes (just press enter)

Q: Do you want to add a service to your test setup?
A: none (just press enter, let's skip this for simplicity)

Q: Level of logging verbosity:
A: trace

Q: What is the base url?
A: http://localhost (just press enter)

wdio.conf.js

That's it! The configurator now installs all required packages for you and creates a config file with the name wdio.conf.js.

As we're using Geckodriver, we need to override the default path (which uses the Selenium's default of /wd/hub). Then, we'll be ready to create your first spec file (test file). path-of-wd-hub Also change the max-instances and browser name like below. browser-instance-max-webdriverio

Now we have to start the selenium standalone server to run our code, So use different CMD/Terminal for running below command but before that navigate to same folder as previous one.


.\node_modules\.bin\selenium-standalone start							
start-selenium-standalone-server-webdriverio

Sample spec file & wdio.conf.js with WebdriverIO

So far we have been preparing ourshelves for this moment, now lets run the code. You can download my wdio.conf file, it is in the format of of .txt you need to change it to .js

Now create a test file aka spec file in VSCode called test_spec.js and copy the below content, create this file as same directory as wdio.conf.js


									describe('Cherchertech Home Page', () => {
										it('Get title of cherchertech Home page', () => {
											browser.url('https://chercher.tech/')
											const title = browser.getTitle()
											console.log('Title is: ' + title)
										})
									})
									

Now go to your command prompt and run below command to start our test. Please understand this is to check only whether we have correctly set things up. So I have not provided any explanation for tests and conf file.


									./node_modules/.bin/wdio wdio.conf.js
									

After few moments, you will see below output. webdriverio-run-successful

Errors


PS D:\webdriverioProject> node .\test_spec.js
2019-01-23T18:27:57.769Z DEBUG wdio-config: @wdio/sync not found, running tests asynchronous
D:\webdriverioProject\node_modules\@wdio\config\build\utils.js:158
throw new Error(`Required option "${name}" is missing`);

Error: Required option "capabilities" is missing
What I understand is you cannot run just using node like node test_spec.js, you need to run from wdio.conf.js file for running tests


./node_modules/.bin/wdio : The term './node_modules/.bin/wdio' is not recognized as the name of a cmdlet,
function, script file, or operable program. Check the spelling of the name, or if a path was included, verify
that the path is correct and try again.

Solve the above issue by installing, npm install wdio, npm install @wdio/cli


npm ERR! Error: EPERM: operation not permitted, rename 
'D:\webdriverioProject\node_modules\lru-cache\package.json.4280138971' -> 
'D:\webdriverioProject\node_modules\lru-cache\package.json'

To solve above problem, please create a package.json file using npm init command or run he command Prompt or terminal in Admin mode


npm ERR! notsup Unsupported platform for fsevents@1.2.7: 
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Above error message is warning, it occurs beacuse I am using windows OS


2019-01-24T04:32:46.738Z ERROR webdriver: Request failed due to Error: connect ECONNREFUSED 0.0.0.0:4444
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1113:14)
{ Error: connect ECONNREFUSED 0.0.0.0:4444
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1113:14)
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '0.0.0.0',
  port: 4444 }

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions