如何正确使用 Testcafé 截取整页屏幕截图？

如何解决如何正确使用 Testcafé 截取整页屏幕截图？

我们正在尝试设置屏幕截图测试，通过将屏幕截图与预期的一组屏幕截图进行比较来自动化 UI/布局回归测试。我们正在为此使用 testcafé，但是当滚动条开始用于整页固定宽度屏幕截图时，我们正在挣扎：

const testcafe: TestController;
await testcafe
  .resizeWindow(1024,768)
  .takeScreenshot({
    fullPage: true
  });

这将生成宽度为 1003 像素（不是 1024 像素！）和高度为 1546 像素的屏幕截图。尽管如此，屏幕截图仍然包含垂直滚动条，这肯定不是巧合 21px 宽。它既不是整页，因为页面底部也缺少很少的像素，这很可能实际上会导致垂直滚动条。

当尝试通过添加额外像素（准确地说是 21 个像素）来解决减小的宽度时，屏幕截图的宽度确实为 1024 像素，并且高度略微减小了 1510 像素（因为页面上的某些内容不再需要包装）。它仍然缺少屏幕截图底部的部分，并且仍然有一个滚动条。

const testcafe: TestController;
await testcafe
  .resizeWindow(1024+21,768)
  .takeScreenshot({
    fullPage: true
  });

现在变得有点奇怪：刚才描述的行为一直持续到 1024+21+20 像素的宽度。屏幕截图的宽度为 (1024-21) +21+20 像素，高度为 1510 像素和滚动条。从 1024+2*21 开始虽然垂直滚动条消失了，但屏幕截图也在底部完成，1510px 作为正确的高度（因为页面上的其他东西不再需要换行） - 但不幸的是我确实有屏幕截图的宽度为 1045 像素，但不是预期的 1024 像素宽度。

如果我指定宽度为 1024 像素的 resizeWindow，如果它包含滚动条，我确实希望屏幕截图与该宽度完全相同。如果 testcafe 认为它必须在没有滚动条的情况下截取屏幕截图并将屏幕截图缩小到 1003px 的宽度，这对我来说也很好 - 但在这里我想它以某种方式考虑了滚动条，但实际上仍然没有将其切断。

内容不需要768px高度的页面的相同机制，换句话说没有滚动条开始，屏幕截图的宽度为1024px，没有任何“更正”。

相关的几个版本：

• 节点：v14.16.0
• testcafe：1.10.1
• 浏览器：在 Windows 10 上运行的 Chrome 89.0.4389.72

你还有什么想法吗？