Puppeteer报错TypeError：无法读取undefined的contains属性，求排查

核心问题分析 #

1. ElementHandle 无法直接访问 DOM 属性
   page.$$() 返回的是 Puppeteer 的 ElementHandle 对象集合，并非浏览器原生 DOM 元素，因此无法直接调用 classList.contains()——这就是报错Cannot read property 'contains' of undefined的直接原因。必须通过 Puppeteer 的 API（如evaluate()）在浏览器上下文内操作 DOM。

2. classList.contains 参数逻辑错误
   即便拿到原生 DOM 元素，classList.contains() 仅能接收单个类名（不带前缀点），不能传入多类选择器字符串（比如.update-components-text.relative...），这种写法本身不符合 API 规则。

修复后的代码 #

await page.goto("https://www.linkedin.com/");
const posts = await page.$$(".relative");

for (let i = 0; i < Math.min(6, posts.length); i++) {
  const isTargetPost = await posts[i].evaluate(el => {
    // 检查元素是否同时包含所有目标类名
    return el.classList.contains('update-components-text') &&
           el.classList.contains('relative') &&
           el.classList.contains('feed-shared-update-v2__commentary');
  });
  
  if (isTargetPost) {
    console.log("Post detected!");
  }
}

优化建议 #

如果想更高效，可以直接用精准选择器定位目标元素，跳过无效遍历步骤：

await page.goto("https://www.linkedin.com/");
// 直接获取前6个符合条件的帖子
const targetPosts = await page.$$(".update-components-text.relative.feed-shared-update-v2__commentary");
const limitedPosts = targetPosts.slice(0, 6);

if (limitedPosts.length > 0) {
  console.log(`Detected ${limitedPosts.length} target posts!`);
}

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