Puppeteer 单击 span 元素中的链接答案

【问题标题】：Puppeteer clicking link in a span elementPuppeteer 单击 span 元素中的链接
【发布时间】：2021-10-11 18:55:22
【问题描述】：

我正在尝试解析一个漫画网站并保存所有页面。我有代码可以运行保存图像的页面。

我无法单击转到下一页的链接。我正在使用 Node 并使用 Puppeteer。我以为我可以只使用document.querySelectorAll("span.next-prev-text") 来获取链接中的跨度。

包括尝试获取下一页的相关代码和我尝试单击 NEXT CHAPTER 链接的 html。

<div class="col-md-6 prev-post">
  <a class="" href="https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/">
     <span class="next-prev-text">PREVIOUS CHAPTER </span>
  </a>
</div>

<div class="col-md-6 next-post">
  <a class="" href="https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-chapter-3/">
       <span class="next-prev-text">NEXT CHAPTER</span>
  </a>
</div>

(async() => {
    try {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();

      //starting page
      await page.goto(
        "https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/"
      );

      console.log("page has loaded")

      const chapter = await page.evaluate(() => {
        const pages = Array.from(
          document.querySelectorAll("img.aligncenter")
        ).map((image) => image.getAttribute("src"));
        return pages
      });

      fs.writeFileSync("./data.json", JSON.stringify(chapter));
      console.log("File is created!");

      const nextPage = await page.evaluate(() => {
        var obj = document.querySelectorAll("span.next-prev-text");
        return obj[1];
      })

      await page.click(nextPage);
      await page.waitForNavigation();
      await browser.close();
    } catch (error) {
      console.log(error);
    }

【问题讨论】：

如果要返回 dom 节点，您需要评估句柄而不是评估。

标签： javascript html node.js puppeteer

【解决方案1】：

page.click() 只接受一个字符串选择器。我不知道为什么，但是调用 page.click(".next-prev-text") 会引发错误，说 Error: Node is either not visible or not an HTMLElement。

解决方法是使用实际调用document.querySelectorAll() 的page.$$() 方法。它返回一个ElementHandle 的数组，因此您可以简单地在ElementHandle 上调用click() 方法。

我还添加了当您单击“下一章”链接时处理弹出页面的代码。

这是要测试的完整代码。

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  try {
    const browser = await puppeteer.launch({
      headless: false
    });
    const page = await browser.newPage();

    //starting page
    await page.goto(
      "https://tokyorevengersmanga.com/manga/tokyo-manji-revengers-vol-1-chapter-1-reborn/"
    );

    console.log("page has loaded")

    const chapter = await page.evaluate(() => {
      const pages = Array.from(
        document.querySelectorAll("img.aligncenter")
      ).map((image) => image.getAttribute("src"));
      return pages
    });

    fs.writeFileSync("./data.json", JSON.stringify(chapter));
    console.log("File is created!");

    const next = await page.$$(".next-prev-text");
    const [popup] = await Promise.all([
      new Promise((resolve) => page.once('popup', async p => {
        await p.waitForNavigation({
          waitUntil: 'networkidle0'
        });
        resolve(p);
      })),
      next[1].click()
    ]);

    // do your job on the next page with 'popup' here

    await browser.close();
  } catch (error) {
    console.log(error);
  }
})();

【讨论】：