跳到主要内容

为什么测试前端代码至关重要

这篇文章首次出现在问题233.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

测试不是我在前端开发圈经常听到的一个词。这并不是说他们没有测试,但它似乎还不是主流实践。

前端发展前景正在发生变化,必要的技能也在不断变化。所以我一直在考虑自动化CSS测试的方法和工具。

我看到四种特别有用的CSS测试类型:

  • 验证:语法错误和潜在的兼容性错误
  • 渲染:不同浏览器引擎如何呈现CSS
  • 性能:速度和效率
  • 回归:确保变更不会带来任何问题

你有没有:

  • 在CSS中发现输入错误?
  • 单击一个站点以验证它看起来应该如何?
  • 有一个演示站点完美地工作只是为了发现在生产环境中实现期间引入的错误吗?
  • 重构/更改CSS确保您没有破坏任何东西?
  • 分析和优化CSS性能?

在没有自动测试套件来发现问题的情况下,我想介绍一些与这四个领域相关的工具和自动化流程。

验证

虽然CSS验证可能有争议,但我喜欢CSS Lint因为它检查语法错误并标记潜在的可维护性和性能问题。

CSS Lint已与许多IDE集成,可以从目录上的命令行运行,并与各种构建系统和自动化脚本集成,包括Ant,Node,Rhino,Grunt和Rake。规则和集成选项记录在CSS Lint Wiki

渲染

大多数CSS测试发生在确保网站看起来应该跨越不同的浏览器时。通常,这是手动完成的 - 检查浏览器中的站点以验证其外观。

样式指南可以成为协助该过程的绝佳工具。Styleguides差异很大,但通常记录并显示站点中所有可重用组件的标记模式。有许多工具可以帮助从现有代码自动创建样式指南。我强烈推荐KSS卡雷

性能

CSS通常不是降低网站性能的最大攻击者,但确实会产生影响。尘土选择器是提供未使用选择器分析的几种工具之一。它们还可以与Rake文件结合使用,以自动删除未使用的样式。

回归

在自动化回归测试方面似乎特别有希望的两个项目是Cactus和Needle。仙人掌是一个与Rails一起使用的概念证明,并且有助于基于计算的CSS而不是屏幕截图进行测试。通过生成和比较网站的一部分的屏幕截图来检查当前呈现与原始屏幕截图,从而实现自动回归测试。

结论

这只是表面上的问题,但我希望我已经引发了关于将CSS测试集成并自动化到网站开发工作流程的想法。

发现20个激动人心的CSS实例Creative Bloq



翻译字数超限