时间戳

首页 > 解决方案 > 在 Puppeteer 中使用 page.evaluate 函数进行高效抓取

javascript - 在 Puppeteer 中使用 page.evaluate 函数进行高效抓取

问题描述

这是我在这里的第一篇文章，所以我希望我以正确的方式发布我的问题 - 提前感谢您的耐心等待！

我正在使用 Puppeteer 从以下网站抓取图像源：

https://www.palaceskateboards.com/range/summer-2020/

在 Puppeteer 中使用 page.evaluate() 我可以使用以下代码正确抓取图像源：

const puppeteer = require("puppeteer");

var imgQuery, imgQuerySource;

(async () => {

    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    const navigationPromise = page.waitForNavigation({ waitUntil: "load" });

    await page.goto("https://www.palaceskateboards.com/range/summer-2020/", { waitUntil: "load" });
    await navigationPromise;

    var imageSource = await page.evaluate(() => {
        imgQuery = document.querySelectorAll("img");
        imgQuerySource = imgQuery[0].getAttribute("src");
        return imgQuerySource;
    });
    console.log(imageSource)

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

在控制台中正确返回第一个图像源：

https://images.palaceskateboards.com/wp-content/uploads/2020/05/Palace-2020-spring-ark-air-grn-8675-300x210.jpg

成功！但是，我很难为 imageSource 的长度抓取所有链接。我已经尝试了所有可以找到的解决方案，包括使用 .push() 引入 for 循环以及使用 page.eval$() 等其他方法，但是我无法实现。有没有人能够将我推向正确的方向以有效地抓取所有 108 个值并将它们放入数组中？谢谢你的时间！

标签： javascriptnode.jspuppeteer

解决方案

document.querySelectorAll返回一个 NodeList，所以我将它解构为一个数组，以便它.map可用。之后，我用新值替换数组中的每个元素.getAttribute("src")。

var imageSource = await page.evaluate(() => {
    imgQuery = document.querySelectorAll("img");
    imgQuerySources = [...imgQuery].map((e) => e.getAttribute("src"));
    return imgQuerySources;
});
console.log(imageSource)

推荐阅读