Кукольник querySelectorAll не получает элементы правильно

Question

Я использую Puppeteer и пытаюсь использовать document.querySelectorAll, чтобы получить список элементов, чтобы затем l oop закончить и что-то сделать, однако кажется, что что-то не так в моем коде, он либо ничего не возвращает, undefined или пустое {} несмотря на то, что мои элементы находятся на странице, мои JS:

let elements = await page.evaluate(() => document.querySelectorAll("div[class^='my-class--']"))
for (let el of Array.from(elements)) {
  // do something
}

что не так с моими elements и page.evaluate здесь?

Answer 1

Насколько я понимаю, кукловод возвращает все HTML в виде гигантской нити. Это связано с тем, что Node не запускается в браузере, поэтому HTML не анализируется. Таким образом, селекторы DOM не будут работать.

Что вы можете сделать, чтобы решить эту проблему, так это использовать модуль Cheerio. js, который позволяет захватывать элементы с JQuery как если это разобранный DOM.

Answer 2

Поскольку puppeteer возвращает все HTML в виде строки, вы можете использовать DOMParser, как показано в следующем примере.

let doc = new DOMParser().parseFromString('<template class="myClass"><span  class="target">check it out</span></template>', 'text/html');
let templateContent = doc.querySelector("template");
let template = new DOMParser().parseFromString(templateContent.innerHTML, 'text/html');
let target = template.querySelector("span");
console.log([templateContent,target]);