无法使用 puppeteer 获取页面的完全加载的 html

Question

我正在尝试获取 this page 的完整 html。它有一个加载缓慢的电子表格。在截取页面的屏幕截图时，我可以获取包含的电子表格。但是我无法获得电子表格的 html。 document.body.outerHTML 不包括电子表格的 html。就好像 puppeteer 在电子表格加载之前仍在查看页面。

如何获取完整加载的 HTML，包括电子表格的 HTML？

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto("http://www.electproject.org/2016g", {
    timeout: 11000,
    waitUntil: "networkidle0",
  });
  await page.setViewport({
    width: 640,
    height: 880,
    deviceScaleFactor: 1,
  });
  await page.screenshot({ path: "buddy-screenshot.png", format: "A4" }); // this screenshot displays the spreadsheet
  let html = await page.evaluate(() => document.body.outerHTML); // this returns the html excluding the spreadsheet
  await browser.close();
})();

Answer 1

电子表格在 iframe 中，因此您需要先获取 iframe：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto("http://www.electproject.org/2016g", {
    timeout: 11000,
    waitUntil: "networkidle0",
  });
  await page.setViewport({
    width: 640,
    height: 880,
    deviceScaleFactor: 1,
  });

  const spreadsheetFrame = page.frames().find(
    frame => frame.url().startsWith('https://docs.google.com/spreadsheets/')
  );

  let spreadsheetHead = await spreadsheetFrame.evaluate(
    () => document.body.querySelector('#top-bar').innerText
  );

  console.log(spreadsheetHead); // 2016 November General Election : Turnout Rates

  await browser.close();
})();