时间戳

首页 > 解决方案 > 如何用 puppeteer 抓取 src 图像？

javascript - 如何用 puppeteer 抓取 src 图像？

问题描述

我需要弹出链接中的 src 图像。 https://www.tokopedia.com/pusatvalve/1-2-inch-ball-valve-sankyo-mojekerto 我试过这样

const popup = await page.$('div.css-hnnye.ew904gd0');
    const maxLoop = await page.evaluate(() => {
      let contain = document.querySelectorAll('div.css-1muhp5u.ejaoon00');
      return contain.length;
    });

    let image1 = '';
    let image2 = '';
    let image3 = '';
    let image4 = '';
    let image5 = '';

    if (0 <= Number(maxLoop)) {
      image1 = await popup.evaluate( popup => {
        popup.click()
        let image = document.querySelector('img.css-udmgcf').src;
        return image;
      } );
    }

    await page.keyboard.press('Escape');
    await page.keyboard.up('Escape');
    await page.click('div.css-xwybk > div > div > div:nth-child(2) > div');

    const popup2 = await page.$('div.css-hnnye.ew904gd0');

    if (1 <= Number(maxLoop)) {
      image2 = await popup2.evaluate( popup2 => {
        popup2.click()
        let image = document.querySelector('img.css-udmgcf').src;
        return image;
      } );
    }

    image1 !== '' ? item.image1 = image1 : '';
    image2 !== '' ? item.image2 = image2 : '';
    image3 !== '' ? item.image3 = image3 : '';
    image4 !== '' ? item.image4 = image4 : '';
    image5 !== '' ? item.image5 = image5 : '';

但结果总是一样的。结果

注意：我想获取格式 src .jpeg 在此处输入图像描述

标签： javascriptpuppeteer

解决方案

你可以尝试做这样的事情：

const puppeteer = require('puppeteer')

const PAGE_URL = ' ... ' // the page to scrape the images from

const browser = puppeteer.launch({
    headless: true
});

(async function () {
    const page = await (await browser).newPage()

    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');
    await page.setViewport({ width: 960, height: 768 });

    await page.goto(PAGE_URL, {
        timeout: 60000
    })

    const scrapedImages = await page.evaluate(async () => {
        const asyncSleep = (ms) => new Promise((rs, _) => setTimeout(rs, ms))

        const images = []

        for (const eachThumbnail of document.querySelectorAll("div[data-testid='PDPImageThumbnail'] > div > img")) {
            await eachThumbnail.click()

            let imageSrc = document.querySelector("div[data-testid='PDPImageMain'] > div > div > img").src

            while (images.includes(imageSrc) || imageSrc.startsWith('data:')) {
                imageSrc = document.querySelector("div[data-testid='PDPImageMain'] > div > div > img").src;
                await asyncSleep(1000)
            }

            images.push(imageSrc)
        }

        return images
    })

    console.log(scrapedImages)

})()

这里脚本使用data-testid属性来选择元素，因为它与div.css-xwybk其他类似的类名相比更稳定（我假设它会经常更改）。

另一件事是由于缩略图不是原始大小，脚本单击它们并等待原始图像呈现然后存储 url。（也避免使用 base64 图像 src，因为它们用于显示加载指示器）。

注意：在您对任何站点执行任何自动化操作之前，请确保您所做的事情没有被禁止或违反站点的政策。（这个答案是为了向您展示如何将 puppeteer 用于此目的，而不是鼓励您这样做）

推荐阅读