我可以在我的响应设计中测试视觉回归吗？ [英] Can I test for visual regressions in my responsive design?

问题描述

我的Ruby on Rails网站有一个响应式设计。我可以写视觉回归测试吗？例如，我的网站适合iPhone 5的视口，没有水平滚动。如果没有设置 offset-x：hidden ，并且我无意地将图像的宽度扩展到视口之外，我的网站将有水平滚动（如下图所示）。这是不希望的。一个视觉回归测试方法，如 assert_horizo​​ntal_scroll（0）或 assert_page_width ==480px，：viewport_width => 480px存在？

My Ruby on Rails site has a responsive design. Can I write tests for visual regressions? For example, my site fits in an iPhone 5's viewport without horizontal scrolling. If offset-x: hidden isn't set, and I unintentionally extend the width of an image past the viewport, my site will have horizontal scrolling (pictured below). This is undesirable. Does a visual regression test method such as assert_horizontal_scroll(0) or assert_page_width == "480px", :viewport_width => "480px" exist?

+---------+      +---------+
| PAGE    |      | PAGE    |
| +-----+ |      | +---------+
| | IMG | |      | |   IMG   |
| +-----+ |      | +---------+
|         |      |         |
+---------+      +---------+

编辑：让我尝试澄清：我目前在全屏浏览器窗口中预览我的样式的更改。如果我进行的更改可能会影响我的网站在移动设备上的显示方式，我会调整浏览器窗口的大小以匹配移动设备的尺寸，然后查看一切是否正常。我想通过单元测试在小屏幕上自动执行查看一切是否正常的过程，以便我不必将浏览器调整到每个设备宽度。

Let me try to clarify: I currently preview changes to my styles in a fullscreen browser window. If I make changes that could affect the way my site appears on mobile screens, I'll resize that browser window to match the dimensions of a mobile device, then see if everything looks ok. I want to automate the process of "seeing if everything looks ok" on small screens via a unit test so that I don't have to resize my browser to each device width.

编辑：另一个例子：我想要一个元素是50％透明，我设置 opacity：.5 。我想测试元素的不透明度，所以如果后来的CSS样式无意中将该元素的不透明度设置为1，我会知道，因为我的测试将失败。或者如果特定的浏览器（早期IE）不支持透明度，测试也会失败。

Another example: I want an element to be 50% transparent, and I set opacity: .5. I want to test the element's opacity, so that if later CSS styles unintentionally set that element's opacity to 1, I'll know because my test will fail. Or if a particular browser (early IE) doesn't support opacity, the test will also fail.

推荐答案

• PhantomCSS 是一个用于使用PhantomJS自动化视觉回归测试的CasperJS
  模块和
  Resemble.js。用于测试Web应用程序，直播风格指南和响应式
  布局。

  • PhantomCSS is "a CasperJS module for automating visual regression testing with PhantomJS and Resemble.js. For testing Web apps, live style guides and responsive layouts."

    CasperJS 是PhantomJS的导航脚本和测试实用程序，

    CasperJS "is a navigation scripting and testing utility for PhantomJS, written in JavaScript. It allows us to test websites a lot like PHPUnit or JUnit allow us to test our code."

    Wraith 是一个用于测试CSS更改，无论是故意还是无意的工具。 用于比较页面的屏幕截图，在拉取请求级别和合并到主页中时。

    Wraith is a tool for "testing CSS changes, both deliberate and unintentional." It's used "to compare screenshots of pages, at the pull request level and when merged into master."

    这篇关于我可以在我的响应设计中测试视觉回归吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！