CSS和HTML前端代码的自动化测试

Question

我是一个前端开发人员，编码CSS，HTML和Javascript (按这个顺序)，我所做的大部分工作都是以设计为主导。虽然我用CSS创建的设计的质量是主观的，但是大部分编码都是纯功能/布局的，我对自动测试页面的任何方式都感兴趣。

我的问题可以分为两部分

1. 有没有人有任何现有的技术或建议来自动测试CSS或HTML，特别是在跨浏览器兼容性方面？
2. 由于CSS可以大致分为控制布局的属性和控制设计的属性，自动测试是否仅适用于布局(例如，无法自动和有价值地测试颜色是否正确)？如果是这样的话，什么类型的CSS值可能适合布尔接受测试？

下面是可以测试的布尔布局值的初始示例--一定还有其他的吗？

• 弹出是否出现在其他内容(z索引)之上？
• 页脚是否清除所有其他内容(浮动)

谢谢你的帮助。问题的第三部分当然是“我在这条路上浪费时间吗？”

编辑*

我发现这篇文章问的问题和我问的一样，但更深入，也许更有说服力。

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

接下来，我试图从我的工作中分离出一些例子，在这些例子中，CSS本身就导致了函数错误，但是，到目前为止，我发现的都是JS、和 CSS合并的bug。我仍然想自动测试这类错误，但理解使用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-the-build/

Answer 1

看看硒 --这是一个基于浏览器的自动化测试工具。我想这就是你要找的。

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

它允许您在脚本期间的任意点根据预期的输出测试DOM等的内容。

Answer 2

如果您正在寻找用于回归测试的工具，请查看：

https://github.com/bfirsh/needle

它基本上是截图你选择的部分(检查他们的例子)，并比较他们。如果他们彼此太不一样，考试就会失败。它使用Selenium，所以您最好检查其他断言，如z-indize、字体大小等。

Answer 3

您也可以检查Nighwatch.js

Nightwatch.js是一种易于使用的基于Node.js的端到端(E2E)测试解决方案，适用于基于浏览器的应用程序和网站。它使用功能强大的W3C WebDriver API对DOM元素执行命令和断言。