| 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() |