具有自定义属性的 Puppeteer 点击元素

在使用 Puppeteer 进行自动化测试或爬虫时，我们需要定位元素并且与其交互，例如进行点击操作。然而，有些场景下元素并没有明显的定位信息，这时候我们就需要添加自定义属性并进行定位。本文将介绍如何在 Puppeteer 中定位并点击具有自定义属性的元素。

1. 添加自定义属性

在 HTML 页面中，我们可以通过以下方式添加自定义属性：

<button custom-attr="button1">点击我</button>

这里我们添加了名为 custom-attr 的自定义属性，并为其赋值为 button1。接下来我们就可以在 Puppeteer 中使用该属性进行定位。

2. 基于自定义属性定位元素

在 Puppeteer 中，我们可以使用 page.evaluate 方法运行 JavaScript 代码，并在页面中执行。以下示例代码通过 document.querySelector 方法获取具有 custom-attr 属性并值为 button1 的元素，并返回该元素的 selector：

const selector = await page.evaluate(() => {
  const element = document.querySelector('[custom-attr="button1"]');
  return element ? element.tagName : null;
});

其中 "[custom-attr="button1"]" 表示选择器，表示选择具有 custom-attr 属性且值为 button1 的元素。执行完该代码后，我们会得到元素的标签名。如果获取不到元素，则返回 null。

3. 基于自定义属性点击元素

有了元素的选择器，我们就可以使用 Puppeteer 的 page.click 方法点击该元素。以下示例代码会首先通过之前的方法获取元素选择器，然后再使用 page.click 方法对其进行点击：

await page.waitForSelector('[custom-attr="button1"]');
const selector = await page.evaluate(() => {
  const element = document.querySelector('[custom-attr="button1"]');
  return element ? element.tagName : null;
});
if (selector) {
  await page.click(`[custom-attr="button1"]`);
}

其中 page.waitForSelector('[custom-attr="button1"]') 表示在页面中等待具有 custom-attr 属性且值为 button1 的元素出现，然后再执行后续操作，以确保元素可用。如果选择器获取失败或者点击失败，则会抛出异常。

4. 总结

在使用 Puppeteer 时，我们经常需要按照特定条件进行元素的定位和交互。通过添加自定义属性并基于该属性进行定位，我们可以避免许多因特定元素无法定位而导致测试或爬虫失败的情况。本文介绍了如何添加自定义属性并基于该属性进行元素的定位和点击操作。