Introduction

In this article, we will look at the table which contains all the WebriverIO Functions and commands.

This table will be helpful for anyone who wants to learn WebdriverIO Tool. I have gathered the concepts which the test automation engineer will face commonly in any web application.

Concepts WebDriverIO Functions
Open browser await browser.url(“<url of the application>");
Get Title await browser.getTitle();
Get URL await browser.getUrl();
Maximize Window await browser.maximizeWindow();
Minimize Window await browser.minimizeWindow();
Navigate To the awa browser.navigateTo(“<url of the application>”)
Navigate Back await browser.back();
Navigate Forward await browser.forward();
Refresh Browser await browser.refresh();
Get Window Size await browser.getWindowSize();
Set Window Size await browser.setWindowSize(440,550);
Click await $('test').click();
Doubleclick await $('test').doubleClick();
Type into text field

let text=await $('test');
text.addValue('test');

//setvalue clear the existing value in the text field and input the text which you provide

let text=await $('test');
text.setValue('test');
Mousehover $('test').moveTo()
Press the Keyboard key

await browser.keys('Enter');

//use the ASCII code for keyboard keys

Eg:

browser.keys('/UE07');
Drag and Drop await $('source web element reference').dragandDrop('destination web element reference)
Handling dropdown selection let dd=await $('.select');
dd.selectByIndex(2)
await dd.selectByVisibleText('test')
await dd.selectByAttribute('value','test')
check element displayed let val=$('#testid').isDisplayed() console.log(val);
check element enabled let val=$('#testid').isEnabled() console.log(val);
check element exists let val=$('#testid').isExisting() console.log(val);
gettext from element const element = await $('#testid'); console.log(await element.getText());
getattribute of element const input = $('#inputid') const attr = input.getAttribute('placeholder') console.log(attr);
get css property of element const fontfamily = $('#test).getCSSProperty('font-family').valueof(); console.log(fontfamily)
Handling alerts await browser.acceptAlert();
await browser.dismissAlert();
const text=await browser.getAlertText();
//printing the text in the console.
console.log(text);
await browser.sendAlertText("This is Input Text");
Handling Windows

const winone= await browser.getWindowHandle();
const win= await browser.getWindowHandles();

//switching to child window
await browser.switchToWindow(win[1]);
//switching to parent window
await browser.switchToWindow(win[0]);
await browser.switchToWindow(winone);
Handling Frames await browser.switchToFrame('courses-iframe');
//switch to default content
await browser.switchToFrame(null);
Taking Screenshots await browser.takeScreenshot('test.png')
videos

Not applicable for web automation testing, but video recording supported for mobile testing

//Use the startrecordingscreen function to start recording

await browser.startRecordingScreen();
await $('~BUTTON').click();

//use saveRecordingScreen function to save recordings in particular filepath
await browser.saveRecordingScreen('./some/path/video.mp4');
parallel run will always run in parallel mode
cli command npx wdio run wdio.conf.js --help. Provide all cli flags that we can use and run
autocompletion Add a jsconfig.json file in your root of your project folder and paste the below contents
{
"compilerOptions": {
"types": [
"node",
"webdriverio/async",
"@wdio/mocha-framework"
]
}
}
cross-browser testing install Selenium standalone service and provide the browser capabilities
Report use any one of 8 reports(spec, line, dot, etc) to support third-party reports like allure reports and teamcity reports. Install the necessary library and configure the reporter in the report arry in the wdio.conf.js
selectors accepts all 8 locatos(id,name,tagname,css selector, xpath,classname,linktext,partiallink text)
upload file

const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');
fileUpload.setValue(filePath)
if type='file' attribute is hidden, then change the style to display block and then upload the file
browser.execute(function () {
document.getElementById('div_file_box0').style.display = 'block';
});

//Wait for div to be displayed
inputDiv.waitForDisplayed();

//Set file path value in the input field
input.setValue(remoteFilePath);
submitBtn.click();
Handling waits waitForDisplayed
waitForEnabled
waitForExist()
waitUntil
Test Framework supported mocha,jasmine, cucumber

Hooks

after, before,aftereach, beforeeach

oncomplete,onfinish,onstart, which are provided by webdriverio framework itself
Scrolling

await $(“#test”).scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
The behavior can be auto-smooth.

inline: Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest

Block: Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.
We can scroll using a block
Scrolling be horizontal and vertical scroll position axis
await browser.scroll(0, 200)
clear value //to clear the value in the text field
$('#testid).clearValue()


Summary

Hope this article is helpful in understanding all the concepts and functions of webdriverI.This article will also act as a cheat sheet where all the commands/functions are available in one table.

Happy Learning................

Thank you