2

我目前正在尝试弄清楚如何在 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});

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

4

1 回答 1

1

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

await page.setContent(reuslt, {
    waitUntil: ["load","networkidle0"]
});
于 2019-10-14T02:46:26.487 回答