51Testing软件测试论坛

标题: 常用的前端自动化测试工具介绍 —— Karma（一） [打印本页]
作者: 悠悠小仙仙    时间: 2018-1-16 15:45
标题: 常用的前端自动化测试工具介绍 —— Karma（一）
在开发的过程中，除了代码本身，测试也是重要的一环。大体来说，测试分为以下几种类型：
　　单元测试
　　功能测试
　　性能测试
　　安全测试
　　对于普通开发者而言，单元测试和功能测试是最常见的两种测试方式，本系列文章要介绍的几个工具是针对这两个方面的。
　　单元测试是对某一块独立的业务模块进行测试，可以是一个小功能，甚至一个函数。在前端开发中，我们可以选用 Karma进行代码的单元测试，这个工具十分强大，它集成了像Jasmine（基于BDD的测试框架），PhantomJS（无界面的浏览器）这些测试套件。还有一些其他有用的功能，比如生成代码覆盖率的报告等。
　　本文只介绍 Karma的基本使用。
　　单元测试工具Karma
　　要使用Karma对代码进行单元测试，首先需要安装一系列的相关插件。我们来新建一个名为myKarmDemo的目录，并安装相关的插件：
　npminstallkarma-cli-g
　　npminstallkarmajasmine-corekarma-jasminekarma-phantomjs-launcher-D
　　接下来对我们的工程进行初始化：
　　karmainit
　　之后会弹出一些选项，其中包含了一些初始化的配置工作，使用上下方向键可以在配置项之间进行切换。我这里选择使用 Jasmine测试框架，使用PhantomJS无界面浏览器，整体的配置选项如下：
  1. 　myKarmDemokarmainit
  2. 　　　　Whichtestingframeworkdoyouwanttouse?
  3. 　　　　Presstabtolistpossibleoptions.Entertomovetothenextquestion.
  4. 　　　　>jasmine
  5. 　　　　DoyouwanttouseRequire.js?
  6. 　　　　ThiswilladdRequire.jsplugin.
  7. 　　　　Presstabtolistpossibleoptions.Entertomovetothenextquestion.
  8. 　　　　>no
  9. 　　　　Doyouwanttocaptureanybrowsersautomatically?
  10. 　　　　Presstabtolistpossibleoptions.Enteremptystringtomovetothenextquestion.
  11. 　　　　>PhantomJS
  12. 　　　　Whatisthelocationofyoursourceandtestfiles?
  13. 　　　　Youcanuseglobpatterns,eg."js/*.js"or"test/**/*Spec.js".
  14. 　　　　Enteremptystringtomovetothenextquestion.
  15. 　　　　>
  16. 　　　　Shouldanyofthefilesincludedbythepreviouspatternsbeexcluded?
  17. 　　　　Youcanuseglobpatterns,eg."**/*.swp".
  18. 　　　　Enteremptystringtomovetothenextquestion.
  19. 　　　　>
  20. 　　　　DoyouwantKarmatowatchallthefilesandrunthetestsonchange?
  21. 　　　　Presstabtolistpossibleoptions.
  22. 　　　　>no
  23. 　　　　Configfilegeneratedat"/home/charley/Desktop/myKarmDemo/karma.conf.js".
  24. 　　　　初始化完成之后，会在我们的项目中生成一个 karma.conf.js文件，这个文件就是Karma的配置文件。
  25. 　　　　配置文件比较简单，能够比较轻松的看懂，这里我对原始的配置文件进行简单的修改，结果如下：
  26. 　　　　//Karmaconfiguration
  27. 　　　　//GeneratedonSunOct29201721:45:27GMT+0800(CST)
  28. 　　　　module.exports=function(config){
  29. 　　　　config.set({
  30. 　　　　//basepaththatwillbeusedtoresolveallpatterns(eg.files,exclude)
  31. 　　　　basePath:'',
  32. 　　　　//frameworkstouse
  33. 　　　　//availableframeworks:https://npmjs.org/browse/keyword/karma-adapter
  34. 　　　　frameworks:['jasmine'],
  35. 　　　　//listoffiles/patternstoloadinthebrowser
  36. 　　　　files:[
  37. 　　　　"./src/**/*.js",
  38. 　　　　"./test/**/*.spec.js",
  39. 　　　　],
  40. 　　　　//listoffilestoexclude
  41. 　　　　exclude:[
  42. 　　　　],
  43. 　　　　//preprocessmatchingfilesbeforeservingthemtothebrowser
  44. 　　　　//availablepreprocessors:https://npmjs.org/browse/keyword/karma-preprocessor
  45. 　　　　preprocessors:{
  46. 　　　　},
  47. 　　　　//testresultsreportertouse
  48. 　　　　//possiblevalues:'dots','progress'
  49. 　　　　//availablereporters:https://npmjs.org/browse/keyword/karma-reporter
  50. 　　　　reporters:['progress'],
  51. 　　　　//webserverport
  52. 　　　　port:9876,
  53. 　　　　//enable/disablecolorsintheoutput(reportersandlogs)
  54. 　　　　colors:true,
  55. 　　　　//leveloflogging
  56. 　　　　//possiblevalues:config.LOG_DISABLE||config.LOG_ERROR||config.LOG_WARN||config.LOG_INFO||config.LOG_DEBUG
  57. 　　　　logLevel:config.LOG_INFO,
  58. 　　　　//enable/disablewatchingfileandexecutingtestswheneveranyfilechanges
  59. 　　　　autoWatch:false,
  60. 　　　　//startthesebrowsers
  61. 　　　　//availablebrowserlaunchers:https://npmjs.org/browse/keyword/karma-launcher
  62. 　　　　browsers:['PhantomJS'],
  63. 　　　　//ContinuousIntegrationmode
  64. 　　　　//iftrue,Karmacapturesbrowsers,runsthetestsandexits
  65. 　　　　singleRun:true,
  66. 　　　　//Concurrencylevel
  67. 　　　　//howmanybrowsershouldbestartedsimultaneous
  68. 　　　　concurrency:Infinity
  69. 　　　　})
  70. 　　　　}
  71. 　　　　然后创建一个 src目录和一个test目录，在其中分别创建index.js和index.spec.js文件。
  72. 　　　　我要做的测试内容比较简单，对 index.js中的两个函数（一个加法函数，一个乘法函数）进行测试。
  73. 　　　　index.js文件如下：
  74. 　　　　//加法函数
  75. 　　　　functionadd(x){
  76. 　　　　returnfunction(y){
  77. 　　　　returnx+y;
  78. 　　　　}
  79. 　　　　}
  80. 　　　　//乘法函数
  81. 　　　　functionmulti(x){
  82. 　　　　returnfunction(y){
  83. 　　　　returnx*y+1;
  84. 　　　　}
  85. 　　　　}
  86. 　　　　index.spec.js文件如下：
  87. 　　　　describe("运算功能单元测试",function(){
  88. 　　　　it("加法函数测试",function(){
  89. 　　　　varadd5=add(5)
  90. 　　　　expect(add5(5)).toBe(10)
  91. 　　　　});
  92. 　　　　it("乘法函数测试",function(){
  93. 　　　　varmulti5=multi(5)
  94. 　　　　expect(multi5(5)).toBe(25)
  95. 　　　　})
  96. 　　　　})
  97. 　　　　单测的代码写好后，就可以使用 karmastart来运行单元测试。由于我们的乘法代码中有错误，因此测试结果是这样的：
  98. 　　　　myKarmDemokarmastart
  99. 　　　　2910201722:21:56.283:INFO[karma]:Karmav1.7.1serverstartedathttp://0.0.0.0:9876/
  100. 　　　　2910201722:21:56.287:INFO[launcher]:LaunchingbrowserPhantomJSwithunlimitedconcurrency
  101. 　　　　2910201722:21:56.294:INFO[launcher]:StartingbrowserPhantomJS
  102. 　　　　2910201722:21:56.549:INFO[PhantomJS2.1.1(Linux0.0.0)]:Connectedonsocket0h6boaepSUMwG7l2AAAAwithid44948955
  103. 　　　　PhantomJS2.1.1(Linux0.0.0)运算功能单元测试乘法函数测试FAILED
  104. 　　　　Expected26tobe25.
  105. 　　　　test/index.spec.js:9:31
  106. 　　　　PhantomJS2.1.1(Linux0.0.0):Executed2of2(1FAILED)(0.048secs/0.002secs)
  107. 　　　　将乘法函数的代码改为正常，再次启用 karmastart进行测试：
  108. 　　　　2910201722:23:08.670:INFO[karma]:Karmav1.7.1serverstartedathttp://0.0.0.0:9876/
  109. 　　　　2910201722:23:08.673:INFO[launcher]:LaunchingbrowserPhantomJSwithunlimitedconcurrency
  110. 　　　　2910201722:23:08.685:INFO[launcher]:StartingbrowserPhantomJS
  111. 　　　　2910201722:23:08.940:INFO[PhantomJS2.1.1(Linux0.0.0)]:Connectedonsocketpl_pZDcAK4rBTpr0AAAAwithid40770640
  112. 　　　　PhantomJS2.1.1(Linux0.0.0):Executed2of2SUCCESS(0.045secs/0.001secs)
  113. 　　　
复制代码
      对了，如果使用PhantomJS作为代码的运行环境，其对于ES6的支持性不是太好，我在代码中使用了箭头函数，在运行时就报错了。为了解决这个问题，你可以使用Chrome或其他浏览器进行测试，也需要安装相应的launcher，如果你使用Chrome浏览器测试，需要安装karma-chrome-launcher插件。
　　或者，你可以使用Babel等工具对代码进行转码后进行测试。
　　使用PhantomJS的好处在于其是一个无界面的浏览器运行环境，可以跑在命令行环境中，在某些没有Chrome等浏览器服务器环境下比较好用，方便代码验收和集成。
　　对于Karma的介绍就到这里了，本文只是对Karma的安装和使用进行了简单的介绍，权当抛砖引玉，至于更多的用法，您可以再进行研究。

作者: 梦想家    时间: 2018-5-14 17:27




欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2