Puppeteer中如何基于父元素使用$eval()方法？

嘿，这个问题我之前也碰到过！确实Puppeteer没有直接提供element.$eval()方法，但咱们可以用现有的API组合出类似的效果，还能满足你需要截图的需求～

你的核心痛点在于：用page.$$eval()拿到的是DOM元素数组，没法直接在父元素上做类似$eval的查询，而且DOM元素没法调用Puppeteer的截图方法。那咱们换个思路，用page.$$()来获取父元素的ElementHandle数组，这样每个父元素都是可操作的Puppeteer元素句柄，就能在它内部查询子元素了。

具体实现步骤 #

• 用page.$$()替代page.$$eval()，获取父元素的ElementHandle列表（而不是DOM元素）
• 遍历每个父元素句柄，用parentEl.$()在父元素范围内查询子元素，得到子元素的ElementHandle
• 接下来你既可以用elementHandle.evaluate()实现类似$eval的逻辑，也能直接调用elementHandle.screenshot()完成截图操作

代码示例 #

// 获取所有父元素的ElementHandle数组
const parentElements = await page.$$('.your-parent-selector');

// 遍历每个父元素
for (const parentEl of parentElements) {
  // 在当前父元素内查找目标子元素
  const targetChild = await parentEl.$('.your-child-selector');
  
  // 类似$eval的操作：获取子元素的文本内容
  const childText = await targetChild.evaluate(el => el.textContent.trim());
  console.log('子元素文本：', childText);
  
  // 执行截图操作（满足你的核心需求）
  await targetChild.screenshot({
    path: `child-screenshot-${Date.now()}.png`,
    fullPage: false
  });
  
  // 记得用完后释放句柄，避免内存泄漏
  await targetChild.dispose();
}

// 最后释放父元素句柄
await Promise.all(parentElements.map(el => el.dispose()));

补充说明 #

如果之前你执着于用page.$$eval()，其实是行不通的——因为$$eval()会把DOM元素传到回调里，而DOM元素是浏览器端的对象，没法直接调用Puppeteer的截图API。换成page.$$()获取ElementHandle才是正确的方向，因为ElementHandle是Puppeteer和浏览器DOM元素之间的桥梁，能支持所有Puppeteer的元素操作。

备注：内容来源于stack exchange，提问作者cr..