有没有一种测试CSS的方法？

Question

有没有一种测试CSS的方法？

18

我知道这个想法之前已经被提出过 - 特别是在这里和这里，但是似乎没有给出解决方案。它通常被认为是要么“很好但不可能实现”，要么是“愚蠢的想法”。

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

这样做的好处是，每次进行CSS更改时，我不必坐在清单旁边 - “这个标题是否加粗？这些链接是否带有下划线？这个列是否宽110像素？”

我的问题是 - 这是可行的想法吗？实施类似功能的主要问题是什么？有人之前做过类似的东西吗？

编辑：对于如何实际呈现错误的任何想法也欢迎。我考虑使用页面头部的JavaScript文件，然后向页面添加内容，有点像Firebug中的on-page版本。但是，我担心这可能会影响页面的渲染。或者，我可以将其记录到控制台，但是我认为IE6没有适当的控制台，而且为每个测试页面打开每个浏览器的控制台似乎有点麻烦。

- Dan Blows

1

我相信这是可能的，但你必须注意一些浏览器之间的差异：例如，如果一个 div 元素的背景颜色是蓝色，IE 浏览器会说它是蓝色，而 Chrome 浏览器会说它是 #0000FF。 - Peter Olson

嗯，说得好。所以我想我需要一个在检查属性之前标准化这些属性的库。 - Dan Blows

1

没有必要检查你所做的每一个CSS更改，只需在一个浏览器中使整个事情工作，然后再为其他浏览器进行错误修复。 - Wesley Murch

似乎有一种方法可以通过代码识别用户的浏览器。一旦你掌握了主要的代码，你可以尝试使用HTML中的if语句来识别用户的浏览器，然后根据此进行代码调整。如果这就是你想做的事情。 - CMS_95

不清楚你的问题是什么，你已经知道可以使用jQuery获取计算样式并检查事物是否符合你的要求...编写测试，如果有问题请提问。理论问题不适合在SO上提问，应该在http://programmers.stackexchange.com/上提问。 - Ruan Mendes

4个回答

2

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

您的流量来源是什么？查看日志、分析等。如果传统上Opera等于总流量的1%，那我并不在意它在Opera中的外观（例如），除非那是客户最喜欢的浏览器，但您懂我的意思 - 关注少数重要的事情，而不是每一个可用的事情。

一方面，我认为这个想法很酷，但我不会相信它 - 每次更新后两个月就会过时（这有点讽刺，但还是...）我会用自己的眼睛看。整个想法有点像自动鞋带机之类的东西 - 对我来说没什么意义。此外，“我已经用'Kick@cSS'测试过了！”永远不能让您与客户摆脱困境。

如果您遵循标准，测试和调试通常很快（只要您边进行测试边进行开发）。不要使用内联元素包装块级元素等，这将有助于保持事情顺畅运行，每个人都感到满意和合规。

- Dawson

如果你每天花1个小时系鞋带，难道不想自动化吗？ - Dan Blows

@Blowski: 如果你每天花1个小时系鞋带，难道不想自动化吗？ 一旦掌握了技巧，只需要一两分钟 :) - Wesley Murch

2

我已经在相关/类似的问题中发布了相同的答案: Automated testing of CSS and HTML front-end coding

如果你正在寻找一个专门用于回归测试的工具，可以查看:

https://github.com/bfirsh/needle

它基本上会截取你选择的部分的屏幕截图(请查看他们的示例)并进行比较。如果它们之间差异太大，测试将失败。它使用Selenium，所以您也可以检查其他断言，例如z-indexes，font-sizes等。

- Kevin Smith

-1

这样做的好处是，我不必每次更改CSS时都要坐在清单旁边逐个检查每个浏览器 -“这个标题是否加粗？这些链接是否有下划线？这一列宽度是否为110px？”

当然，但秘诀是现在你不必这样做。

如果这个标题不加粗，那么没有人会死亡或失去任何金钱。有人会注意到*，并且会用最少的努力进行修复。

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

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

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

（关于必要的努力，我想进一步解释一下：对于你所描述的跨浏览器渲染测试，你需要运行实际的网络浏览器（使用像Selenium这样的工具），这意味着你需要多台机器（用于IE），所有这些机器都必须对你的测试框架进行访问。这将是个人难以实现的噩梦，并且作为服务提供非常计算密集 - 你可以问Litmus的运营团队。）

很抱歉这并不是你实际问题的答案，但测试驱动开发可能有点像一种宗教，人们很受其启发的想法（这是令人钦佩的）而不真正了解它的工作原理或者它在哪里确实能够为你节省时间。

*（或者，就像我经常遇到的那样，没有人会注意到，你会花费几秒钟思考你职业生涯的无意义，然后伸手拿起早上的第三杯啤酒。）

- Paul D. Waite

@Blowski：在一个不太相关的注释上，你的主页有72个HTML验证错误。好在客户是你自己 :) - Paul D. Waite

@Blowski：当然，我总体上理解你的观点。只是对于那些足够简单以便进行测试的CSS问题，你的测试代码应该以声明性方式告诉计算机页面应该看起来像什么，而这正是CSS已经做到的。好的测试用例会指定某些代码所需的输出（通常给定特定输入），以便程序员可以更改代码生成输出的方式，而不必担心它是否正确。这并不适用于粗体标题和带下划线的链接。你的测试代码将直接复制你的CSS，但形式更长。 - Paul D. Waite

@Blowski：除了使用CSS选择器和 font-weight: bold，您如何指定特定标题应该为粗体？使用像CSS这样的声明性代码，what和how是相同的事情。 - Paul D. Waite

@PaulD.Waite - jQuery 会返回元素的当前状态，而不是 CSS 文件中的内容。例如，如果我有 h1 {font-weight:bold}; .header {font-weight:normal} 并且我意外地赋值 <h1 class="header">，我的标题现在将不会加粗。虽然在这种情况下很明显，特别是因为它在每个浏览器中都是这样，但有更微妙的错误可能仅适用于页面上的一个小区域，而且只适用于一个浏览器。你说得对，这并不是非常重要的事情，但在客户之前找到它的快速方法会很好。 - Dan Blows

@CS_STEM：我不知道JS Fiddle与我的答案或原始问题有什么关系。 - Paul D. Waite

显示剩余11条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

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

您提供的示例通常不是需要担心的类型，而是定位和框模型等内容。如果我说h1{color:red}，我相信在IE中它将变成红色。

获取计算值并不能真正帮助找出它们如何呈现，实际上听起来比启动IEtester更加繁琐。通过一些经验，您很快就会学会需要检查跨浏览器兼容性的内容类型，并且随着浏览器变得越来越好，这已经不再是一个问题了。

一种有用的技术：在IE中设计。是的，它确实很糟糕，但通常情况下，当您在IE7中使其工作，然后在FF、IE8或IE6中进行测试时，它非常接近或差异很小，与在Chrome中测试，然后在IE7中进行双重检查相比，差异是很容易修复的。我知道“跨浏览器”包含的不仅仅是IE，但让我们不要自欺欺人；IE是问题浏览器和使用最广泛的浏览器。

总之：如果有一个工具可以做到这一点，它必须是非常惊人的，才能让我不检查真实浏览器。我认为这就是人们将Selenium视为解决方案的原因。