testing - 如何正确使用 Testcafé 截取整页截图？

Question

我们正在尝试设置屏幕截图测试，通过将屏幕截图与预期的一组屏幕截图进行比较来自动化 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 px，高度为 1510px 和滚动条。从 1024+2*21 开始，虽然垂直滚动条消失了，但屏幕截图在底部也是完整的，正确的高度为 1510px（同样页面上的其他内容不必再换行了） - 但不幸的是我有一个宽度为 1045 像素的屏幕截图，不是预期的 1024 像素宽度。

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

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

几个版本（如果相关）：

• 节点：v14.16.0
• 测试咖啡馆：1.10.1
• 浏览器：在 Windows 10 上运行的 Chrome 89.0.4389.72

你有什么进一步的想法吗？

标签： testingautomationautomated-testse2e-testingtestcafe