Question

我一直在寻找一个关于特定课程每个元素的点击事件的好例子，但我似乎无法找到一个。在我的应用程序中，我使用类.bar在svg中生成多个条形。

有没有一种很好的方法来迭代选择中的每个条并单击它？

到目前为止，这是我的代码（删除了dev区域的链接）：

const puppeteer = require('puppeteer');

(async () => {
    //open browser, use headless to allowing viewing
    const browser = await puppeteer.launch({headless: false, sloMo: 80});
    const page = await browser.newPage();
    //goto link
    await page.goto('/link_to_test/');

    //scraping automation goes here
    await page.waitFor(5000);

    let bars = await page.$$(".bar");
    for(const idx in bars){
        await bars[idx].click({delay:250});
    }

    // close browser
    await browser.close();
})();

我一直在寻找一种从$$(".bar")选项中选择每个栏的方法，然后点击它，但我似乎找不到任何相关文档。

更新

我将page.waitFor增加到5000并从for循环中删除了ElementHandle。代码不再引发任何错误，但它不想点击任何内容。

看起来这对于SVG元素还不起作用https://github.com/GoogleChrome/puppeteer/issues/1769

Answer 1

如果没有看到更多代码，我不确定这是否是您需要的答案。此代码选择给定a.bars的所有ul，并返回所有hrefs的数组。然后我们循环浏览链接并依次打开每个链接。

我认为拼图的缺失是我将链接映射到数组（见下面的... links => links.map((a) => { return a.href }));

const puppeteer = require('puppeteer');

(async () => {
  const html = `
    <html>
      <body>
       <ul>
        <li><a class="bar" href="https://www.google.com">Goolge</a></li>
        <li><a class="bar" href="https://www.bing.com">Bing</a></li>
        <li><a class="bar" href="https://duckduckgo.com">DuckDuckGo</a></li>
       </ul>
      </body>
    </html>`;

  const browser = await puppeteer.launch({ headless:false});
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const data = await page.$$eval('ul li a.bar', links => 
      links.map((a) => { return a.href }));

  //You will now have an array of hrefs
  for (const i in data) {
    console.log("Opening", data[i]);
    await page.goto(data[i]);
  }
  await browser.close();
})();

按顺序按SVG中某个类的每个元素

1 个答案: