web-dev-qa-db-fra.com

Marionnettiste obtenant la liste des éléments avec le même sélecteur

Contexte:

Utilisation de NodeJS/CucumberJS/Puppeteer pour créer un test de régression de bout en bout pour une solution emberJS.

Problème:

Sélection (page.click) et obtention de textContent d'un des éléments lorsqu'il y a plusieurs éléments dynamiques avec le même sélecteur? (Dans mon cas, j'ai 4 éléments avec le même sélecteur = [data-test-foo4 = "true"])

Je sais qu'avec:

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

Je peux obtenir le texte du premier élément, mais comment sélectionner les autres éléments avec le même sélecteur? J'ai essayé:

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

mais ça me donne 'text = undefined'

En outre, les éléments suivants:

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

sélectionne les premiers éléments avec ce sélecteur, mais comment puis-je sélectionner le suivant avec ce sélecteur?

javascriptnode.jsgoogle-chrome-devtoolspuppeteer
6
Huckleberry Carignan

Vous pouvez utiliser Array.from() pour créer un tableau contenant toutes les valeurs textContent de chaque élément correspondant à votre sélecteur:

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

Si vous devez cliquer sur plusieurs éléments contenant un sélecteur donné, vous pouvez créer un tableau ElementHandle à l'aide de page.$$() et cliquer chacun un utilisant 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