puppeteer's setContent 函数不对静态文件发出网络请求

Question

我当前正在尝试弄清楚如何在Puppeteer浏览器中渲染React应用程序，以便我可以在将来进行屏幕截图并执行视觉回归测试。我看到的大多数方法是在请求某个端点时启动Express服务器并在HTML页面上使用HTML页面。但是，如果可能的话，我想避免启动服务器，并希望在puppeteer浏览器中使用ReactDom.render之类的东西来渲染它，就像React一样。

到目前为止，我已经尝试创建React应用程序的构建，然后使用Puppeteer的Page.setContent API将构建索引的index.html直接渲染到Puppeteer浏览器。但是，当我这样做时，浏览器不会在屏幕上渲染任何内容，也不会对静态文件提出网络请求。

这就是Puppeteer中的样子：Puppeteer浏览器

这是page.setContent的方法：

const buildHTML = await fs.readFileSync('build/index.html', 'utf8');
// create a new browser tab
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
// set page's html content with build's index.html
await page.setContent(buildHTML);
// take a screenshot
const contentLoadingPageScreenshot = await page.screenshot({fullPage: true});

另外，如果有人知道一种更好的方法来运行图像快照测试而不必启动服务器，请告诉我。谢谢。

Answer 1

with ref：puppeteer doc，您可以为setContent提供等待网络请求

的选项

await page.setContent(reuslt, {
    waitUntil: ["load","networkidle0"]
});