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

Question

我目前正试图弄清楚如何在 puppeteer 浏览器中呈现我的 React 应用程序，以便我可以截取屏幕截图并在将来执行视觉回归测试。我见过的大多数实现方式是通过启动一个快速服务器并在请求某个端点时提供 html 页面。但是，如果可能，我想避免启动服务器，并且可能希望在 puppeteer 浏览器中使用类似 ReactDOM.render 的东西来渲染它，就像 React 一样。

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

这是 puppeteer 中的样子： puppeteer browser

这是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

使用 ref:puppeteer doc，您可以设置 setContent 的选项以等待网络请求

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