CSS回归工具？

Question

我正在寻找一个用于CSS重构的可视化回归测试工具,并查看网站中是否存在任何意外的级联行为.

理想情况下,该工具可以抓取网站(甚至本地)并抓取每个页面的快照并将其存储在单个存储库中.

第二次运行时,它将显示自上次运行以来视觉上不同的页面.

更好的是:

1. 如果它可以显示页面的2版本的重叠XOR视图.
2. 比较不同浏览器的渲染结果(几乎就像一个自动化的Microsoft Expression Web比较功能).

Answer 1

我目前最喜欢的是WebDriverCSS与BrowserStack Automate API的结合.这对工具允许在BrowserStack支持的各种设备上进行多平台,多浏览器回归测试.它需要编写代码,但多比势必幻影或Slimer任何解决方案更加全面.

如果您可以使用旧的WebKit作为唯一的测试UA,那么这里是使用PhantomCSS进行CSS回归测试的精彩文章.他们的基本示例提供了原始问题所需的内容:两次提交之间的视觉差异.

对于一个不需要编码的简单工具(只有YAML配置),我比PhantomCSS更频繁地指向Wraith.如果你喜欢Wraith并且不想写Casper代码,请给@ ericcraio的答案投票.

Answer 2

看看石蕊。

它会抓取你的网站并截取屏幕截图，几乎所有你想要的浏览器都有。

除了核心功能之外，Litmus还允许您跟踪错误、登录私人站点，并允许您发布测试的兼容性报告。