伪造者的setContent函数未对静态文件发出网络请求

Question

我目前正在尝试找出如何在伪造的浏览器中渲染我的React应用程序，以便将来可以截取屏幕截图并进行视觉回归测试。我看到的大多数方法都是通过启动Express服务器并在请求某个终结点时提供html页面来完成的。但是，我想避免在可能的情况下启动服务器，并希望在操纵up的浏览器中使用类似ReactDOM.render之类的东西来像React那样渲染它。

到目前为止，我已经尝试创建React应用程序的构建，然后使用puppeteer的page.setContent api将构建的index.html直接呈现给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

对于参考文献：puppeteer doc，您可以放置​​setContent选项以等待网络请求

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