как перебирать divs с тем же классом с помощью Puppeteer

#node.js #puppeteer

#node.js #puppeteer

Вопрос:

Используя puppeteer для очистки страницы, я могу получить содержимое из списка divs с тем же классом и вложенным списком divs внутри них, т.е.

 <div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
    ...
</div>
...
  

теперь моя проблема в том, что мне нужно повторить список и запустить страницу.нажмите () на divs дочернего класса, чтобы открыть лайтбоксы, выберите элемент в лайтбоксе, который нужно щелкнуть, а затем запустите page.pdf() .

В настоящее время у меня есть цикл for для divs родительского класса и внутренний цикл for для divs дочернего класса. Я не уверен, как выбрать правильный div со значениями индекса цикла for, поскольку нет n-го класса и т. Д.

Я просто хочу запустить что-то вроде

 for (let a = 0; a < data.length; a  ) {
    for (let b = 0; b < data[a].length; b  ) {
        await page.click('.parent[a] .child[b]');
        // other code here...
    }
}
  

чтобы открыть лайтбокс, затем

 await page.waitForSelector('.ReactModal')
  

чтобы очистить HTML-код лайтбокса и выполнить

 await page.pdf({
    path: dir   "/"  filename, 
    format: 'A4' 
});
  

Любые рекомендации относительно возможных подходов будут оценены.

Комментарии:

1. вы также можете запустить javascript на странице, подобной этой, например, await page.evaluate(_ => { var childs = document . querySelectorAll(‘.child’); [].forEach.call(дочерние элементы, функция(el){ el.click(); }); });

Ответ №1:

Если я правильно понимаю, вы можете попробовать что-то вроде этого:

 for (const parent of await page.$$('.parent')) {
  for (const child of await parent.$$('.child')) {
    await child.click();
    await page.waitForSelector('.ReactModal'); // maybe check if this is not the same lightbox
    await page.pdf(/*...*/);
  }
}