木偶人获取具有相同选择器的元素列表

Puppeteer Getting List of Elements with Same Selector(木偶人获取具有相同选择器的元素列表)

问题描述

背景：

使用NodeJS/CucumberJS/Puppeteer为emberJS解决方案构建端到端回归测试。

问题：

当有多个动态元素具有相同选择器时，是否选择(page.click)并获取其中一个元素的textContent？(在我的示例中，我有4个元素具有相同的选择符=[data-test-foo4="true"])

我知道，用：

const text = await page.evaluate( () => document.querySelector('[data-test-foo4="true"]').textContent );

我可以获得第一个元素的文本，但是如何选择具有相同选择器的其他元素呢？我已尝试：

var text = await page.evaluate( () => document.querySelectorAll('[data-test-foo4="true"]').textContent )[1];
console.log('text = ' + text);

但它给我‘text=unfinded’

另请注意：

await page.click('[data-test-foo4="true"]');

使用该选择器选择第一个元素，但如何使用该选择器选择下一个元素？

推荐答案

您可以使用Array.from()创建一个数组，其中包含与您的选择器匹配的每个元素的所有textContent值：

const text = await page.evaluate(() => Array.from(document.querySelectorAll('[data-test-foo4="true"]'), element => element.textContent));

console.log(text[0]);
console.log(text[1]);
console.log(text[2]);

如果需要单击包含给定选择器的多个元素，可以使用page.$$()创建一个ElementHandle数组，然后使用elementHandle.click()：

分别单击

const example = await page.$$('[data-test-foo4="true"]');

await example[0].click();
await example[1].click();
await example[2].click();

这篇关于木偶人获取具有相同选择器的元素列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！