Select a value Dropdown in Puppeteer
- Open the required page https://chercher.tech/practice/dropdowns
- Form the CSS selector for dropdown
- Use the page.select() function to select the value in dropdown
- Pass the dropdown option to be selected to the page.select() method.
select(selector: string, ...values: string[])- @param selector A selector to query page for.
- @param values Values of options to select.
Values means "value" attributes present in option, and it is not the text that dropdown shows
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
await page.select("select#first", "Apple")
await page.waitFor(30000)
await browser.close();
}
run()
Select Multiple Values from the dropdown in Puppeteer
20% of the dropdowns are multiple select dropdowns, there are cases where applications have to let the user choose multiple values from dropdowns like the menu in restaurants, menu in fruit selection, etc...
You can use the select() function to choose the multiple values from a dropdown, there is only one modification from selecting single dropdown and multi-dropdown in puppeteer, which is user have to pass multiple values to the select() function from the second parameter.
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
await page.select("select#second", 'pizza', 'donut', 'bonda')
await page.waitFor(30000)
await browser.close();
}
run()
Select dropdown value using type()
It may sound weird, but we can select the value from the dropdown using the type() function present in puppeteer, Not just in puppeteer. You can select a dropdown value in real manual life as well, please do try once
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
await page.type("select#first", "Google")
await browser.close();
}
run()select dropdown using keyboard.type in puppeteer:
It seems like it is not possible to select the dropdown using this method.
Get selected value from the dropdown in puppeteer
In puppeteer you do not have a direct method to retrieve the selected value from the dropdown, so we have to use attribute value to fetch the selected value from the dropdown.
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var selectedVal = await page.$eval("select#first", selectedValue=> selectedValue.value)
await console.log(selectedVal)
await browser.close();
}
run()var selected = await page.$eval("select#first", selectedValue=> selectedValue.getAttribute("value"))A Specific value selected from the dropdown or not using Javascript in puppeteer:
You can use javascript and check whether the value from the dropdown is selected or not, please do not confuse the javascript that you are using in the test case. I am talking about executing javascript on the browser. (In other automation tools you might have heard it like JavascriptExecutor).
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var selected = await page.evaluate(() => {
return document.querySelector(`select [value="Microsoft"]`).selected = true
});
await console.log(selected)
await browser.close();
}
run()Dropdowns with Jquery in Puppeteer
We can get the selected value from the dropdown using jQuery, And we can also check whether a particular value is selected or not.
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var selectedValue = await page.evaluate(() => {
return $(`select#first`)[0].value
});
await console.log("Selected Value"+ selectedValue)
var selectedOrNot = await page.evaluate(() => {
return $(`select [value='Microsoft']`)[0].selected
});
await console.log("Selected Or Not "+ selectedOrNot)
await browser.close();
}
run()How many dropdowns are present on a page
Sometimes we might need to get the number of dropdowns present on the page, it is simple to get it. We need to use a selector which matches all the dropdown, for example, almost all the dropdowns(standard) are created using select tag.
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var dropdowns = await page.$$("select")
await console.log(await dropdowns.length)
}
run()Get All options from a specific dropdown:
You can get all the options present in the dropdown using the selector which combines both dropdown and options.
All standard dropdowns are created using select tag and value are created using option tag
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var dropdowns = await page.$$eval("select#first option", all => all.map(a => a.textContent))
await console.log(dropdowns)
}
run()check specific value present in the dropdown:
In the above code, you got all the options so from that we will be able to check whether an option is resent or not using simple if..else block.
In the below code, we are checking whether Yahoo is present in the options are not.
const puppeteer = require('puppeteer');
async function run(){
const browser = await puppeteer.launch({headless:false})
const page = await browser.newPage()
await page.goto('https://chercher.tech/practice/dropdowns');
var dropdowns = await page.$$eval("select#first option", all => all.map(a => a.textContent))
if(dropdowns.indexOf("Yahoo") != -1){
await console.log("Yes, Yahoo is still alive")
}
}
run()Question for thought, drop the answer in the comment box.
Recommended Readings
I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.
