Puppeteer如何获取嵌套选择器下指定img元素的src属性值

现有页面HTML结构如下：

<div class="loaded active">
<img class="full" src="img1.jpg">
</div>

<div class="loaded">
<img class="full" src="img2.jpg">
</div>

<div class="loaded">
<img class="full" src="img3.jpg">
</div>

目前可通过以下代码获取所有class为full的img元素的src属性：

const slkImg = '.full';
    
const imgs = await page.$$eval(slkImg, postLinks => postLinks.map(link => link.src));

需要实现的逻辑：仅获取class同时包含loaded和active的div下的img（即对应img1.jpg）的src值。

直接调整CSS选择器即可，不需要额外写JS遍历筛选逻辑，修改后的代码如下：

// 选择器匹配规则：class同时包含loaded、active的div标签下，class为full的img元素
const targetSelector = 'div.loaded.active .full';
const activeImgSrc = await page.$eval(targetSelector, imgEl => imgEl.src);

• 选择器规则说明：CSS中.classA.classB的写法会命中同时拥有这两个class的元素，配合后代选择器空格，就能精准定位目标img节点
• 由于符合条件的目标元素只有1个，直接使用page.$eval获取单个元素即可，无需使用$$eval获取元素列表再遍历。

内容的提问来源于stack exchange，提问作者issik kul