puppeteer elementHandle 通过索引或通过检查 textContent

Question

我有一个与此类似的页面

<div class="myclass">Some Text 1 </div>
<div class="myclass">Some Text 2 </div>
<div class="myclass">Some Text 3 </div>
<div class="myclass">Some Text 4 </div>

我想使用 puppeter 来获取这些的 elementHandle

await page.$('.myclass');

但是我想通过索引获取元素，类似于

await page.$('document.querySelectorAll(\'div[class="myclass"]\')[' +  myIndex ']')

或者通过检查文本内容（伪代码）

 await page.$('document.querySelectorAll(\'div[class="myclass"]\').foreach => textContent == Some Text 2')

是否可以使用 puppeteer nodejs 来实现这一点？

Answer 1

1. 通过索引获取元素（句柄）:

使用这个的人不多，但我最喜欢的通过索引获取元素的方法是使用内置的 css 选择器：

:nth-child()

！这是一个示例（当然是在异步函数内）：

const index = 2; // second element (nth-child uses 1-based index)
const elementHandle = await page.$(`div.myclass:nth-child(${index})`);

您不能在

document.querySelectorAll()

中使用

await page.$()

，page.$() 需要一个选择器作为参数，请参阅：https://pptr.dev/api/puppeteer.page。_

2. 通过文本内容获取元素（句柄）

就像我刚才说的，你只能在page.$()内部传递一个css选择器字符串。我会使用索引解决方案，但如果您想通过文本内容获取元素，您可以使用这个使用

page.evaluateHandle()

:

的示例

const textToFind = "Some Text 2";
const elementHandle = await page.evaluateHandle((text) => {
  return Array.from(document.querySelectorAll('.myclass'))
    .find(element => element.textContent === text);
}, textToFind);

我希望这对某人有帮助！祝你有美好的一天