![Puppeteer Tutorial](/puppeteer/images/puppeteer-mini-logo.jpg)
- 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.
![Command has been Successfully](/puppeteer/images/command_has_been_successfully.png)
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.
![Node Modules](/puppeteer/images/node_modules.jpg)
Step 2 − Enter a filename, say testcase1.js.
![Testcase1.JS](/puppeteer/images/testcase1_js.jpg)
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
![Terminal Command](/puppeteer/images/terminal_command.jpg)
After the command has been executed successfully, the value of the option selected in the dropdown - subject is printed in the console.
To Continue Learning Please Login