puppeteer:如何根据文本选择下拉选项?

时间:2018-03-05 17:45:27

标签: node.js puppeteer

在puppeteer中,whe可以通过在param中给出名称值来选择下拉选项:

page.select('select#idOfSelect', 'optionValue'); 

是否有基于文本而不是从其值中选择选项的功能?

4 个答案:

答案 0 :(得分:4)

您可以使用page.evaluate()find option您要通过其text属性来选择。然后,您可以使用selected属性来指示当前已选择该选项:

await page.evaluate(() => {
  const example = document.querySelector('#example');
  const example_options = example.querySelectorAll('option');
  const selected_option = [...example_options].find(option => option.text === 'Hello, world!');

  selected_option.selected = true;
});

答案 1 :(得分:3)

Puppeteer API中没有这样的方法。但您可以根据带有XPath的文本选择option,然后提取此元素的值并将此值传递给page.select()。这是一个完整的例子:

const puppeteer = require('puppeteer');

const html = `
        <html>
            <body>
                <select id="selectId">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </body>
        </html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const option = (await page.$x(
    '//*[@id = "selectId"]/option[text() = "Audi"]'
  ))[0];
  const value = await (await option.getProperty('value')).jsonValue();
  await page.select('#selectId', value);

  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

答案 2 :(得分:3)

您可以使用page.evaluate()并直接转到所需的元素。

await page.evaluate(() => {
    $("#idOfSelect option:contains('your-text')")[0].selected = true
})

尽管如果您的元素不存在,这将引发错误,所以在选择元素之前,应确保该元素是否确实存在。

答案 3 :(得分:2)

$$eval 可能比这些其他答案更简洁:

let optionValue = await page.$$eval('option', options => options.find(o => o.innerText === "foo")?.value)
await page.select('select#idOfSelect', optionValue);