web-dev-qa-db-ja.com

同じセレクタで要素のリストを取得する操り人形師

背景：

NodeJS/CucumberJS/Puppeteerを使用して、emberJSソリューションのエンドツーエンドの回帰テストを構築します。

問題：

同じセレクターを持つ複数の動的要素がある場合に、要素の1つのtextContentを選択（page.click）および取得しますか？ （私の場合、セレクタ= [data-test-foo4 = "true"]が同じ4つの要素があります）

私はそれを知っています：

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);

しかし、それは私に「テキスト=未定義」を与えます

また、次のとおりです。

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

そのセレクターで最初の要素を選択しますが、そのセレクターで次の要素を選択するにはどうすればよいですか？

javascriptnode.jsgoogle-chrome-devtoolspuppeteer
6
Huckleberry Carignan

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();
_
11
Grant Miller