CSSunit testing
几个简单的search发现，我显然不是第 一个想到“我可以unit testing我的CSS？”的人。 。
我想知道是否有人在这里成功地采取了CSSunit testing？ 如果你尝试失败，或者只是有自己的理论，请告诉我为什么（显然）还没有完成？
您可以使用Selenium，这是一个Webtesting框架。 这样你可以断言哪些样式将被应用到DOM中的元素等
selenium
否则，不知道你的目标是什么。 unit testing正如名字所暗示的那样，testing“单元”，而对于我来说，这只适用于代码而不是css。
有一个叫做Quixote的新的cssunit testing库。 它不是直观地比较图像，而是看代码。 与Selenium不同的是，您不必声明特定的样式，而是可以说“应该居中”或“左边距离这个其他元素右侧10px”。
我认为在浏览器（客户端）中可以“unit testing”CSS。 这将更像是一个自动检查器，而不是unit testing：
- 评估我们想要为特定CSS类或ID（结果）保留的最终CSS属性条件。
- 我们需要testing文档HTML来呈现静态内容和CSS。 所有的元素都应该被包含在不同的容器中。
- 渲染后，用javascript检查所选目标的最终或最终属性，并输出不匹配的元素。
unit testing用例：
DOMselect器：
.test1 .test2 #test3 这应该总是最后的属性：
CSSAttribute1, CSSFinalValue1 CSSAttribute2, CSSFinalValue2 CSSAttribute3, CSSFinalValue3
在JS中设置testing规则的函数可以是：
addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");
然后我们检查DOM元素是否具有这个最终属性。
所有渲染完成后的JavaScript。 但无论如何，这是不实际的，因为你将不得不构build很多unit testing用例，这将大大增加你的代码。
你也应该总是有一个reset.css跨浏览器的“兼容性”。
另一种方法是指定你知道应该保留其全部属性的CSS类。 创build一个DOMselect器的列表。 使用jQuery获取CSS类属性（直接从CSS类）并检查它们是否保留在目标DOM元素中。 这最后一个方法可以几乎完全自动化，但将需要一个更复杂的JavaScript检查器。 最后一个不会检查CSSselect器（例如“＃test3”），只有类（例如“.test1”）
您可以使用PhantomCSS进行自动视觉比较。 然后，您可以创buildCSS模块unit testing页面，该页面只加载基本的CSS样式，并在所有状态下显示组件，但不会从其他组件加载CSS。 然后，您可以将其与所有模块加载的完整CSS文件进行比较。
我不明白为什么我们不能或不应该unit testingCSS。 以下是我想到的情景：
我有一个由多个模块化的CSS文件组成的CSS框架，并驱动我的网站5。
Ex : base.css / form.css / article.css etc.
想象一下，我对base.css做了一个改变，仅仅适用于Site＃1的要求=>我可能会破坏Site＃2的样式。
如果我的CSS框架build立在LESS或SASS基础之上，那么CSSunit testing就更加贴切了：macros中的变化可能会打破所有的样式。 。
我们已经在一个大型的，用户界面很重的项目上进行了unit testing，并且效果非常好！ 这也比看起来容易。
使用getBoundingClientRect或getComputedStyle等简单工具，将它与hyperscript配对 ，创build快速的临时DOM树，然后您就可以开始使用了。 我们已经写了tape-css来减less使用磁带testing时的样板，但是在任何testing设置中堆栈都是相似的。
昨天我发表了一篇详细的博客文章，里面有一个简单的教程和关于我们新工作stream程的实例，以及它如何提高了我们的工作效率： CSSunit testing如何帮助我们快速移动 。
有一个有趣的方法，我从来没有尝试，但可能工作：
- 您可以创build示例页面（àla https://getboostrap.com ），提供所有组件等。
- 你用赫胥黎进行testing
Etvoilà:)
unit testing的CSS，取决于你的框架和你的方法来CSS。
问题要问：
在CSS中testing给定的类，例如Assert.IsNotNull
获取CSS属性并validation其属性。
首先，我将确定，如果CSS文件存在，那么查找特定的类，然后查找指定类中的属性。
在我的回归testing中，我经历了一次缺课，并从之前的调查结果中立即解决了这个问题。
海事组织没有任何意义。 CSS是一种控制页面布局的语言， 试图unit testing它会像试图对Postscript进行unit testing。
我能想到的唯一明显的用于unit testing的用法是比较屏幕截图，以查看哪些浏览器受到代码更改的影响。 除此之外，你不能说代码是正确的，除非你手动比较渲染输出中的所有内容和规范说明的内容。 对我来说，正确地获取CSS总是会反复试验。
目前，了解CSS是否正常工作是视觉确定的。 到目前为止，testing它的最好方法是在开发机器上安装多个浏览器。 开始在Firefox上使用Firebug和Web Developer之类的工具，忘掉unit testingCSS，直到它变成Turing完成。 🙂
