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

背景：

使用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();