puppeteer 返回在下拉列表中选择的值

Question

如何从下拉列表中获取选定的值（页面上显示的值）

<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>

我有以下代码。

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)
})();

当我运行这个时我得到的是：

Selected option is: undefined

所以这不起作用...

更新：由于html页面很长，我已将其添加到小提琴jsfiddle.net/cad231/c14mnp6z 所选项目的id是我想获取的值：#tst_quantity_dropdown

Answer 1

我认为最简单的方法是使用 puppeteer $eval。https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pageevalselector-pagefunction-args-1

通过 id 选择元素，只需询问它的值，就会在下拉列表中为您提供所选值。

const puppeteer = require('puppeteer');

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

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

输出：Selected option is: 2