- Puppeteer Tutorial
- Puppeteer - Home
- Puppeteer - Introduction
- Puppeteer - Element Handling
- Puppeteer - Usage of Google
- Puppeteer - NodeJS Installation
- Puppeteer VS Code Configuration
- Puppeteer - Installation
- Puppeteer - Basic Test
- Puppeteer - Non Headless Execution
- Comparison Between Puppeteer & Selenium
- Comparison Between Puppeteer & Protractor
- Comparison Between Puppeteer & Cypress
- Puppeteer - Browser Operations
- Puppeteer - Handling Tabs
- Puppeteer - Basic Commands
- Puppeteer - Firefox
- Puppeteer - Chrome
- Puppeteer - Handling Confirm Alerts
- Puppeteer - Handling Drop-downs
- Puppeteer - Locators
- Puppeteer - Xpath Functions
- Puppeteer - Xpath Attributes
- Puppeteer - Xpath Grouping
- Puppeteer - Absolute Xpath
- Puppeteer - Relative Xpath
- Puppeteer - Xpath Axes
- Puppeteer - Type Selector
- Name Selector & Class Name Selector
- Puppeteer - Id Selector
- Puppeteer - Attribute Selector
- Puppeteer - Handling Links/Button
- Handling Edit Boxes & Checkboxes
- Puppeteer - Handling Frames
- Puppeteer - Keyboard Simulation
- Puppeteer - Getting Element Text
- Puppeteer - Getting Element Attribute
- Puppeteer - Device Emulation
- Puppeteer - Disable JavaScript
- Puppeteer - Synchronization
- Puppeteer - Capture Screenshot
- Puppeteer Useful Resources
- Puppeteer - Quick Guide
- Puppeteer - Useful Resources
- Puppeteer - Discussion
Puppeteer - Handling Drop-downs
We can handle drop downs in the UI while automating a test using Puppeteer. The static drop downs are identified in the html code with the tagname as select and its options have the tagname as option.
Methods to Handle Dropdown
Some methods to work with static dropdowns −
select()
This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method.
Syntax
The syntax is as follows −
const page = await browser.newPage() const f = await page.$('[name="selType"]') await f.select("subject")
We can also select multiple options from a multi-select dropdown.
Syntax
The syntax is as follows −
await f.select("subject", "name")
To obtain select value from the dropdown, we have to use the getProperty method and pass value as a parameter to this field.
const v = await (await n.getProperty("value")).jsonValue() console.log(v)
type()
This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method.
Syntax
The syntax is as follows −
const page = await browser.newPage() const f = await page.$('[name="selType"]') await f.type("subject")
To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −
Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).
The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.
Right-click on the folder where the node_modules folder is created, then click on the New file button.
Step 2 − Enter a filename, say testcase1.js.
Step 3 − Add the below code within the testcase1.js file created.
//Puppeteer library const pt= require('puppeteer') async function dropDownHandle(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto('https://www.tutorialspoint.com/tutor_connect/index.php') //identify dropdown then select an option by value const f = await page.$('[name="selType"]') await f.select("subject") //wait for sometime await page.waitForTimeout(4000) //get value selected const v = await (await f.getProperty("value")).jsonValue() console.log(v) } dropDownHandle()
Step 4 − Execute the code with the command given below −
node <filename>
So in our example, we shall run the following command −
node testcase1.j
After the command has been executed successfully, the value of the option selected in the dropdown - subject is printed in the console.