如何在Puppeteer JS中点击父类不同但类名相同的按钮？

我有两个类名完全相同但父元素类名不同的按钮，代码如下：

<div class="parent1">
  <div class="insider">
    <button class="mybutton">No1</button>
  </div>
</div>
<div class="parent2">
  <div class="insider">
    <button class="mybutton">No2</button>
  </div>
</div>

我能够选中目标按钮，但返回其类名用于page.click()时，只能得到通用类名，无法实现精准点击。而且div数量可能随机且顺序不固定，我该如何使用page.click()点击第二个按钮（或任意指定按钮）？
我目前的代码如下：

const selectedElement = await page.evaluate(() => {
  const arr = document.querySelector('.parent2').querySelector('button').className
  return arr
})
await page.click(`.${selectedElement }`);

显然selectedElement会得到mybutton类名，导致点击列表中的第一个按钮。

解决方案 #

其实你完全绕远路啦，根本不需要先获取类名再点击，直接用精准的选择器或者元素句柄就能搞定，给你几个实用的方案：

1. 用父元素限定的组合选择器（最推荐） #

既然你知道目标按钮的父元素类名是parent2，直接把这个层级关系写成选择器传给page.click()就行，一步到位：

// 简洁版：只要是parent2下的mybutton都能选中
await page.click('.parent2 .mybutton');

// 严谨版：指定精确层级，避免误选嵌套更深的元素
await page.click('.parent2 > .insider > .mybutton');

这种方式最靠谱，只要parent2这个类名是唯一的，不管页面里有多少个mybutton，都能精准定位到你要的那个，完全不受元素数量和顺序影响。

2. 通过按钮文本定位（适合文本唯一的场景） #

如果按钮的文本（比如No2）是唯一的，也可以直接通过文本匹配来点击：

// Playwright专属语法
await page.click('button:has-text("No2")');

// 更通用的写法（兼容更多场景）
await page.click('button', { text: 'No2' });

这种方法的好处是，哪怕父元素的类名有变化，只要按钮文本不变，就能准确定位到目标。

3. 按索引定位（适合顺序相对固定的情况） #

如果按钮是按列表形式排列的，你可以通过索引指定点击第几个（注意索引从0开始），比如点击第二个按钮：

// 用CSS选择器直接选中第二个mybutton
await page.click('.mybutton:nth-child(2)');

// 或者通过page.evaluate直接操作DOM
await page.evaluate(() => {
  const allButtons = document.querySelectorAll('.mybutton');
  allButtons[1].click(); // 第二个按钮对应索引1
});

不过要注意，这种方式依赖按钮的排列顺序，如果页面里按钮的顺序可能随机变化，就不建议用这个方法了。

4. 获取元素句柄后再点击（适合复杂校验场景） #

如果需要先确认元素存在，或者有更复杂的筛选逻辑，可以先获取元素句柄，再调用点击方法：

const targetButton = await page.$('.parent2 .mybutton');
if (targetButton) {
  await targetButton.click();
} else {
  console.log('目标按钮不存在');
}

这种方式能让你灵活处理元素不存在的情况，避免直接点击导致的报错。

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