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

【问题标题】：Automated testing of CSS and HTML front-end codingCSS和HTML前端编码的自动化测试
【发布时间】：2011-05-01 22:01:48
【问题描述】：

我是一名前端开发人员，编码 CSS、HTML 和 Javascript（按此顺序），我所做的大部分工作都是设计主导。虽然我使用 CSS 创建的设计的质量是主观的，但大部分编码都是纯粹的功能/布局，我对任何方式来自动化我的页面测试都很感兴趣。

我的问题可以分为两部分

有没有人有任何现成的技术或建议自动测试 CSS 或 HTML，特别是关于跨浏览器兼容性？
由于CSS可以大致分为进入控制布局的属性而那些控制设计的，是自动化测试仅适用于布局（不可能自动且有价值地测试例如，一个 color 是正确的）？如果是，那是什么某种 CSS 值可能是合适的用于布尔验收测试？

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

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

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

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

展望未来，我试图从我的工作中分离出一些单独的 CSS 导致功能错误的示例，但到目前为止我发现的那些错误是 JS 和 CSS结合的错误。我仍然想自动测试这些类型的错误，但感谢使用 javascript 它超出了我最初问题的范围。

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

我已经写了一篇关于我如何着手解决这个问题的博客，可以在这里找到：

【问题讨论】：

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

【解决方案1】：

w3 验证和Adobe Browser Labs 是我可以为这个问题提供的最佳解决方案。当我在做 UI 布局和设计（read=cutup monkey）时，那是我最好的两个朋友。

真的没有办法自动测试事物的外观。所以，你要么自己目视检查所有东西，要么众包（或内包）测试人员为你做同样的事情。这不好玩，但它让我们前端人员继续工作。

好消息是，许多浏览器共享渲染引擎。所以，如果你在 Chrome 上正确测试，你可以打赌你在 Safari 上会很好。检查 Firefox 和 IE，你已经解决了 90% 的问题。然后，确定您（或您的老板）想要变得多挑剔，并进行相应的测试。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

Selenium 是一个非常漂亮的工具。有一个学习曲线，但不是太陡峭。
Selenium 也慢得要命（这就是野兽的本性）。但是，结合一个也可以戳页面的 JavaScript 系统，您可以获得运行速度非常快的东西。我使用 selenium 加载了一个主要是 javaScript 单元测试框架，这很棒。我将它与一个持续集成系统 (Jenkins) 连接起来，它发现了各种奇妙的奇怪错误，而我不必总是不断地启动我的 Windows VM。

【解决方案3】：

如果您正在寻找专为回归测试构建的工具，请查看：

它基本上会截取您选择的部分的屏幕截图（查看他们的示例）并进行比较。如果它们彼此相差太大，则测试将失败。它使用 Selenium，因此您不妨检查其他断言，例如 z-indizes、字体大小等。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您也可以查看Nighwatch.js

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

【讨论】：