Puppeteer JS中通过元素句柄获取href为空，求问题排查

问题分析与解决 #

1. 最核心的问题：选择器不匹配 #

你提供的目标<a>标签的class是compareItemsExpand，但你使用的选择器是.title a——这个选择器是用来查找class为title的元素下的所有<a>标签，而你的目标标签并没有嵌套在class为title的父元素里，所以page.$$(".title a")根本没选中你要的元素，自然返回的href为空。

修正方法：
使用匹配目标元素的选择器：

const elementHandles = await page.$$(".compareItemsExpand");

如果该标签有特定的父容器，也可以用更精确的层级选择器，比如父元素class是product-item的话，就用.product-item .compareItemsExpand。

2. 可能的附加问题：元素动态加载 #

如果目标元素是页面加载后通过JavaScript动态渲染生成的，page.$$可能在元素还未渲染完成时就执行了，导致获取不到有效元素。

修正方法：
先等待目标元素加载完成，再获取句柄：

// 等待目标元素出现，超时时间可根据页面情况调整
await page.waitForSelector(".compareItemsExpand", { timeout: 5000 });
const elementHandles = await page.$$(".compareItemsExpand");

for (const elHandle of elementHandles) {
    const elHref = await elHandle.getAttribute('href');
    console.log(elHref); // 此时应该输出javascript:void(0)
}

3. 替代方案：直接用$$eval简化操作 #

你也可以跳过元素句柄的循环，直接用$$eval批量获取属性，代码更简洁：

const hrefs = await page.$$eval(".compareItemsExpand", elements => 
    elements.map(el => el.getAttribute('href'))
);
console.log(hrefs); // 输出所有匹配元素的href数组

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