Get Image src with specific class in puppeteer

Question

I have the following code, where I store all src in an array, I would like to store only img with class name xyz

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

I tried to user filter, but I couldn't reach the right syntax to do that.

Solution 1

Just add .xyz to your query string:

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

Solution 2

If you want to get all the SRC addresses inside of a class latest-photos:

<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>

You use:

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

Solution 3

You can use this:

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