如何在puppeteer中使用querySelectorAll获取输入值

Question

我的项目中有输入字段。我想用 puppeteer 自动将值放入其中。输入字段没有

id

、

name

。另外，我不能接受

className

，因为

className

也被其他元素使用。

这是输入字段：

<input type="text" data-bind="value: NeedleOut" class="box-short">

我尝试了以下代码，但它不起作用：

await page.$eval("input[data-bind='value: NeedleOut']", ele1 => {
    ele1[0].value = 5;
});

Answer 1

根据 docs

$eval

返回单个元素 - 您应该将

ele1[0]

替换为

ele1

或使用

$$eval

代替。

Answer 2

如果现有答案不完全清楚，这里有一个完整的、可运行的示例：

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

const html =
  '<input type="text" data-bind="value: NeedleOut" class="box-short">';

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const selector = "input[data-bind='value: NeedleOut']"
  await page.$eval(selector, el => {
    el[0].value = 5;
  });
  console.log(await page.$eval(selector, el => el.value)); // => 5
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

唯一的变化是删除了

[0]

--

$eval

相当于

querySelector

，而不是

querySelectorAll

。