自动测试CSS和HTML前端编码

Question

我是一名编写CSS,HTML和Javascript的前端开发人员(按此顺序),我所做的大部分工作都是设计领导.虽然我用CSS创建的设计质量是主观的,但是大部分编码都是纯粹的功能/布局,我对任何自动化测试页面感兴趣.

我的问题可以分为两部分

1. 有没有人有自动测试CSS或HTML的任何现有技术或建议,特别是在跨浏览器兼容性方面？

2. 由于CSS大致可分为控制布局的属性和控制设计的属性,因此自动测试仅适用于 布局(例如,不能自动且有价值地测试颜色是否正确)？如果是这样,哪种CSS值可能适合布尔验收测试？

以下是我可以测试的布尔值布局值的初始示例 - 必须有其他值吗？

• 弹出窗口是否出现在其他内容之上(z-index)
• 页脚是否清除所有其他内容(浮动)

谢谢你的帮助.问题的第三部分当然是"我是否在浪费时间沿着这条路走下去？".

*****编辑*****

我发现这篇文章询问了我提出的相同问题,但更深入,也许更有说服力.

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

继续前进我试图从我的工作中分离一些例子,其中CSS单独导致功能错误,但到目前为止我发现的那些是JS 和 CSS组合的错误.我仍然想自动测试这些类型的错误,但是感谢使用javascript它超出了我原来的问题的范围.

*****编辑2*****

我已经写过关于如何解决这个问题的博客,可以在这里找到:

http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing - %E2%80%93最构建/

Answer 1

看看Selenium - 它是一个基于浏览器的自动化测试工具.我认为这就是你要找的东西.

它适用于所有浏览器(它在Firefox中有一个用于创建测试脚本的IDE,但脚本本身可以在任何浏览器中运行)

它允许您在脚本期间的任何时刻针对预期输出测试DOM的内容等.

Answer 2

w3 验证和Adob​​e 浏览器实验室是我可以为这个问题提供的最佳解决方案。当我做 UI 布局和设计（读=cutup猴子）时，他们是我最好的两个朋友。

确实没有办法自动测试某些东西的外观。因此，您又回到了要么亲自目视检查所有内容，要么众包（或内包）测试人员为您做同样的事情。这并不有趣，但它让我们前端人员继续工作。

好消息是，许多浏览器共享渲染引擎。因此，如果您在 Chrome 上测试正确，那么您可以肯定在 Safari 中也能顺利进行。检查一下 Firefox 和 IE，你的问题就已经解决了 90%。然后，确定您（或您的老板）想要有多挑剔并进行相应的测试。