7

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

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

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

更好的是：

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

6 回答 6

6

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

如果您对旧的 WebKit 作为您唯一的测试 UA 感到满意，这里有一篇关于使用PhantomCSS进行CSS 回归测试的精彩文章。他们的基本示例准确地提供了原始问题所需的内容：两次提交之间的视觉差异。

对于不需要编码（仅 YAML 配置）的更简单工具，我将人们指向 Wraith 的频率高于 PhantomCSS。如果您喜欢 Wraith 并且不想编写 Casper 代码，请给 @ericcraio 的答案投票。

于 2013-06-23T15:12:05.550 回答
2

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

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

它利用了 phantomJS 和 imagemagick 等工具。

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

于 2013-08-20T17:25:54.560 回答
1

查看浏览器截图。这是一项免费服务。

作为免费用户，您每天可以运行多少测试有一些限制。但与石蕊不同；您可以在所有支持的浏览器上运行测试——Litmus 只允许免费用户在 Internet Explorer 7 和 Mozilla Firefox 2 上测试他们的网站。

于 2010-03-17T12:58:46.877 回答
1

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

于 2015-02-23T22:42:35.133 回答
0

查看石蕊试纸。

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

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

于 2010-03-17T12:59:03.523 回答
0

您所描述的正是Mogotest所做的。我们可以登录您的站点，为您配置的所有页面截取屏幕截图，并使用Web 一致性测试的原则进行自动比较。

我们还保留完整的历史记录，以便我们可以准确地告诉您何时发生故障（以及您的网站当时的外观），甚至更酷的是，我们可以检测您何时修复了某些问题。最后，我们会在每次测试运行时对您的代码进行快照，以便我们可以准确地向您展示每个问题的变化。

很抱歉这个答案的自我推销性质。我只是想彻底解决您要查找的内容。

于 2013-01-22T20:29:36.463 回答