Simon Madine 正在领导被忽视的 CSS 测试领域。据我所知,以下是目前的情况。
测试类型
CSS 测试有四种不同的类别
语法
你的 CSS 中是否存在文字错误?
项目
此 CSS 是否符合您设定的标准?
参考
渲染后的页面是否符合您的预期?包括跨浏览器兼容性。
回归
执行操作后,页面是否符合您的预期?
我个人最感兴趣的是回归测试。例如:我推送了生产代码,其中更改了页眉的 z-index。我手动测试了一些内容,看起来还不错。但是,有一种类型的警报消息可能会显示,而我忘记测试它,结果该消息的 z-index 较低,完全被页眉隐藏了。我们绞尽脑汁试图找出消息为何不显示的原因。通过回归测试,可以声明要在页面上执行的操作,然后测试事物是否按预期显示。
资源
Simon 是这方面的专家,所以请了解更多信息并了解有哪些工具可以帮助您处理他工作中的不同类型。
- 文章:4 种自动 CSS 测试工具
- 网站:csste.st
- 演示文稿:“自动化测试与橙红色的故事”。
回归测试工具和信息
- 自动化 CSS 回归测试 作者:Garris Shipon(关于 BackstopJS)
- PhantomCSS
- SUCCSS:“易于安装、易于使用的 CSS 回归测试工具。”
Simon 本周在 CSS 峰会 (http://environmentsforhumans.com/2013/css-summit/) 上做了一个关于自动化 CSS 测试的精彩演讲。他在这方面绝对做出了伟大的工作!
嘿,Chris,感谢你的链接。我一直想开始进行自动 CSS 测试,但一直没有找到一个好的工具汇总——直到现在!你尝试过其中一个(或多个)工具吗?我想在我的下一个客户项目中尝试一下 PhantomCSS(或 GhostStory)。也许还可以将其与 Grunt 集成。
使用 SaSS,然后你就可以免费进行 CSS 测试了:D
感谢你的链接,如果像 Sublime Text 2 和 3 这样的某些编辑器能够集成这些工具,那就太好了。Codekit 也是如此……
@cvb:我正在使用 Sass 和 Compass,它没有测试 css 吗?如果你在 scss 上犯了错误,它也会在你的 scc 文件中吗?
BBC 刚刚发布了 这篇文章,其中他们谈到了他们自己的 CSS 测试工具:Wraith。它默认使用 PhantomJS 捕获图像,并使用 Imagemagick 通过生成差异来比较两个版本。
“4 种自动 CSS 测试工具”文章的链接已过时。这是新的链接:http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777
我写了一篇 文章,介绍如何将 PhantomCSS 回归测试集成到您的日常 git 工作流程中。我们使用 JIRA 故事作为测试 URL 的来源,但它可以是任何具有 API 的内容。Git Hooks 用于运行测试并提供有关提交的即时反馈。
http://chris.gunawardena.id.au/software-development/automated-regression-testing-of-jira-stories/