获取具有特定文本 puppeteer 的选择器 - Javascript

在使用 Puppeteer 进行自动化测试时，经常需要找到页面中具有特定文本的元素。这时，我们可以使用 Puppeteer 提供的 $x 函数结合 XPath 表达式来筛选出符合条件的元素。

以下是获取具有特定文本 puppeteer 的选择器的代码示例：

async function getTextSelectorByText(page, text) {
  const elementHandles = await page.$x(`//*[contains(text(), '${text}')]`);
  if (elementHandles.length === 0) {
    throw new Error(`没有找到文本为 "${text}" 的元素`);
  }
  const selector = await elementHandles[0].evaluate((e) => {
    return e.getAttribute('data-testid') || e.getAttribute('data-qa') || null;
  });
  if (!selector) {
    throw new Error(`元素 "${text}" 没有符合要求的 data-testid 或 data-qa 属性`);
  }
  return selector;
}

此函数接受两个参数：页面实例和文本。它将利用 page.$x() 方法和带有 XPath 表达式的参数来获取文本符合要求的元素的句柄数组。如果数组为空，则表示没有找到符合要求的元素，函数将抛出一个错误。

如果句柄数组不为空，它将从第一个句柄中提取 data-testid 或 data-qa 属性，用作元素选择器，并将其作为结果返回。如果没有找到符合要求的属性，则函数将抛出另一个错误。

我们可以使用如下方式来调用此函数：

const selector = await getTextSelectorByText(page, 'puppeteer');

其中，page 是 Puppeteer 的页面实例，puppeteer 表示我们要查找的文本。在执行完这个函数后，selector 变量将包含一个可以用于查找特定元素的选择器。

这是一个非常有用的函数，因为它可以不用依赖于元素的类名、ID、标签名等信息来查找页面元素，而能够直接根据其文本内容来获取它们的选择器。

总结

本文提供了一个用于查找特定文本对应的元素选择器的函数，它利用 Puppeteer 的 $x 方法和 XPath 表达式来查找符合要求的元素。此函数对于自动化测试和数据爬取等任务非常有用。