Question

背景：

使用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 = undefined'

此外，以下内容：

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

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

Answer 1

您可以使用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] );

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

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

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

Answer 2

https://github.com/puppeteer/puppeteer/blob/v5.5.0/docs/api.md#frameselector-1

const pageFrame = page.mainFrame();
const elems = await pageFrame.$$(selector);

木偶使用相同选择器获取元素列表

2 个答案: