1

我的 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，测试也会失败。

4

2 回答 2

3

  • PhantomCSS是“一个 CasperJS 模块，用于使用 PhantomJS 和 Resemble.js 自动进行视觉回归测试。用于测试 Web 应用程序、实时风格指南和响应式布局。”

  • CasperJS “是一个用于 PhantomJS 的导航脚本和测试实用程序，用 JavaScript 编写。它允许我们测试网站，就像 PHPUnit 或 JUnit 允许我们测试我们的代码一样。”

  • Wraith是一个用于“测试有意和无意的 CSS 更改”的工具。它用于“在拉取请求级别和合并到主页面时比较页面的屏幕截图”。

于 2013-09-14T01:57:38.310 回答
0

我不完全理解你的问题。无论图像大小，您是否尝试使图像适合分辨率，还是要裁剪它？

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

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

img{
    max-width:100%;
    height:auto;
    display:block;
}
于 2013-06-05T05:20:23.647 回答