自动化测试CSS和HTML前端编码

Question

我是一名前端开发人员，主要编写CSS、HTML和Javascript代码（按照这个顺序），我做的工作大多是以设计为主导。虽然使用CSS创建的设计质量是主观的，但其中很多编码仅仅是功能性/布局性的，我对任何自动化测试网页的方法都感兴趣。

我的问题可以分成两部分：

1. 是否有人已经有了现有的技术或者建议来自动测试CSS或HTML，特别是关于跨浏览器兼容性的？

2. CSS可以大致分为控制布局和控制设计的属性两类，那么自动化测试只适用于布局（例如不能自动且有价值地测试颜色是否正确）吗？如果是这样的话，哪些CSS值可能适合进行布尔接受测试？

以下是我最初的布尔布局值示例，也许还有其他的呢？

• 弹出窗口是否在其他内容上面显示（z-index）
• 页脚是否清除所有其他内容（float）

感谢您的帮助。当然，问题的第三部分是“我走下这条路是否浪费了时间？”

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

我找到了这篇文章，它问了我所问的同样的问题，但更加深入和优美。

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-the-build/

- ajcw

---

是的，但如果您需要在10个浏览器（包括每个浏览器的不同版本）和3个不同的操作系统中测试所有内容是否看起来都很好，甚至还要在移动设备上进行测试呢？ 这并不像“打开页面并查看它的外观”那么简单。 更重要的是，您可能有3种不同的布局，不同风格的不同部分，并且您希望确保它看起来像您想要的那样。 我认为这对我来说是不可能的，但总会有更聪明的人在思考这种事情，也许其中一个人想出了一个很酷的解决方案。 - nerohc

Answer 1

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

它可以与所有浏览器一起使用（它在Firefox中有一个IDE，用于创建测试脚本，但脚本本身可以在任何浏览器中运行）

它允许您在脚本的任何时刻将DOM内容等与预期输出进行比较测试。

- Spudley

---

Selenium是一个相当不错的工具。虽然有一定的学习曲线，但并不太陡峭。 - Jack Marchetti

Selenium也慢得要命（这就是它的本质）。但是，结合一个能够操作页面的JavaScript系统，你可以得到一个非常快速的东西。我曾经使用Selenium加载了一个主要由JavaScript单元测试框架组成的项目，效果很好。我将其与持续集成系统（Jenkins）连接起来，这样就不必一直启动Windows虚拟机，就能发现各种奇怪的bug。 - Tristan Juricek

Answer 2

如果你正在寻找一款专门用于回归测试的工具，请查看：https://github.com/bfirsh/needle。它基本上会对你选择的部分（请查看它们的示例）进行截图并进行比较。如果它们之间的差异太大，测试将失败。它使用Selenium，所以你也可以检查其他断言，例如z-index、font-size等。

- Kevin Smith

Answer 3

您也可以查看Nighwatch.js Nightwatch.js是一个基于Node.js的易于使用的端到端（E2E）测试解决方案，适用于基于浏览器的应用程序和网站。它使用强大的W3C WebDriver API对DOM元素执行命令和断言。

- obotezat

Answer 4

W3验证和Adobe Browser Labs是我能提供的最佳解决方案。在我从事UI布局和设计（即切图猴）时，它们是我的两个最好的朋友。

实际上没有办法自动化测试某些东西的外观。所以，你要么自己视觉检查每个细节，要么通过众包（或内部人员）来找一个测试人员为你做同样的事情。这不是一件有趣的事情，但它让我们前端开发人员保持了工作。

好消息是，许多浏览器共享渲染引擎。因此，如果你在Chrome上进行正确的测试，你可以确定在Safari上也会很好。在Firefox和IE中进行检查，你就解决了90%的问题。然后，根据你（或你的老板）想要的严格程度来测试。

- user490227

---

感谢您的回答。我已经考虑了所有手动跨浏览器测试，但是希望（读作=抓住救命稻草？）能够自动化其中的一些。 - ajcw

Answer 5

这些工具可能在原帖发布时还不存在，但值得一提：

CasperJS，使用PhantomJS https://ghostinspector.com/（用于自动化旅程） https://github.com/BBC-News/wraith（用于截图比较）

- codeAline