Puppeteer中获取列表首个元素的await异步等待问题

你遇到firstNews为undefined的核心原因是：domcontentloaded事件触发仅代表页面初始静态HTML结构加载完成，你要抓取的article.news列表是页面加载后通过JS异步拉取数据、动态渲染生成的，静态DOM加载完成时这些动态元素还没挂载到页面上，此时执行$$("article.news")拿到的是空数组，自然取第0项就是undefined。
你之前加的waitForTimeout(2000)属于硬编码等待，本质是赌2秒内动态内容能渲染完成，既会在页面加载快时白白浪费等待时间，也会在网络差、设备性能弱时因为等待时长不足随机报错，不是可靠方案。

使用Puppeteer内置的waitForSelector显式等待方法，该方法会自动轮询页面，直到目标元素满足匹配条件才会继续执行，稳定性远高于硬编码超时。

基础可靠写法 #

await configPage.goto('http://....', {waitUntil: 'domcontentloaded'} );
// 等待页面上至少渲染出1个新闻条目
await configPage.waitForSelector("article.news");
const news = await configPage.$$("article.news");
const firstNews = news[0];
// 等待第一条新闻的正文元素挂载完成
await firstNews.waitForSelector('div.news-body');
const content = await firstNews.$eval('div.news-body', s => s.textContent.trim());
console.log(content);

更简洁的优化写法 #

waitForSelector执行成功后会直接返回匹配到的第一个元素的句柄，不需要额外调用$$取数组首项，从根源避免空数组取[0]得到undefined的问题：

await configPage.goto('http://....', {waitUntil: 'domcontentloaded'} );
// 等待并直接获取第一条可见的新闻条目
const firstNews = await configPage.waitForSelector("article.news", {visible: true});
// 等待第一条新闻的正文元素可见
await firstNews.waitForSelector('div.news-body', {visible: true});
const content = await firstNews.$eval('div.news-body', s => s.textContent.trim());
console.log(content);

• 给waitForSelector传入{visible: true}参数，会额外校验元素不仅存在于DOM中，同时是可见状态（宽高大于0、没有被设置display:none等隐藏属性），避免拿到还在渲染、处于隐藏状态的元素导致操作失败。
• 如果需要自定义等待超时时间，可以传入timeout参数，比如waitForSelector("article.news", {timeout: 5000})代表最多等待5秒，超时就抛出明确的定位失败错误，框架默认超时时间为30秒。
• 如果你需要等待的是列表加载完成多条数据，也可以基于自身业务逻辑调整等待规则，比如等待对应的数据接口响应完成，但绝大多数普通动态渲染场景，waitForSelector已经足够稳定。

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