单击 puppeteer 中的元素后加载页面

Question

我有一个使用 puppeteer 加载的页面，并且我有在此页面中呈现的元素列表。可以单击每个元素，单击时它将扩展元素并添加具有更多数据的附加元素。有点像手风琴。我怎样才能让它发挥作用？我尝试了几件事，例如：

async function getSite(url) {
  const browser = await puppeteer.launch();

  const page = await browser.newPage();
  await page.goto(url, { waitUntil: "networkidle0" });

  const parentElements = await page.$$(".feeditem");
  await Promise.all(parentElements.map(parentElement => parentElement.click()));

  await page.waitForFunction(
    parentNumber =>
      document.querySelectorAll(".accordion_opened").length === parentNumber,
    { timeout: 20000 },
    parentElements.length
  );

  await page.waitFor(5000);

  const elementsExtcArr = await page.evaluate(() => {
    let elements = Array.from(document.querySelectorAll(".accordion_opened"));
    const elementsExtc = elements.map(i => i.innerHTML);

    return elementsExtc;
  });

  console.log(elementsExtcArr);
  await browser.close();
}

getSite(url);

但这些都不起作用。我仍然获得点击事件之前的页面。任何想法？

Answer 1

尝试在浏览器上下文中执行所有操作：

await page.evaluate(() => {
  for(let el of [...document.querySelectorAll('.feeditem')]){
    el.click()
  }
})

Answer 2

你可以先试试这个：

const elements = await page.$$(".feeditem");
await Promise.all(elements.map(element => element.click()));

let site = await page.evaluate(
  () => document.querySelector("body").innerHTML
);

如果这没有帮助（例如，如果每次点击都会发送一个 XHR 请求并且您需要等待更多时间），您可以添加一个page.waitForFunction()，如下所示：

const parentElements = await page.$$(".feeditem");
await Promise.all(parentElements.map(parentElement => parentElements.click()));

await page.waitForFunction(
  parentNumber => document.querySelectorAll('.accordion_opened').length === parentNumber,
  { timeout: 0 },
  parentElements.length
);

let site = await page.evaluate(
  () => document.querySelector("body").innerHTML
);