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

【问题标题】：get all spans and click them with puppeteer - fails with "node not visible' and other errors获取所有跨度并使用 puppeteer 单击它们 - 因“节点不可见”和其他错误而失败
【发布时间】：2020-12-24 02:19:05
【问题描述】：

我有一个包含许多 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 来获取所有带有“fake-input”类的跨度并单击它们。问题是，无论我尝试什么，它都无法正常工作。

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

(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 或未定义，因此错误是“click”不是 null 中的函数）或失败并显示错误“节点不可见或不是HTML 元素”。

无论错误如何，无论如何我都无法获取所有跨度，然后单击它们。

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

【问题讨论】：

标签： javascript html click puppeteer

【解决方案1】：

使用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 在浏览器上下文中执行你的回调。

【讨论】：

【解决方案2】：

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

Vanilla JavaScript 会更容易工作

【讨论】：