CSS 单元测试答案

【问题标题】：CSS Unit TestingCSS 单元测试
【发布时间】：2017-09-11 15:39:04
【问题描述】：

一些快速搜索发现我显然是 not the first person 想“我可以对我的 CSS 进行单元测试吗？”。

我想知道这里是否有人成功地进行了 CSS 单元测试？如果您尝试过但失败了，或者只是有自己的理论，请告诉我为什么（显然）还没有完成？

【问题讨论】：

关于它不完整、不可单元测试等的 cmets 只是蹩脚。例如，css 中的继承（级联）是非常有趣的测试。跨浏览器的调整也很有趣。硒或任何其他浏览器内解决方案听起来都不起作用。除非它可能基于 qunit/jquery 之类的东西，并且实际上会戳 DOM 以查看 CSS 是否像作者预期的那样应用（并且可以在不同的浏览器中运行/测试以验证它是否有效）。
在测试中包含 CSS 检查可以帮助证明 BDD 中的一些业务需求（例如 NxN 和蓝色的大小）。这些类型的东西当然是可测试的，即使它们在用户代理 X 中的出现未能满足上述要求（这是 selenium 之类的东西可以填补空白的地方）
在我看来完全是浪费时间。

标签： css unit-testing

【解决方案1】：

有一个名为Quixote 的新css 单元测试库。它不是在视觉上比较图像，而是查看代码。与 Selenium 不同，您不必声明特定样式，而是可以说“它应该居中”或“左侧应该比其他元素的右侧多 10px”。

【讨论】：

想知道您是否已经尝试过 Quixote。如果是的话，你能分享一些关于你的经历的细节吗？
我没有，但我想试试。

【解决方案2】：

您可以使用 Selenium，它是一个 Web 测试框架。通过这种方式，您可以断言要对 DOM 中的元素应用哪些样式等。

Selenium

否则，不确定您的目标是什么。单元测试，顾名思义，就是测试“单元”，对我来说，这只对代码有意义，而不是 css。

【讨论】：

嗯，CSS 是代码，……有点。无论如何，更改输入（CSS 文件）将更改输出（视觉效果），我想对输出做出断言 - 检查段落中的字体大小永远不会不同 - 检查文本是否与网格对齐正确的等等。
它不是一种编程语言。但它是代码。就像 HTML 是代码一样。
再次抱歉，不得不不同意。代码是机器执行的东西。 HTML 是标记。
好的，你选择了一个非常狭隘的“代码”定义。根据该定义，“ASCII”中的 C 没有意义。
其实 CSS3 是（可以说）图灵完备 :)

【解决方案3】：

我不明白为什么我们不能或不应该对 CSS 进行单元测试。这是我想到的场景：

我有一个由多个模块化 CSS 文件组成的 CSS 框架，它驱动着我的 5 个网站。

Ex : base.css / form.css / article.css etc.

想象一下，我对 base.css 进行了更改，以满足仅适用于站点 #1 的要求 => 我可能会破坏站点 #2 的样式。

如果我的 CSS 框架构建在 LESS 或 SASS 之上，那么 CSS 单元测试将更加相关：宏中的更改可能会破坏所有样式。 .

【讨论】：

是的，我还有一些适用于许多网站的基本 CSS 样式表。而且每个人都有自定义的 CSS 文件，以使它们独一无二。使用自定义 CSS 文件，您可以覆盖默认样式并启用/禁用它们。

【解决方案4】：

我认为可以在浏览器（客户端）中“单元测试”CSS。它更像是一个自动检查器而不是单元测试：

评估我们希望为特定 CSS 类或 ID（结果）保留的最终 CSS 属性条件。
我们需要一个测试文档 HTML 来呈现静态内容和 CSS。所有元素都应包含在单独容器中的内容中。
渲染后，使用 javascript 检查所选目标的最终或结果最终属性，并输出不匹配的元素。

单元测试用例：

DOM 选择器：

.test1
.test2
#test3

这应该始终是最终属性：

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

在 JS 中设置测试规则的函数可以是：

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

然后我们检查 DOM 元素是否具有这个最终属性。

渲染后全部在 javascript 中完成。但无论如何这都不切实际，因为您将不得不构建许多单元测试用例，这会显着增加您的代码。

此外，您应该始终拥有一个用于跨浏览器“兼容性”的 reset.css。

替代方法是指定您知道应该保留其全部属性的 CSS 类。创建一个 DOM 选择器列表。使用 jQuery 获取 CSS 类属性（直接从 CSS 类）并检查它们是否保留在目标 DOM 元素中。最后一种方法几乎可以完全自动化，但需要更复杂的 javascript 检查器。最后一个不会检查 ID 选择器的 CSS（例如“#test3”），只检查类（例如“.test1”）

【讨论】：

【解决方案5】：

您可以使用 PhantomCSS 进行自动视觉比较。然后您可以创建 CSS 模块单元测试页面，该页面仅加载基本 CSS 样式并显示组件的所有状态，但不加载来自其他组件的 CSS。然后你可以将它与加载了所有模块的完整 CSS 文件进行比较。

【讨论】：

【解决方案6】：

我们已经在一个大型的 UI 密集型项目上设置了单元测试，而且效果非常好！它也比看起来容易得多。

使用getBoundingClientRect 或getComputedStyle 等简单工具，将其与hyperscript 配对以创建快速的临时DOM 树，一切顺利。我们编写了tape-css 以在使用tape 进行测试时减少样板代码，但堆栈在任何测试设置中都是相似的。

昨天我发表了一篇详细的博客文章，其中包含一个简单的教程和关于我们的新工作流程以及它如何提高我们的生产力的实时示例：How CSS unit tests helped us move fast。

【讨论】：

【解决方案7】：

有一种我从未尝试过的有趣方法，但可能会奏效：

您创建提供所有组件等的示例页面 (à la https://getboostrap.com)。
您使用Huxley 进行测试

等等 :)

【讨论】：

【解决方案8】：

单元测试 CSS，取决于你的框架和你的 CSS 方法。

要问的问题：

测试 CSS 中的给定类例如，Assert.IsNotNull

获取 CSS 属性并验证其属性。

首先，我会确定是否存在 CSS 文件，然后查找特定类，然后查找指定类中的属性。

我在回归测试期间遇到了一个缺失的课程，并设法根据之前的发现立即修复它。

【讨论】：

【解决方案9】：

目前，了解 CSS 是否正常工作是通过视觉确定的。到目前为止，最好的测试方法是在你的开发机器上安装多个浏览器。开始在 Firefox 上使用 Firebug 和 Web Developer 等工具，忘记对 CSS 进行单元测试，直到图灵完备。 :-)

【讨论】：

一旦您在开发机器上安装了多个浏览器，您就可以直观地确定 CSS 是否正常工作... Selenium 是一种自动化这种视觉确定的方法.