Puppeteer：如何根據文本選擇下拉選項？

Question

在 Puppeteer 中，我們可以通過提供值作為參數來選擇下拉選項：

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

是否有根據文本而不是值來選擇選項的功能？

Answer 1

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

Answer 2

您可以使用page.evaluate()通過其text屬性find您想要選擇的option 。 然后您可以使用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;
});

Answer 3

$$eval 可能比這些其他答案更干凈：

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

Answer 4

您可以使用 page.evaluate() 並直接轉到您想要的元素。

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

盡管如果您的元素不存在，這將引發錯誤，因此您應該在選擇它之前確保該元素是否確實存在。

Puppeteer：如何根據文本選擇下拉選項？

問題描述

4 個解決方案

解決方案1
27 已采納 2018-03-05 22:17:43

解決方案2
11 2020-03-17 04:37:23

解決方案3
8 2021-05-17 03:33:35

解決方案4
5 2020-03-17 08:39:41

Puppeteer：如何根據文本選擇下拉選項？

問題描述

4 個解決方案

解決方案1 27 已采納 2018-03-05 22:17:43

解決方案2 11 2020-03-17 04:37:23

解決方案3 8 2021-05-17 03:33:35

解決方案4 5 2020-03-17 08:39:41

解決方案1
27 已采納 2018-03-05 22:17:43

解決方案2
11 2020-03-17 04:37:23

解決方案3
8 2021-05-17 03:33:35

解決方案4
5 2020-03-17 08:39:41