CSS回归工具？

Question

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

理想情况下，该工具可以抓取网站（甚至是本地）并抓取每个页面的快照并将其存储在单个存储库中。

第二次运行时，它会显示自上次运行以来视觉上不同的页面。

更好：

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

Answer 1

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

如果您可以使用旧的WebKit作为唯一的测试UA，那么CSS regression testing使用PhantomCSS进行了一次精彩的写作。他们的基本示例提供了原始问题所需的内容：两次提交之间的视觉差异。

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

Answer 2

我知道这个问题已经发布了一段时间，但我想提一下bbc-news所谓的一个新的CSS回归工具。

http://github.com/bbc-news/wraith

它使用了phantomJS和imagemagick等工具。

http://responsivenews.co.uk/post/56884056177/wraith

Answer 3

结帐Browser Shots。这是一项免费服务。

对于每天作为免费用户运行的测试数量，存在一些限制。但不像Litmus;您可以在所有支持的浏览器上运行测试--Litmus只允许免费用户在Internet Explorer 7和Mozilla Firefox 2上测试他们的网站。

Answer 4

我正在开发一个名为SUCCSS的CSS回归测试工具，它是一个npm全球开源：https://github.com/B2F/Succss。 Atm，您可以在那里阅读其完整文档：http://succss.ifzenelse.net

Answer 5

查看Litmus。

它会抓取您的网站并在您想要的每个浏览器附近抓取屏幕截图。

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

Answer 6

您所描述的正是Mogotest所做的。我们可以登录您的网站，截取您已配置的所有网页的屏幕截图，并使用Web Consistency Testing的原则进行自动比较。

我们还会对历史记录进行全面跟踪，以便我们可以准确地告诉您什么时候发生了故障（以及您当时的网站所看到的内容），甚至更酷，我们可以检测到您何时修复了某些内容。最后，我们在每次测试运行时对您的代码进行快照，以便我们可以准确地向您显示每个问题的更改内容。

对于这个答案的自我推销性质感到抱歉。我只想彻底解决你正在寻找的问题。