如何使用 NodeJS 和 puppeteer 从 udemy 抓取图像答案

【问题标题】：How do I scrape images from udemy using NodeJS and puppeteer如何使用 NodeJS 和 puppeteer 从 udemy 抓取图像
【发布时间】：2023-03-16 19:53:02
【问题描述】：

这是我的代码 - 抓取课程标题可以，但图像有问题

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth')
puppeteer.use(StealthPlugin());
const fs = require('fs/promises')
function sleep(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function start()
{
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto("https://www.udemy.com/pl/courses/development/web-development/?lang=pl&sort=popularity&persist_locale=&locale=pl_PL");
    await sleep(5000);
    const names = await page.evaluate(() => {
        return Array.from(document.querySelectorAll(".course-list--container--3zXPS div.udlite-focus-visible-target.udlite-heading-md.course-card--course-title--vVEjC")).map(x => x.textContent)
    })
    const images = await page.evaluate(() => {
        return Array.from(
            document.querySelectorAll(".course-list--container--3zXPS div.course-card--image-wrapper--1F9ny")
        ).map((image) => image.getAttribute(`src`));
    });


    let m = ";";
    for (let i = 0; i < names.length; i++)
    {
        names[i] = i+m+names[i]+m+images[i]
    }
    await fs.writeFile("courses.txt", names.join("\r\n"))
    await page.screenshot({ path: "udemy.png", fullPage: true });
    await browser.close();
}
start()

现在它返回 null 而不是图像 url，如果我将 src 更改为 srcset 没有任何变化。我要抓取图片的页面是https://www.udemy.com/pl/courses/development/web-development/?lang=pl&sort=popularity&persist_locale=&locale=pl_PL

在此脚本截取的屏幕截图中，我可以看到课程图标被涂黑。我可以刮掉屏幕截图上可见的图像，但不能刮掉那些被涂黑的图像。

【问题讨论】：

sleep() 或 waitForTimeout() 是臭名昭著的错误来源，因为在某些元素出现在动态页面中之前，您可能会弄错时间。最好将其更改为 waitForSelector() 并为您所依赖的元素使用选择器。另一方面，你们中的一些选择器似乎包含自动生成的类名——如果你能摆脱它们以使你的脚本更稳定的话。
我使用了await page.waitForSelector("#u606-popper-trigger--138 > div > div.course-card--image-wrapper--1F9ny") 而不是await sleep(5000);- 我从我正在抓取的站点复制了一个图像元素的选择器- 现在脚本只是无休止地等待。

标签： node.js image web puppeteer screen-scraping

【解决方案1】：

好的，我找到了答案 - 我在 QuerySelectorAll 的末尾添加了 setVievport 函数和 img

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth')
puppeteer.use(StealthPlugin());
const fs = require('fs/promises')
function sleep(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function start()
{
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto("https://www.udemy.com/pl/courses/development/web-development/?lang=pl&sort=popularity&persist_locale=&locale=pl_PL", { "waitUntil": "networkidle0" });
    
    await sleep(1000);
    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
    const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
    await page.setViewport({ width: bodyWidth, height: bodyHeight });
    await sleep(1000);

    const names = await page.evaluate(() => {
        return Array.from(document.querySelectorAll(".course-list--container--3zXPS div.udlite-focus-visible-target.udlite-heading-md.course-card--course-title--vVEjC")).map(x => x.textContent)
    })
    const images = await page.evaluate(() => {
        return Array.from(
            document.querySelectorAll(".course-list--container--3zXPS div.course-card--image-wrapper--1F9ny img")
        ).map((image) => image.getAttribute(`src`));
    });


    let m = ";";
    for (let i = 0; i < names.length; i++)
    {
        names[i] = i+m+names[i]+m+images[i]
    }
    await fs.writeFile("courses.txt", names.join("\r\n"))
    await page.screenshot({ path: "udemy.png", fullPage: true });
    await browser.close();
}
start()

【讨论】：