如何强制 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 是在主页 DOM.

的某个适当位置插入 my_extra_html_piece.html DOM 的函数

目前一切顺利，有效！

接下来，我想拿到完成的 DOM，以字符串的形式，在所有加载结束之后。为此，我一直在尝试使用 Chromium 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()

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

唉，上面的脚本 returns 我 DOM 在一些 javascript 处理完成之后，但不是在 XMLHttpRequest 完成加载和它们各自的插入主 DOM.

的 HTML

有什么方法可以强制人偶操纵者等待 javascript 真正完成旋转后再保存渲染的 html 并关闭？

====

旁白：我在 this question 中讨论的序列化方法上有些运气，但是当我使用 puppeteer 做其他事情时，如果我能做到 DOM 的这一部分就好了也可以通过 puppeteer 进行序列化。（所以这个问题是特定于木偶操作者的。）

Answer 1

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

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

how to force puppeteer to wait for XMLHttpRequests to end, etc, and get finished version of DOM?

javascript

dom

puppeteer