Architecture of WebdriverIO

Selenium Standalone can be referred to as the middle-layer 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 are going to be built upon the NodeJS layer.

We are going to use different libraries such as mocha and webdriverio 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 Json wire protocol to communicate with the 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 serves 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-Requisites 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 the 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 the installation is complete, open cmd and type node, if cmd doesn't throw any error then NodeJS got installed successfully.
nodejs-successful-installtion-webdriverio

5. if you want only a specific 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 the 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

Installing WebdriverIO

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

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

npm i webdriverio
or
npm install webdriverio

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

npm i [email protected]
or
npm install [email protected]

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

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

Install Mocha

Now we need to install the mocha framework, Mocha is a JavaScript test framework similar to the 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 the below messages seleniumstandalone-server-webdriverio

Now we have installed the selenium-standalone package but we have not installed it dependences like jar files and zip files.

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

.\node_modules\.bin\selenium-standalone

You tend to see a "No actions provided" message if nothing installed from the selenium-standalone server selenium-standalone-install-webdriverio

You can install them using the below command.

.\node_modules\.bin\selenium-standalone install

selenium-standalone-installation-successful

install wdio & cli

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

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

Do not change the installation order for the below two
npm install wdio
npm install @wdio/cli

@wdio/cli is required to create a file called wdio & wdio.cmd inside the bin folder of Node Modules wdio-cli-webdriverio

If the 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

Code for all Installations

npm install [email protected]
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 the below command to start the setup of the runner file in your system.

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

Enter the 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 a different CMD/Terminal for running the below command but before that navigate to the same folder as the 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 ourselves for this moment, now lets run the code. You can download my wdio.conf file, it is in the format 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 the 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 the below output. webdriverio-run-successful

Errors I faced during installation

S 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 likenode test_spec.js, you need to run fromwdio.conf.jsfile 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 the above problem, please create a package.json file using npm init command or run the command prompt or terminal in Admin mode

npm ERR! notsup Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

The above error message is a warning, it occurs because 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 }
0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • sunil
    PS C:UsersSunil K PDesktopautomation> .
    ode_modules.binwdio config
    .
    ode_modules.binwdio : File C:UsersSunil K PDesktopautomation
    ode_modules.binwdio.ps1 cannot be loaded because running scripts is 
    disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
    At line:1 char:1
    + .
    ode_modules.binwdio config
    + ~~~~~~~~~~~~~~~~~~~~~~~~
        + CategoryInfo          : SecurityError: (:) [], PSSecurityException
        + FullyQualifiedErrorId : UnauthorizedAccess
    Reply
  • Evens Augustin
    Hello , need help.
    trying to execut the test exemple i found this error 
    [0-0] FAILED in chrome - C:UsersAdministratorDocumentswebdriverIOProjectspecs	est_spec.js
    Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:04
    can you helpe me resolve it .
    why occur it ?
    Reply
  • Pallavi Sharma
    Installation of desired jars is done but while setting up Config file getting below error. Please help
    Error: something went wrong during setup: null
        at runConfig (D:workspace_webdriverIO
    [email protected]uildcommandsconfig.js:79:11)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
    
    
    Reply