时间戳

首页 > 解决方案 > Puppeteer 在屏幕截图导致片状视觉差异测试之前调整大小

javascript - Puppeteer 在屏幕截图导致片状视觉差异测试之前调整大小

问题描述

我正在使用 BackstopJS 进行视觉回归测试。Backstop 使用 Puppeteer 作为测试引擎。一些截图不一致，因为 Puppeteer 截取屏幕时正在调整视口的大小。每当调整视口大小时，我的应用程序都会显示动画。有没有办法解决？

我已经尝试增加窗口和视口的大小，以便没有元素在屏幕外并且 Puppeteer 不需要调整窗口大小。我还尝试将窗口上的滚动高度设置为 x 和 y 的 0。

标签： javascriptscreenshotpuppeteerbackstop.js

解决方案

Backstop.js 有两个选项readyEvent，delay你可以设置这些选项来帮助解决 CSS 动画中的不一致问题。它们可以单独使用或组合使用，以确保您的动画在 backstop.js 截屏之前有时间完成。

David Walsh 有一篇很棒的博客文章，介绍了如何使用 readyEvent 触发 backstop.js。他的例子是基于一个 Angular 应用程序，但原理是一样的。

他基本上是在动画完成后向控制台记录一条消息。Backstop.js 会一直等待，直到在控制台中看到消息，然后再运行。

在我的例子中，当用户滚动到页面底部时，我的元素会从侧面滑入。所以我写了一点 javascript 来检测用户（或 backstop.js 渲染引擎）何时滚动到屏幕底部。

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        console.log("bottom");
    }
 });

一旦到达屏幕底部，我console.log("bottom")会告诉 backstop.js 它可以继续。因此，在我的backstop.json文件中，我的 readyEvent 场景看起来就像"readyEvent": "bottom"“底部”一词对应于我的 console.log 消息的位置。

注意：您可以让您的 console.log 消息说出任何内容（David 使用“backstop.ready”），只要该消息与您的 backstop.json 场景部分中的 readyEvent 值匹配。

如果您在运行测试时遇到终端超时问题，请尝试将 readyEvent 值设置回空字符串以查看 readyEvent 是否导致问题。如果是这样，请在 github 上阅读此问题。

推荐阅读