javascript - 是否可以在 percy 视觉测试中增加视口的宽度？

Question

我试图在 Percy 视觉测试中增加视口的大小，因为它不会截取整个页面的屏幕截图。我的窗口在 x 轴上有一个滚动条，Percy 没有截取整个页面的屏幕截图。

有可能做这样的事情吗？

page.viewport().width(1600);

Answer 1

添加.percy.yml具有以下内容的文件：

version: 1
snapshot:
  widths: [1600]

Answer 2

您可以查看更多视口如何工作：https ://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagesetviewportviewport 。

无论如何，这里有一个简短的代码可能会有所帮助

page.viewport({
  width: 1600,
});

或者您可以使用所需的视口宽度启动浏览器，这通常是我所做的：

const browser = puppeteer.launch({
  defaultViewport: {
    width: 1600,
    height: 1000, // using as an example, set the height you need as well to avoid unexpected behavior
  },
});