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

您可以先尝试一下：

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

Answer 2

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

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

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

2 个答案: