如何在Puppeteer中通过索引或文本内容获取ElementHandle？

当然可以实现这两种需求，具体方法如下：

一、按索引获取目标元素 #

有两种常用实现方式：

1. 先获取元素集合再按索引选取 #

用page.$$()获取所有匹配.myclass的元素，之后直接通过数组索引访问目标元素（索引从0开始）：

const myIndex = 1; // 示例：选取第二个元素（对应Some Text 2）
const elements = await page.$$('.myclass');
const targetElement = elements[myIndex];

2. 用CSS选择器直接定位 #

借助CSS的:nth-child()或:nth-of-type()伪类（注意CSS选择器的索引从1开始计数）：

const myIndex = 1; // 对应CSS选择器的第2位
const targetElement = await page.$(`.myclass:nth-child(${myIndex + 1})`);

二、按textContent匹配获取目标元素 #

可以通过page.evaluate()或page.$eval()在浏览器上下文内过滤元素，注意处理文本首尾的空格：

1. 使用page.evaluate()（灵活容错） #

const targetText = 'Some Text 2';
const targetElement = await page.evaluate((text) => {
  return Array.from(document.querySelectorAll('.myclass')).find(el => el.textContent.trim() === text.trim());
}, targetText);

2. 使用page.$eval()（适用于确定存在匹配元素的场景） #

如果能确定页面中存在对应文本的元素，可使用此方法；若无匹配元素则会抛出错误：

const targetText = 'Some Text 2';
const targetElement = await page.$eval('.myclass', (elements, text) => {
  return elements.find(el => el.textContent.trim() === text.trim());
}, targetText);

内容的提问来源于stack exchange，提问作者C.Unbay