Configuration File And Handling Different Test Automation Scenarios In WebDriverIO

In this article we can look at the configurations we can set in order to run our test/spec files with respect to those configurations.

We will also discuss a few additional Test automation scenarios in WebDriverIO.

As you know in WebDriverIO the wdio.conf.js contains all the configurations for the tests. We can call it a test/spec runner file as well.

Let's deep dive into each of those.

runner

Where the tests should be run we can run tests in local, different services(browser stack,saucelabs), and selenium cloud.

If you use a selenium standalone/private selenium server then provide the below configuration.

• portname
• host
• protocol

If you are using any third-party cloud services(browserstack and saucelabs), then provide the username, apikey, region and headless

headless

headless: true/false

If headless is true then all the spec/test files will run on headless mode. The browser will not open while the tests runs inside the saucelabs/browserstack.

If headless is false then all the spec/test files will run on headed mode. The browser will get opened and actions will be performed inside the browser.

specs:[
      'test/spec/**',
      ['group/spec/**']
  ],

Specify which spec/test file to run when we run the command.

npx wdio run wdio.conf.js

exclude: [
    'test/spec/multibrowser/**',
    'test/spec/mobile/**'
],

If the user does not want to run any particular spec/test files those files path can be mentioned in this exclude array object.

capabilities

Capabilities enables user to instruct the WebDriver regarding the environment to be used while running the tests. Users can execute tests on desired devices, browsers, and operating systems available on a Cloud/Grid or third-party cloud vendors(browserstack, saucelabs)

{
    browserName: 'Chrome',
    bstack: options ': {
    projectName: testbrowserstack
    osVersion: '10.0',
    deviceName: 'iphone 10',
    buildName: buildtesting,
    geoLocation: 'US',
    networkLogs: 'true',
}

MaxInstances

How many workers/Instances are needed to run the tests?

loglevel

Used to control the logs that are displayed in the console while the test run.

For example: if user sets loglevel:error then while running the tests only error logs will get displayed in the console.

The values for loglevel are,

• trace
• debug 
• info
• warn
• error
• silent

outputdir

Used to store the logs for the tests which run. Accepts directory name as value.

bail

If you want to run the tests until a specific number of tests fails.

Eg: you have 10 tests in a suite if bail value is 3, out of the 10 tests that runs if 3 tests fail out of 10 then the entire suite will stop running and displayed as failure

baseurl

Provide the application URL which we are going to test.

Waitfortimeout

Default wait time for all the waitfor commands in WebDriverIO.

framework

Which test framework you are going to use to write the tests - Mocha, jasmine or cucumber

specFileRetries:2

How many times a spec file should rerun when the spec file fails.

specFileRetriesDelay

Delay in seconds between the spec file retry attempts

reporters

Which type of reporting you are going to configure in order to view the tests results.

Hooks

Hooks are preconditions and postconditions for the tests which you are running.

There are many hooks we can configure in the config file. The most commonly used hooks are

• before() Runs once before all it blocks gets executed
• after(), Runs once after all it blocks gets executed
• beforeEach(), Runs each time before it block gets executed
• afterEach().Runs each time after it block gets executed

Additional Test automation scenarios

Screenshot

We can take screenshot in WebDriverIO using savescreenshot function.

Usage.

browser.saveScreenshot('path of the file.png');

It stores the screenshot image in the relative path of the project.

Handling windows

We can handle windows in webdriverIO using  getwindowhandle and getWindowhandles function

const parentwindowid=getwindowhandle->returns a unique id of the window

getWindowhandles-->retuns a list of unique id of windows.

To switch to child window we can make use of function switchTowindow and pass the childwindowid as an argument

browser.switchToWindow(childwindowid);

Handing frames

We can handle frames in webdriver IO using the below iframelocator methods

• Using frame id
• using name
• using frame index

We need to use switchToframe(iframelocator) performs the operation inside the frame and to move outside of the frame use the below function

switchToframe(null) -> which will move the focus to the default window

Addvalue

type text into textarea or input field

$('#testid').addValue('test)

Clearvalue

Clears the value from the textarea or input field

$('#testid).clearValue()

isDisplayed

Check whether the webelement is displayed or not on the webpage. The function returns boolean value true/false, if it is true then the element is present if false then the element is not displayed.

let val=$('#testid').isDisplayed()
console.log(val);

IsEnabled

Check whether the webelement is in enabled state or disabled state on the webpage. The function returns boolean value true/false, if it is true then the element is enabled if false then the element is disabled.

let val=$('#testid').isEnabled()
console.log(val);

Iselected

Check whether the checkbox/radio button, dropdown options are selected or not. The function returns boolean value true/false, if it is true then the element is selected if false then the element is not selected..

let val=$('#testid').isSelected()
console.log(val);

isExisting

Check whether the webelement exists in the webpage. The function returns boolean value true/false, if it is true then the element exists if false then the element does not exists.

let val=$('#testid').isExisting()
console.log(val);

getTagname

Returns the tagname for the webelement.

let tag=$("#test").getTagName()
console.log(tag)

getAttribute

Returns the attribute value. The function takes the attribute property of the element as an argument and return the attribute value.

const input = $('#inputid')
const attr = input.getAttribute('placeholder')
console.log(attr) 

getCssproperty

Returns the CSS property value. The function takes the CSS property of the element as an argument and return the CSS attribute value.

const fontfamily = $('#test).getCSSProperty('font-family')
console.log(fontfamily)

Summary

In this article, I have explained the different configurations that can be set in configurations and some additional automation scenarios which can be helpful while developing test automation scripts using WebDriverIO.

Thank you

Happy learning.......