我可以在我的响应式设计中测试视觉回归吗？答案

【问题标题】：Can I test for visual regressions in my responsive design?我可以在我的响应式设计中测试视觉回归吗？
【发布时间】：2013-06-05 04:31:09
【问题描述】：

我的 Ruby on Rails 网站采用响应式设计。我可以为视觉回归编写测试吗？例如，我的网站适合 iPhone 5 的视口而无需水平滚动。如果offset-x: hidden 未设置，并且我无意中将图像的宽度扩展到视口之外，我的站点将具有水平滚动（如下图所示）。这是不可取的。是否存在assert_horizontal_scroll(0)或assert_page_width == "480px", :viewport_width => "480px"等视觉回归测试方法？

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

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

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

【问题讨论】：

我没有尝试过这些，但PhantomCSS 或CasperJS 可能是我要找的。span>

标签： css ruby-on-rails unit-testing testing responsive-design

【解决方案1】：

PhantomCSS 是“一个 CasperJS 使用 PhantomJS 自动化视觉回归测试的模块和类似.js。用于测试 Web 应用程序、现场风格指南和响应式布局。”
CasperJS“是一个用于 PhantomJS 的导航脚本和测试实用程序，用 JavaScript 编写。它允许我们测试网站，就像 PHPUnit 或 JUnit 允许我们测试代码一样。”
李>
Wraith 是一个用于“测试有意和无意的 CSS 更改”的工具。它用于“在拉取请求级别和合并到主页面时比较页面的屏幕截图。”

【讨论】：

【解决方案2】：

我不完全理解你的问题。您是想使图像适应分辨率而不管它的大小还是要裁剪它？

如果您想要响应式图片，只需使用 css：

http://jsfiddle.net/csswizardry/eqE9J/

img{
    max-width:100%;
    height:auto;
    display:block;
}

【讨论】：

谢谢，但这不是我要问的。查看我更新的问题。