获取所有跨度并使用 puppeteer 单击它们 - 因“节点不可见”和其他错误而失败

如何解决获取所有跨度并使用 puppeteer 单击它们 - 因“节点不可见”和其他错误而失败

我有一个包含许多 div 元素的 HTML 页面，每个元素都具有以下结构（输入 id 和名称更改）：

<div class="item">
   <div class="box">
      <div class="img-block">
         <label for="check-11">
            <input id="check-11"  name="result11" type="checkbox">
            <span class="fake-input"></span>
         </label>
      </div>
   </div>
</div>

我想使用 puppeteer 获取“假输入”类的所有范围，然后单击它们。 问题是，无论我尝试什么，它都无法奏效。

每次尝试的开始都是一样的：

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto(baseUrl,{ waitUntil: 'networkidle2' });

   // FETCHING AND CLICKING
}();

我尝试了很多东西：

1：

await page.waitForSelector('span.fake-input');
await page.click('span.fake-input');

2：

await page.waitForSelector('span.fake-input')
    .then(()=>{
         console.log(`clicked!`);
         page.click('span.fake-input')

3：

const spans = await page.evaluate(() => {
     return Array.from(document.querySelectorAll('span'),el => el.textContent)
 })
 console.log('spans',spans)
 for (let index = 0; index < 7; index++) {
     const element = spans[index];
     await page.click('span')

 }'=

4：

  await page.evaluate(selector=>{
      return document.querySelector(selector).click();
  },'span.fake-input)
  console.log('clicked');

在每个解决方案中，页面根本无法获取任何内容（返回 null 或未定义，因此错误是“单击”不是 null 中的函数）或失败并显示错误“节点不可见或不是HTMLElement”。

无论出现什么错误，无论如何我都无法获取所有跨度并单击它们。

谁能告诉我我做错了什么？

解决方法

使用 page.$$ 返回多个元素（相当于 document.querySelectorAll）。使用 page.$ 返回单个元素（相当于 document.querySelector）。

如果要从一组元素中提取某个值，请对单个元素使用 page.$$eval 和 page.$eval。

例如将元素句柄返回给脚本

const spans = await page.$$('div#item label .fake-input')
spans.forEach(span=>span.click())

如果你从一个元素中提取一个值，向它传递一个回调，返回你需要提取的内容

例如

const spanTexts = page.$$eval('div#item label .fake-input',spans => {
  spans.map(span=>span.innerText)
})
console.log(spanTexts)

我应该添加那个 page.$$eval 和 page.$eval 在浏览器上下文中执行你的回调。

,

var obj = document.querySelectorAll("span.fake-input");
for(var i=0;i<obj.length;i++){
   obj[i].click();
}

Vanilla JavaScript 会更容易工作