如何强制 puppeteer 等待 XMLHttpRequests 结束等，并获得 DOM 的完成版本？

Question

我目前有一个通过XMLHttpRequest 动态加载一些元素的网页。这是其中的 javascript 部分的样子：

function loadHtmlSnippet(filename, callback) {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            parser = new DOMParser()
            minidoc = parser.parseFromString(xmlHttp.responseText, "text/html")
            minibody = minidoc.getElementsByTagName('body')[0]
            callback(minibody)
        }
    };

    xmlHttp.open("GET", 'http://localhost:3000/' + filename, true);
    xmlHttp.send(null);
}

这是通过拨打电话来使用的......

loadHtmlSnippet('my_extra_html_piece.html', my_appropriate_callback)

...其中my_appropriate_callback 是一个将my_extra_html_piece.html DOM 插入到主页DOM 中某个适当位置的函数。

到目前为止一切顺利，它有效！

接下来，在所有加载结束后，我想以字符串的形式获得完成的 DOM。我一直在尝试为此使用 Chromium puppeteer。这是我的 puppeteer node.js 脚本：

const express = require('express')
const puppeteer = require('puppeteer')

url = process.argv[2]

async function ssr(url) {
    const browser = await puppeteer.launch({
        headless: true
    });
    const page = await browser.newPage();
    await page.goto(url, {
        waitUntil: 'networkidle0'
    });
    html = await page.content();
    await browser.close();
    return html;
}

async function start() {
    html = await ssr(url)
    console.log(html)
}

start()

（我基本上是从木偶教程中剪切粘贴的。）

唉，在完成一些 javascript 处理之后，上面的脚本返回给我 DOM，但在 XMLHttpRequests 完成加载并将它们各自的 HTML 插入到主 DOM 之后没有。

有没有办法强制 puppeteer 在保存渲染的 html 并关闭之前等待 javascript 真正完成旋转？

====

除此之外：我对this question 中讨论的序列化方法有一些运气，但是当我将 puppeteer 用于其他事情时，如果我也可以通过 puppeteer 完成这部分 DOM 序列化，那就太好了。 （所以这个问题是特定于 puppeteer 的。）

Answer 1

等待 page.waitForNavigation({ waitUntil: 'domcontentloaded' });