CSS单位测试

Question

我进行了几次快速搜索，发现显然不是有这个想法的第一个人 "我能为我的 CSS 进行单元测试吗？"。

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

- nickf

---

关于它不具备图灵完备性、无法进行单元测试等的评论纯属无稽之谈。例如，在 CSS 中继承（级联）是非常值得测试的一个方面。交叉浏览器调整也很值得验证。而 selenium 或任何其他浏览器内解决方案似乎都无法奏效，除非它基于类似 qunit/jquery 的东西，并且实际上会探测 DOM 以查看 CSS 是否如作者所愿应用（并且可以在不同的浏览器中运行/测试以验证其是否有效）。 - Evgeny

在BDD测试中包含CSS检查可以帮助证明一些业务需求，例如某些东西的大小为NxN且为蓝色。即使它们在用户代理X中的外观未能满足要求（这就是类似Selenium可以填补空白的地方），这些类型的事情肯定是可测试的。 - Kevin Peno

对我来说，这听起来完全是浪费时间。 - Crasher

Answer 1

现在有一个名为Quixote的新的CSS单元测试库。它不像视觉上比较图像，而是查看代码。与Selenium不同，您不需要断言特定的样式，相反您可以说一些像“它应该居中”或者“左侧距离这个其他元素的右侧应该再多10像素”的话。

- aharris88

---

你是否已经尝试过Quixote了呢？如果是的话，能否分享一些关于你的体验的细节呢？ - leenasn

我还没有尝试过，但我想试一试。 - aharris88

Answer 2

您可以使用Selenium，这是一个网页测试框架。这样，您就可以断言应用于DOM元素的样式等内容。 Selenium 否则，我不确定您的目标是什么。单元测试是针对“单位”的测试，正如其名称所暗示的那样，这只在代码而非css方面才有意义。

- RekrowYnapmoc

---

好的，CSS是一种代码，但有点不同。无论如何，更改输入（CSS文件）将会更改输出（视觉效果），我想对输出做出断言——检查段落中的字体大小是否始终相同，检查文本是否正确地对齐到网格等等。 - nickf

它不是一种编程语言，但它是代码。就像HTML一样是代码。 - slim

抱歉，我不同意。代码是机器执行的东西，HTML是标记语言。 - RekrowYnapmoc

好的，你选择了一个非常狭窄的“代码”定义。根据这个定义，“ASCII”中的C是无意义的。 - slim

实际上，CSS3（有争议地）是图灵完备的 :) - Michael Mior

Answer 3

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

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

单元测试案例：

DOM选择器：

.test1
.test2
#test3

这应该始终作为最终属性：

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

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

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

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

这一切都是在渲染后用JavaScript完成的。但是无论如何，这并不实际，因为您将不得不构造许多单元测试用例，这会显著增加代码量。

另外，您应该始终拥有一个重置CSS文件以实现跨浏览器的“兼容性”。

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

- Heroselohim

Answer 4

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

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

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

假设我对base.css进行更改，只适用于站点1 => 我可能会破坏站点2的样式。

如果我的CSS框架是基于LESS或SASS构建的，则CSS单元测试将更加相关：宏中的更改可能会破坏所有样式。

- boudu

---

是的，我也有许多网站的基本CSS样式表。但是每个网站都有自定义的CSS文件，使它们独特。使用自定义CSS文件，您可以覆盖默认样式，并启用/禁用它们。 - Heroselohim

Answer 5

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

- Jkarttunen

Answer 6

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

使用像getBoundingClientRect或getComputedStyle这样的简单工具，配合hyperscript创建快速临时DOM树，你就可以开始测试了。我们编写了tape-css以减少在使用tape进行测试时的样板代码，但在任何测试设置中，堆栈都将类似。

昨天，我发布了一篇详细的博客文章，介绍了我们的新工作流程以及它如何提高我们的生产力，还提供了简单的教程和实时示例: How CSS unit tests helped us move fast。

- tomekwi

Answer 7

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

1. 创建示例页面（类似于https://getboostrap.com），提供所有组件等。
2. 使用Huxley进行测试

Et voilà :)

- avetisk

Answer 8

单元测试 CSS，取决于您的框架和 CSS 的处理方式。

需要问的问题：

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

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

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

我曾经在回归测试中遇到过缺失的类，并立即从以前的发现中修复了它。

- Muks

Answer 9

目前，判断CSS是否正常工作是通过视觉确定的。到目前为止，测试它的最佳方法是在开发机器上安装多个浏览器。开始使用像Firefox上的Firebug和Web Developer这样的工具，并且在它变成图灵完备之前，不要考虑单元测试CSS。 :-)

- Clinton Judy

---

一旦您在开发机器上安装了多个浏览器，您可以通过视觉确定CSS是否正常工作... Selenium是自动化这种视觉确定的一种方式。 - Greg