javascript - 如何使用 puppeteer 从选定的选项(不是值)中获取文本

Question

我有这样一个选择选项:

<label>Choose One:</label>
<select id="choose1">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
</select>

然后，在我的项目中，我可以选择必要的选项，在下面的例子中，我选择了 val2 值。

await page.select('#choose1', 'val2');  

因此，我尝试获取 val2 的文本，但在所有尝试中返回的都是错误的。

我已经试过了，它返回了第一个选项的 textContent:

const element = await page.$('#choose1 option');
const selected = await (await element.getProperty('textContent')).jsonValue();

如果我使用 await page.$('#choose1 option:selected')，我会收到一个不是有效选择器的错误。

谁能帮帮我？

Answer 1

您可以在选项上使用 .find 来选择与特定值匹配的选项，然后提取其文本内容:

const puppeteer = require("puppeteer"); // ^19.0.0

const html = `
<select id="choose1">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>
`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const targetVal = "val2";

  // not really necessary
  // await page.select("#choose1", targetVal); 

  const selectedText = await page.$$eval(
    "#choose1 option",
    (els, targetVal) =>
      els.find(el => el.value === targetVal).textContent,
    targetVal
  );
  console.log(selectedText); // => Value 2
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());