How can I grab the selected value from a dropdown (the value that is shown on the page)

<div class="form">
    <select name="stock" id="quantity_db" class="js_quantity_dropdown">
        <option value="1" >1</option>
        <option value="2" >2</option>
        <option value="3" >3</option>
        <option value="4" >4</option>
        <option value="5" >5</option>
        <option value="6" selected="selected">6</option>
    </select>

I have the following code.

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch({headless: false})
 const page = await browser.newPage();
 await page.goto('https://.....');

 const option  = await page.evaluate(()=> { 
 document.getElementById("quantity_db").options[document.getElementById("quantity_db").selectedIndex].text; });

console.log('Selected option is:', option)
})();

What I get when I run this is:

Selected option is: undefined

So that's not working...

UPDATE: Since the html page is very long I've added it to a fiddle jsfiddle/cad231/c14mnp6z The id of the select item is of which I would like to obtain the value : #tst_quantity_dropdown

How can I grab the selected value from a dropdown (the value that is shown on the page)

<div class="form">
    <select name="stock" id="quantity_db" class="js_quantity_dropdown">
        <option value="1" >1</option>
        <option value="2" >2</option>
        <option value="3" >3</option>
        <option value="4" >4</option>
        <option value="5" >5</option>
        <option value="6" selected="selected">6</option>
    </select>

I have the following code.

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch({headless: false})
 const page = await browser.newPage();
 await page.goto('https://.....');

 const option  = await page.evaluate(()=> { 
 document.getElementById("quantity_db").options[document.getElementById("quantity_db").selectedIndex].text; });

console.log('Selected option is:', option)
})();

What I get when I run this is:

Selected option is: undefined

So that's not working...

UPDATE: Since the html page is very long I've added it to a fiddle jsfiddle/cad231/c14mnp6z The id of the select item is of which I would like to obtain the value : #tst_quantity_dropdown

• javascript
• puppeteer

3 Answers 3

I think the easiest way is to use puppeteer $eval. https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pageevalselector-pagefunction-args-1

Select element by id and just ask for it's value will give you the selected value in the dropdown.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false})
  const page = await browser.newPage();
  await page.goto('https://afrekenen.bol./nl/winkelwagentje/direct-toevoegen?id=1001024332369558:2');

  const option = await page.$eval("#tst_quantity_dropdown", node => 
     node.value);
  console.log('Selected option is:', option)
})();

Ouputs: Selected option is: 2

You could target selected instead.

document.querySelector('option[selected="selected"]').innerText

Try this out..

Although as mentioned in the ments if the element you are trying to get is nested more than the example you gave then I remend going to the web-page ans copy/pasting the "full JS path" from the elements you need to check (the options in this case)

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false})
    const page = await browser.newPage();
    await page.goto('https://....');

    const option  = await page.evaluate(()=> {

        //If this form is nested more than the code you provided then just go to the element in DevTools > right click > copy > full JS path.... This will give you the exact path the the form / form elements 
        var opts = document.querySelectorAll("#mainContent > div.shopping-cart > div > div > div.product__actions > div > div > div.product-actions__amount > div > form > fieldset > div.fluid-grid__item.h-relative > div > #tst_quantity_dropdown> option");
        var selected;
        //Check if each option has the "selected" attribute or not 
        opts.forEach(opt => {
            if(opt.hasAttribute('selected')){
                selected = opt.textContent;
            }
        });

        return selected;
    });
    
    //Wait for result and log it outside of the evaluate function
    let result = await option;

    console.log(result)

})();