在 puppeteer 中獲取具有特定 class 的圖像 src

Question

我有以下代碼，我將所有 src 存儲在一個數組中，我只想存儲名稱為 class xyz 的 img

const imgs = await page.$$eval('img[src]', imgs => imgs.map(img => img.getAttribute('src')));

我嘗試使用用戶過濾器，但我找不到正確的語法來執行此操作。

Answer 1

只需將.xyz添加到您的查詢字符串中：

const imgs = await page.$$eval('img.xyz[src]', imgs => imgs.map(img => img.getAttribute('src')));

Answer 2

如果您想獲取類 latest-photos 中的所有 SRC 地址：

<div class="latest-photos">

    <img src="/LogoImage.ashx?sn=14376&imgNbr=0" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img1" alt="OptionalI Image 1" width="170" style="vertical-align: top;" />
    <img src="/LogoImage.ashx?sn=14376&imgNbr=1" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img2" alt="OptionalI Image 2" width="170" style="vertical-align: top;" />
    <img src="/LogoImage.ashx?sn=14376&imgNbr=2" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img3" alt="Option
    
    alI Image 3" width="170" style="vertical-align: top;" />
</div>

你用：

const imgs = await page.$$eval('.latest-photos img[src]', imgs => imgs.map(img => img.getAttribute('src')));

Answer 3

你可以使用這個：

    const imgaes = await page.$$eval('img', anchors => [].map.call(anchors, img => img.src));

Answer 4

你可以使用這個：

async function scrapeProduct(url){
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);

const [el] = await page.$x('//*[@id="content"]/div/div[2]/div/div[2]/div[1]/div/div/div/span');
const src = await el.getProperty('src');
const image = await src.jsonValue();

console.log({image});

browser.close();

}

    scrapeProduct('https://soundcloud.com/sudo_normi_music/shibuya-drift');