【Karma】多环境自动测试框架 -- 基础教程

BaronZhang 发布于2019-08-21 16:21 / 1003人阅读

摘要：介绍前身，创建出来的以下是官网对的相关特点介绍支持真实浏览器无浏览器热更新，文件变化后自动测试测试框架无关性支持开源易测试持续集成安装配置配置项自动监控更新如果为相对路径，则加上作为前缀配合运行浏览器如果浏览器在指定时间

介绍

前身 Testacular， AngularJs Team 创建出来的. 以下是官网对Karma的相关特点介绍

支持真实浏览器, 无浏览器PhantomJS

热更新，文件变化后自动测试

测试框架无关性支持（Jasmine, Mocha, QUnit）

开源

易测试

持续集成

安装

npm install -g karma
or 
npm install -D karma

配置

karma init
or
karma init karma.conf.js

配置项

-- autoWatch 自动监控更新
-- basePath 如果 basePath 为相对路径，则加上 __dirname作为前缀, 配合files
-- browsers 运行浏览器 ["Chrome", "Firefox"]
-- captureTimeout 如果浏览器在指定时间内监控失败，karma将会删杀死进程并重启, 如果重试3次都失败，则放弃启动
-- colors 输出是否输出颜色
-- exclude 忽略加载的文件列表
-- files 浏览器访问的文件列表
-- hostname 主机名
-- logLevel 日志等级 LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
-- loggers 日志输出
-- port 端口号
-- preprocessors 预处理
-- proxies 代理配置
-- reportSlowerThan 运行慢时间标准, 0 表示不开启
-- reporters
-- runnerPort karma run 端口
-- singleRun 是否逐个运行浏览器
-- urlRoot
-- jsVersion firexfox 浏览器支持

files 配置介绍

{
  files: [
    {pattern: "test/unit/*.js", watched: true, include: true, served: true},
    {pattern: "src/**/*.js", included: false},
    "test/test-main.js"
  ]
}

-- pattern 匹配的模式，使用 minimatch库匹配
-- watched 是否监控文件变化
-- included 是否直接script引入
-- served 文件是否部署在 karma 的 web服务上
-- nocache 默认为 false，表示开启缓存

启动

karma start

如果使用 karma start 启动了服务, 但没通过监听文件变化自动运行测试脚本, 可以手动执行karma run测试.

浏览器配置

{
    browsers: ["Chrome", "Firefox"]
}

注意：大多数浏览器启动需要安装插件

# Install the launcher first with NPM:
$ npm install karma-xxx-launcher --save-dev

配置启动插件

{
  plugins: [
    "karma-chrome-launcher",
    "karma-firefox-launcher"
  ]
}

设置浏览器启动路径

# Changing the path to the Chrome binary
$ export CHROME_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the Chrome Canary binary
$ export CHROME_CANARY_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the PhantomJs binary
$ export PHANTOMJS_BIN=$HOME/local/bin/phantomjs

Coverage 代码覆盖率

激活代码覆盖率报告

{
    reporters: ["coverage"],
    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      "src/**/*.js": ["coverage"]
    },

    coverageReporter: {
      type: "html",
      dir: "coverage/"
    }
}

代码覆盖率配置

type

html

lcov (lcov + html)

lcovonly

text

text-summary

cobertura

dir
输出文件夹位置

file
type 为 text 或者 text-summary 时， file 有效，生成指定文件

Preprocessors 预处理插件

代码预处理，可以使用 es6， ts 编写js，通过 babel 或 ts解释器 进行转换.

常见的预处理插件，karma-coverage, karma-webpack

基于webpack的预处理配置

{
  files: [
    "./index.js"
  ],
  preprocessors: {
    "./index.js": ["webpack", "sourcemap"]
  },
  webpack: webpackConfig, // webpack 配置
  webpackMiddleware: {
    noInfo: true
  },
  plugins: [
    "karma-jasmine",
    "karma-mocha-reporter",
    "karma-sourcemap-loader",
    "karma-webpack"  // 前提要求 webpack已经包含
  ]
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88432.html

Javascript CI篇（2）- Karma 基础学习

摘要：核心功能就是启动一个服务并监听项目文件改变，文件改变后再刷新服务器。 Karma 简介 Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！ Karma是一个基于Node.js的JavaS...

Ku_Andrew 2019-08-20 18:11 评论0 收藏0
【Karma】为开发者提供一个测试环境工具 -- 基础教程

摘要：介绍本质上是一个批量启动浏览器运行测试源码的工具运行的结果以命令行的方式返回测试结果是否通过还是不通过监听所有文件包括配置文件的变化一旦文件发生变化则发送信号给正在测试的服务然后通知浏览器，监听页面的的将会被刷新运行，并将运行结果发送给服务介绍 Karma Karma本质上是一个批量启动web浏览器运行测试源码的工具. 运行的结果以 command line 命令行的方式返回测试结...

zhongmeizhi 2019-08-20 19:09 评论0 收藏0
聊一聊前端自动化测试

摘要：在真正写了一段时间的基础组件和基础工具后，才发现自动化测试有很多好处。有了自动化测试，开发者会更加信任自己的代码。由于维护测试用例也是一大笔开销毕竟没有多少测试会专门帮前端写业务测试用例，而前端使用的流程自动化工具更是没有测试参与了。本文转载自天猫前端博客，更多精彩文章请进入天猫前端博客查看前言为何要测试以前不喜欢写测试，主要是觉得编写和维护测试用例非常的浪费时间。在真正写了...

wthee 2019-08-21 10:50 评论0 收藏0
前端进阶之路: 前端架构设计(3) - 测试核心

摘要：而测试驱动开发技术并不只是单纯的测试工作。需求向来就是软件开发过程中感觉最不好明确描述易变的东西。这里说的需求不只是指用户的需求，还包括对代码可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的...

Karuru 2019-08-01 18:16 评论0 收藏0
前端进阶之路: 前端架构设计(3) - 测试核心

摘要：而测试驱动开发技术并不只是单纯的测试工作。需求向来就是软件开发过程中感觉最不好明确描述易变的东西。这里说的需求不只是指用户的需求，还包括对代码可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的...

宋华 2019-08-22 11:22 评论0 收藏0