Puppeteer含:contains的选择器报错：querySelector提示无效求助

哎，这个问题我之前也踩过坑！核心原因很直白：:contains()不是标准CSS选择器——Chrome DevTools控制台里能用是因为它偷偷支持了jQuery风格的扩展，但Puppeteer的page.click()底层依赖原生DOM的querySelector方法，原生JS根本不认这个伪类，所以才会抛出选择器无效的错误。

给你几个可行的解决方案，按需挑选就行：

方案1：用XPath替代（最推荐） #

XPath原生支持文本包含的筛选逻辑，Puppeteer也完美兼容XPath选择器。把你的原选择器转换成XPath写法即可：

// 通过XPath匹配目标元素，点击第一个匹配项
const [targetBtn] = await page.$x('//div[contains(@class, "button-table")]//div[contains(text(), "Who")]//div[contains(@class, "square-button")][1]');
if (targetBtn) {
  await targetBtn.click();
}

这段XPath的逻辑和你原选择器完全对应：先找带button-table类的div，再找它下面文本包含"Who"的div，最后定位到该div下第一个带square-button类的按钮。

方案2：页面有jQuery时，直接在上下文调用 #

如果你的目标页面本身就引入了jQuery，那最省事的办法就是直接在页面上下文中复用你原来的选择器：

await page.evaluate(() => {
  $('div.button-table div:contains(Who) div.square-button:nth-child(1)').click();
});

这和你在DevTools控制台里的操作逻辑完全一致，零学习成本。

方案3：原生JS手动筛选（无依赖） #

要是不想用XPath也没有jQuery依赖，就用原生JS遍历元素、判断文本内容：

await page.evaluate(() => {
  // 获取所有符合基础选择器的按钮
  const candidateBtns = document.querySelectorAll('div.button-table div.square-button:nth-child(1)');
  // 遍历找到包含目标文本的父元素对应的按钮
  for (const btn of candidateBtns) {
    if (btn.closest('div').textContent.includes('Who')) {
      btn.click();
      break;
    }
  }
});

这个方法兼容性拉满，完全不依赖外部库，就是代码稍微繁琐一点。

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