WebDriverIO Configuration File And Handling Various Test Automation Scenarios

The configurations we may set to execute our test/spec files with regard to those configurations are covered in this article.

We will also go over a few more WebDriverIO test automation scenarios.

As you are aware, the configurations for the tests are all contained in the wdio.conf.js file in WebDriverIO. It can also be referred to as a test/spec runner file.

Let’s examine each of those in more detail.

runner

We can run tests locally, through various services (browser stack, saucelabs, and selenium cloud), or online.

If you utilise a private or solitary Selenium server, please provide the settings listed below.

• portname
• host
• protocol

The login, apikey, region, and headless URL should be provided if you are utilising any third-party cloud services (such as BrowserStack and SauceLabs).

headless

headless: true/false

All spec/test files will run in headless mode if headless is true. While the tests are running inside the saucelabs/browserstack, the browser won’t open.

All spec/test files will run in headed mode if headless is set to false. The browser will open, and operations will be carried out inside of it.

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

Choose which spec or test file should be executed when we run the programme.

execute wdio.conf.js npx wdio

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

Any specific spec/test files that the user does not wish to run can have their paths specified in this exclude array object.

capabilities

With the help of capabilities, a user may tell the WebDriver what environment to utilise while performing tests. Users may run tests on their preferred hardware, browsers, and operating systems using a cloud/grid or external cloud suppliers (browserstack, saucelabs)

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

MaxInstances

What number of employees or instances are required to execute the tests?

loglevel

used to manage the console logs that are shown while the test is running.

For instance, when running tests, only error logs will be displayed in the console if the user has set the loglevel to error.

The loglevel values are,

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

outputdir

used to keep track of the test run logs. directory name is accepted as a value.

bail

If you want the tests to keep running until a certain number of them fail.

For instance, if a suite of tests contains 10 tests and the bail value is 3, the suite will not continue to execute if 3 out of the 10 tests are unsuccessful.

baseurl

Please provide the application URL that we will be testing.

Waitfortimeout

All waitfor commands in WebDriverIO have a default wait period.

framework

Which of the three test frameworks—Jasmine, Mocha, or Cucumber—will you employ to develop the tests?

specFileRetries:2

how many times a failed specification file should be executed again.

specFileRetriesDelay

Time in seconds between each attempt to retry using the spec file

reporters

Which reporting format you’re going to set up so you can see the test results.

Hooks

For the tests you are conducting, hooks serve as pre- and postconditions.

We may configure a lot of hooks in the configuration file. The most typical 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 scenarios for test automation

Screenshot

Using the savescreenshot function in WebDriverIO, we can take screenshots.

Usage

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

The screenshot picture is kept in the project’s relative path.

Handling windows

Using the getwindowhandle and getWindowhandles functions, we can manage windows in webdriverIO.

The function const parentwindowid=getwindowhandle->returns the window’s distinctive id

A list of windows’ individual IDs is returned by getWindowhandles.

We may use the method switchTowindow and supply the childwindowid as an argument to switch to a child window.

browser.switchToWindow(childwindowid);

Handing frames

The iframelocator methods listed below can be used to handle frames in webdriver IO.

• Using frame id
• using name
• using frame index

To conduct an action inside the frame, we must use switchToframe(iframelocator), and to go outside the frame, the following function must be used.

This will transfer the attention to the default window using switchToframe(null)

Addvalue

Enter text into the input box or textarea.

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

Clearvalue

removes the value from the input field or text area.

$('#testid).clearValue()

isDisplayed

Verify whether the web element is visible on the page. If the boolean value returned by the function is true, the element is present; if it is false, 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

Verify the selection of the checkbox, radio button, and dropdown options. The function returns a boolean value of true or false; if true, the element is selected; if false, it is not.

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

isExisting

Verify the webpage to see if the webelement is there. The function produces a boolean result of true or false; if true, the element is present; if false, it is absent.

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

getTagname

gives the web element’s tagname back.

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

getAttribute

gives the attribute value back. The function asks for the element’s attribute property as an argument and then returns the attribute value.

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

getCssproperty

returns the value of a CSS property. The function accepts the element’s CSS property as an argument and returns the value of the CSS attribute.

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

Summary

In this post, I’ve discussed additional automation situations that may be used when creating test automation scripts using WebDriverIO as well as the many parameters that can be defined in setups.