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

dropdown-values-puppeteer

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()
dropdown-select-puppeteer

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 to 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()
dropdowns-select-puppeteer

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

Dropdown must have been created using the select and options tags only
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()
Using getAttribute("value") will return only null, so remember it and do not use it.
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()
If there is no match for Given selector then you will receive below errot.
Uncaught TypeError: Cannot read property 'selected' of null at <anonymous>

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 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()
Javascript returns 1 if a value is present in an array otherwise -1

Question for thought, drop the answer in the comment box.

How do you get all the dropdown options present on the webpage ( I mean if 10 dropdowns are present, I would like to know all the options present in all the 10 dropdowns)?

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions