本文介绍了木偶人获取具有相同选择器的元素列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景：
使用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();
这篇关于木偶人获取具有相同选择器的元素列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！