- WebdriverIO Tutorial
- WebdriverIO - Home
- WebdriverIO - Introduction
- WebdriverIO - Prerequisite
- WebdriverIO - Architecture
- WebdriverIO - Getting Started with NodeJS
- WebdriverIO - Installation of NPM
- WebdriverIO - VS Code Installation
- WebdriverIO - Package.json
- WebdriverIO - Mocha Installation
- Selenium Standalone Server Installation
- WebdriverIO - Configuration File generation
- WebdriverIO - VS Code Intellisense
- WebdriverIO - Wdio.conf.js file
- WebdriverIO - Xpath Locator
- WebdriverIO - CSS Locator
- WebdriverIO - Link Text Locator
- WebdriverIO - ID Locator
- WebdriverIO - Tag Name Locator
- WebdriverIO - Class Name Locator
- WebdriverIO - Name Locator
- Expect Statement for Assertions
- WebdriverIO - Happy Path Flow
- WebdriverIO - General Browser Commands
- WebdriverIO - Handling Browser Size
- WebdriverIO - Browser Navigation Commands
- Handling Checkboxes & Dropdowns
- WebdriverIO - Mouse Operations
- Handling Child Windows/Pop ups
- WebdriverIO - Hidden Elements
- WebdriverIO - Frames
- WebdriverIO - Drag & Drop
- WebdriverIO - Double Click
- WebdriverIO - Cookies
- WebdriverIO - Handling Radio Buttons
- Chai Assertions on webelements
- WebdriverIO - Multiple Windows/Tabs
- WebdriverIO - Scrolling Operations
- WebdriverIO - Alerts
- WebdriverIO - Debugging Code
- WebdriverIO - Capturing Screenshots
- WebdriverIO - JavaScript Executor
- WebdriverIO - Waits
- WebdriverIO - Running Tests in Parallel
- WebdriverIO - Data Driven Testing
- Running Tests from command-line parameters
- Execute Tests with Mocha Options
- Generate HTML reports from Allure
- WebdriverIO Useful Resources
- WebdriverIO - Quick Guide
- WebdriverIO - Useful Resources
- WebdriverIO - Discussion
Handling Checkboxes and Dropdowns
We can handle checkboxes in the UI while automating a test using WebdriverIO. The checkboxes are identified in the html code with the tagname as input and type as checkbox.
The following screen will appear on your computer −
Methods to work with Checkboxes
Some methods to work with checkboxes are as follows −
click()
It is used to check a checkbox.
Syntax
The syntax is as follows −
let p = $('#loc') p.click()
isSelected()
It is used to check if an element of type checkbox is selected or not. It returns a Boolean value (true if checked, false if not).
The syntax is as follows −
let p = $('#loc') p.isSelected()
To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −
Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.
Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.
Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.
Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.
Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.
Step 6 − Add the below code within the Mocha spec file created.
// test suite name describe('Tutorialspoint application', function(){ //test case it('Checkbox', function(){ // launch url browser.url('https://the-internet.herokuapp.com/checkboxes') //identify checkbox with CSS then click const p = $("input[type='checkbox']") p.click() //verify if checked with assertion expect(p).toBeSelected() //uncheck checkbox p.click() //verify if not checked with assertion expect(p).not.toBeSelected() }); });
Run the Configuration file - wdio.conf.js file with the following command −
npx wdio run wdio.conf.js
The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.
The following screen will appear on your computer −
After the command has been executed successfully, all the Assertions are executed as per expectation and we have received a passed test.
Handling Dropdowns
We can handle drop downs in the UI while automating a test using WebdriverIO. The static drop downs are identified in the html code with the tagname as select and its options have the tagname as option.
The following screen will appear on your computer −
Methods for Static Dropdowns
Some methods to work with static dropdowns are as follows −
selectByVisibleText
This method is used to select an option which matches with the visible text of an option passed as a parameter to this method.
The syntax is as follows −
let p = $('#loc') p.selectByVisibleText('By Subject')
selectByAttribute
This method is used to select an option which matches with the value of any attribute passed as a parameter to this method.
The syntax is as follows −
let p = $('#loc') p.selectByAttribute('value', 'subject')
Here, the option has the attribute with value as subject.
selectByIndex
This method is used to select an option which matches with the index/position of an option passed as a parameter to this method. The index starts with 0.
The syntax is as follows −
let p = $('#loc') p.selectByIndex(1)
getValue()
This method is used to get the attribute value of an option selected in the dropdown.
The syntax is as follows −
let p = $('#loc') p.getValue()
To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −
Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.
Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.
Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.
Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.
Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.
Step 6 − Add the below code within the Mocha spec file created.
// test suite name describe('Tutorialspoint application', function(){ //test case it('Drodowns', function(){ // launch url browser.url('https://www.tutorialspoint.com/tutor_connect/index.php') //identify dropdown const p = $("select[name='selType']") //select by index p.selectByIndex(1) //get option selected console.log(p.getValue() + ' - option selected by index') //select by visible text p.selectByVisibleText('By Subject') //get option selected console.log(p.getValue() + ' - option selected by visible text') //select by value attribute p.selectByAttribute('value', 'name') //get option selected console.log(p.getValue() + ' - option selected by attribute value') }); });
Run the Configuration file - wdio.conf.js file with the following command −
npx wdio run wdio.conf.js
The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.
The following screen will appear on your computer −
After the command has been executed successfully, first the value of the option selected with the option index - name is printed in the console.
Then, the value of the option selected with the option visible text - subject is printed in the console.
Finally, the value of the option selected with the option attribute value - name is printed in the console.