在截图之前进行伪造者调整大小会导致片状视觉差异测试

Question

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

我尝试增加窗口和视口的大小，以使所有元素都不会出现在屏幕外，并且Puppeteer不需要调整窗口的大小。我还尝试过将x和y的窗口上的scrollheight设置为0。

Answer 1

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

David Walsh对于如何使用readyEvent触发backstop.js有很好的blog post知识。他的示例基于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消息与backstop.json场景部分中的readyEvent值匹配，您就可以使console.log消息说任何东西（David使用“ backstop.ready”）。

如果在运行测试时遇到终端超时问题，请尝试将readyEvent值重新设置为空字符串，以查看readyEvent是否引起问题。如果是这样，请在github上阅读this issue。