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

我目前正在尝试弄清楚如何在伪造的浏览器中渲染我的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});

此外，如果有人知道无需启动服务器即可运行图像快照测试的更好方法。谢谢。

使用参考：puppeteer doc，您可以放置​​setContent的选项以等待网络请求

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

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

我目前正在尝试弄清楚如何在伪造的浏览器中渲染我的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});

此外，如果有人知道无需启动服务器即可运行图像快照测试的更好方法。谢谢。

使用参考：puppeteer doc，您可以放置​​setContent的选项以等待网络请求

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