如何在Puppeteer中实现按文本定位点击页面元素？

Puppeteer 官方没有提供直接按文本匹配元素的内置API，但可以通过以下两种成熟方案实现需求：

方案1：使用XPath选择器（推荐） #

XPath原生支持文本匹配逻辑，是最简便的实现方式，完全匹配目标文本的写法如下：

// 等待目标元素出现（避免动态加载导致找不到元素）
const targetText = 'Price -- Low to High';
const [targetElement] = await page.$x(`//div[contains(@class, '_10UF8M') and normalize-space(text()) = '${targetText}']`);
if (targetElement) {
  await targetElement.click();
} else {
  throw new Error(`未找到文本为${targetText}的元素`);
}

说明：normalize-space()方法会自动清除文本前后的空格、换行符，避免HTML里的多余格式导致匹配失败。

方案2：在浏览器上下文遍历匹配 #

如果不熟悉XPath语法，也可以通过page.evaluate在页面环境中遍历元素匹配：

const targetText = 'Price -- Low to High';
await page.evaluate((text) => {
  // 筛选所有class包含_10UF8M的div元素
  const elements = Array.from(document.querySelectorAll('div._10UF8M'));
  const target = elements.find(el => el.textContent.trim() === text);
  if (target) {
    target.click();
  } else {
    throw new Error(`未找到匹配元素`);
  }
}, targetText);

注意事项 #

• 如果允许模糊匹配，只需把XPath里的=改成contains(text(), '${targetText}')，或者把evaluate里的全等判断改成includes即可
• 若目标元素是动态渲染的，建议先加适当的等待逻辑，避免匹配失败

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