Question

这是我的第一篇文章，所以我希望我以正确的方式发布我的问题-预先感谢您的耐心！

我正在使用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个值并将它们放入数组中？感谢您的宝贵时间！

Answer 1

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)

使用Puppeteer中的page.evaluate功能进行有效的抓取

1 个答案: