Puppeteer Получение списка элементов с одинаковым селектором - PullRequest
Новая
       6

Puppeteer Получение списка элементов с одинаковым селектором

0 голосов
/ 07 сентября 2018

Справочная информация:

Использование 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"]');

выбирает первые элементы этим селектором, но как я могу выбрать следующие элементы этим селектором?

1 Ответ

0 голосов
/ 07 сентября 2018

Вы можете использовать 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();
...