如何用Puppeteer获取页面中任意层级的子链接？

原代码问题点 #

1. 硬编码DOM路径不可靠：你使用的XPath //*[@id="root"]/div[2]/div/li[5]/ul//a 完全依赖固定的DOM层级和位置，一旦页面结构微调（比如新增/删除元素），这个路径就会失效，无法定位到目标元素。
2. 未利用页面稳定标识：页面内所有目标<a>标签都带有data-testid="atlas_link"属性，这是更可靠的定位依据，没必要使用冗长且脆弱的层级路径。

解决方法 #

方法1：通用XPath定位所有目标链接 #

直接通过data-testid属性定位任意层级的<a>标签，不受DOM结构变化影响：

const links = await page.$x('//a[@data-testid="atlas_link"]');
const urlList = [];

for (const link of links) {
  const hrefProp = await link.getProperty('href');
  const fullUrl = await hrefProp.jsonValue();
  urlList.push(fullUrl);
}

console.log(urlList);

方法2：使用page.$$eval高效提取 #

$$eval直接在浏览器上下文完成属性提取，减少Puppeteer与浏览器的通信次数，效率更高：

const urlList = await page.$$eval('a[data-testid="atlas_link"]', links => 
  links.map(link => link.href)
);

console.log(urlList);

额外说明 #

页面中子菜单的<ul>虽然设置了display:none，但Puppeteer的选择器（包括XPath和CSS）依然可以定位到其中的元素，无需额外展开菜单即可获取链接。

内容的提问来源于stack exchange，提问作者S.Dan