有没有测试 CSS 的方法？答案

【问题标题】：Is there a way of testing CSS?有没有测试 CSS 的方法？
【发布时间】：2011-04-19 00:31:49
【问题描述】：

我知道这个想法以前曾提出过 - 特别是 here 和 here - 但似乎没有给出解决方案。它在很大程度上被视为一个“很好但不可能”或“愚蠢的想法”。

我的想法是使用 jQuery 来计算计算值并将它们与预期值进行比较。例如，我可以有<h1>This is a header</h1>，理论上，我应该知道它的字体大小、颜色、字体粗细等。我可以使用 jQuery 来检查它实际上是不是那个字体大小，如果不是，则返回一个错误。

这样做的好处是我不必坐下来检查每个浏览器的清单 - “这个标题是粗体吗？这些链接是否带有下划线？此列是 110 像素宽吗？ - 每次我进行 CSS 更改时。

我的问题 - 这是一个可行的想法吗？实施类似的主要问题是什么？以前有人做过类似的事情吗？

编辑：也欢迎任何关于如何实际呈现错误的想法。我想在相关页面的标题中使用 JavaScript 文件，然后向页面添加内容，有点像 Firebug 的页面版本。但是，我担心这会影响页面的呈现。或者，我可以将它记录到控制台，但我认为 IE6 没有合适的控制台，并且为每个被测页面打开每个浏览器的每个控制台似乎也有点烦人。

【问题讨论】：

我相信这是可能的，但你必须注意一些浏览器的差异：例如，如果一个 div 的背景颜色为蓝色，IE 会说它是蓝色，Chrome 会说它是#0000FF
嗯，好点子。所以我想我需要一个库来标准化属性，然后再检查它们。
没有必要检查您所做的每一个 css 更改，只需让整个事情在一个浏览器中运行，然后再修复其他浏览器的错误。
似乎有一种方法可以通过代码识别用户浏览器，一旦你得到主代码，你可以尝试在 html 中使用 if 来识别用户浏览器，然后让它根据调整代码那。如果这就是你想要做的。
不清楚您的问题是什么，您已经知道可以使用 jQuery 来获取计算的样式并检查事情是否符合您的要求...编写测试，如果您有问题，请提出问题问题。理论问题不适合 SO，应该在programmers.stackexchange.com 提问

标签： jquery css testing

【解决方案1】：

即使有办法做到这一点，我仍然觉得需要手动检查。

您提供的示例不是通常需要担心的类型，而主要是定位和盒子模型的东西。如果我说h1{color:red}，我很有信心它会在 IE 中变红。

获取计算值并不能真正帮助找出它们是如何呈现的，实际上这听起来比仅仅启动 IEtester 需要更多的工作。通过一些经验，您可以快速了解检查跨浏览器兼容性所需的内容类型，并且随着浏览器越来越好，问题越来越少。

一种可以提供帮助的技术：在 IE 中进行设计。是的，它确实很烂，但是你通常会发现，当你让它在 IE7 中工作，然后在 FF、IE8 或 IE6 中测试时——它非常接近，或者与 Chrome 中的测试相比，差异很容易解决，然后加倍检查IE7。我知道“跨浏览器”不仅仅封装了 IE，但我们不要自欺欺人； IE 是有问题的浏览器，也是使用最广泛的浏览器。

结论：如果有一个工具可以做到这一点，它必须是非常棒才能阻止我在真正的浏览器中查看。我认为这就是为什么人们将Selenium 作为解决方案的原因。

【讨论】：

很难过，但我认为你在 IE 中设计的想法真的很棒。 :)
我同意我永远不会有信心仅仅因为 CSS 通过了我的测试就“假设”它正在工作。但是，我发现一些小的更改引入了在检查 9 个浏览器时会被忽略的错误。例如，前段时间，我不小心在 IE6 中将页脚中某些链接的悬停颜色设置为白色背景上的白色。在我注意到之前大约有 2 个月的时间。这是我想自动快速发现的那种错误，因为它非常耗时且难以手动检测。
@Andbdrew - 有一瞬间，我以为你写的是 'IE 真的很棒'。
@Blowski，通过阅读 cmets - 我真的看不出您愿意为“测试”您的 css 所做的代码编写和调试量可能会抵消您的时间d 只需检查浏览器，并知道它可以工作。我什至无法想象这是如何工作的。
代码“
似乎在 IE、Firefox、Chrome 中不起作用。IE 有一个不错的基础

【解决方案2】：

嗯...让观众决定您的测试内容，并将其作为您客户关系的一部分。

您的流量来源是什么？查看日志、分析等。老实说，我并不关心它在 Opera 中的样子（例如），如果传统上，Opera 相当于总流量的 1%——除非那是客户最喜欢的浏览器，但你明白了——为少数重要的事情出汗，而不是每一个可用的。

一方面，我认为这个想法很酷，但我不相信它 - 每次更新后 2 个月它就会过时（这有点讽刺，但仍然如此）......我最终会用我自己的眼睛看。整个想法听起来有点像自动鞋带或其他东西 - 对我来说没有实际意义。此外，“我用'Kick@cSS'测试了它！！”永远不会让你摆脱与客户的困境。

如果您遵循标准，测试和调试通常会很快（只要您随时进行测试）。不要用内联元素等包裹你的块元素，这将有助于使事情顺利进行，并且每个人都快乐和顺从。

【讨论】：

如果你每天花 1 个小时系鞋带，你不想让它自动化吗？
@Blowski: If you spent 1 hour a day tying your shoelaces, wouldn't you want to automate it? 一旦掌握了窍门，只需一两分钟 :)

【解决方案3】：

我对一个相关/类似的问题发布了相同的答案： Automated testing of CSS and HTML front-end coding

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

https://github.com/bfirsh/needle

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

【讨论】：

【解决方案4】：

这样做的好处是我不必坐下来检查每个浏览器的清单 - “这个标题是粗体吗？这些链接是否带有下划线？此列是 110 像素宽吗？ - 每次我进行 CSS 更改时。

当然可以，但秘诀是您现在不必这样做。

如果这个标题不是粗体，那么没有人会死，也不会赔钱。有人会注意到*，它会以最小的努力得到修复。

最好花时间设计 CSS 以隔离样式（因此不太可能导致难以追踪的错误），而不是为网站上每个页面上的每个元素编写自动化测试。

您需要付出的努力与正确编写代码的难度（并不多）和错误代码的后果（并不多）不成比例要么）。

更实际地，您将如何指定您所描述的测试类型？您需要告诉测试运行程序它应该检查哪些元素，以及每个元素的样式应该是什么。这就是 CSS 所做的。也许您对要检查的元素的定义可能会更加具体您的 CSS 选择器（例如，单独选择每个页面上的每个元素），但这将非常耗时，无论是最初编写还是维护。

（只是为了详细说明必要的工作：对于您所描述的跨浏览器渲染测试，您必须运行实际的 Web 浏览器（使用 Selenium 之类的东西），这意味着您需要多台机器（对于 IE )，所有这些都必须可供您的测试框架访问。这将是个人运行的噩梦，并且作为服务提供的计算量非常大 - 只需询问运行 Litmus 的人即可。）

很抱歉，这并不是对您的实际问题的真正答案，但测试驱动开发可能有点像一种宗教，因为人们会从它的想法（令人钦佩）中得到非常启发，而无需真正了解它是如何工作的，或者它实际上在哪里可以为您的时间带来可观的回报。

*（或者，正如我更频繁地经历的那样，没有人会注意到，你会花几秒钟思考你的职业存在的毫无意义，然后再去喝早上的第三杯啤酒。）

【讨论】：

@Blowski：在这种情况下，你签了一份疯狂的合同，因为需要 60 秒才能修复的小错误而赔钱，尽管如此，你还是没能花 3 秒查看您正在为其编写 CSS 的站点，以检查标题是否为粗体。如果这些情况属实，您可能需要先关注它们，然后再进一步尝试设置自动化 CSS 测试。
@Blowski：在一个几乎不相关的注释上，you have 72 HTML validation errors on your home page。谢天谢地，在这种情况下，你的客户就是你 :)
@PaulD.Waite - 依赖“希望客户不会注意到，如果他们注意到了，这是一个快速修复”似乎并不是最好的开发方法。同样，我这篇文章的重点是测试 CSS 非常耗时，我想知道是否有更快的方法来做这件事，所以说“只看浏览器”就等于对软件程序员说“不要为单元测试而烦恼——只需使用该软件来检查它是否有效”。我同意它最终可能会比它的价值更麻烦，但这就是我问的原因。
@Blowski：当然，我同意你的观点。只是对于简单到可测试的 CSS 问题，您的测试代码会告诉计算机页面应该是什么样子，最好以声明的方式，而这正是 CSS 已经做到的。好的测试用例指定某些代码所需的输出（通常给定特定的输入），以便程序员可以更改代码生成输出的方式，而不必担心它是否仍然正确。这不适用于粗体标题和带下划线的链接。您的测试代码会以更长的形式复制您的 CSS。
@PaulD.Waite - 正是我想要做的 CSS 测试。 “输出”是标题是否为粗体，如何是 CSS 本身。我希望能够更改 CSS 而不必担心我刚刚在 IE7 中取消了标题。

似乎在 IE、Firefox、Chrome 中不起作用。IE 有一个不错的基础