自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置

最新推荐文章于 2024-03-21 23:11:17 发布

viceen

最新推荐文章于 2024-03-21 23:11:17 发布

阅读量1.5k

点赞数 1

分类专栏：架构和运维文章标签： javascript 自动化前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/123286889

版权

架构和运维专栏收录该内容

78 篇文章 15 订阅

订阅专栏

自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置

测试环境&帮手Karma

Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流 Web 浏览器，也可以集成到 CI（Continuous integration）工具，还可以和其他代码编辑器一起使用。

Karma 会监控配置文件中所指定的每一个文件，每当文件发生改变，它都会向测试服务器发送信号，来通知所有的浏览器再次运行测试代码。此时，浏览器会重新加载源文件，并执行测试代码。其结果会传递回服务器，并以某种形式显示给开发者。

访问浏览器执行结果，可通过以下的方式

手工方式 - 通过浏览器
自动方式 - 让 karma 来启动对应的浏览器

工作原理简介

karma 是一个典型的 C/S 程序，包含 client 和 server ，通讯方式基于 Http ，通常情况下，客户端和服务端基本都运行在开发者本地机器上。

一个服务端实例对应一个项目，假如想同时运行多个项目，得同时开启多个服务端实例。

Server

Server 是框架的主要组成部分之一，它内部保存了所有的程序运行状态，比如 client 连接，当前运行的单测文件，根据这些数据状态，它提供了下面几个功能，下图是 server 的结构

在这里插入图片描述

监听文件
与 client 进行通讯
向开发者输出测试结果
提供 client 端所需的资源文件

Client

client 是单测最终运行的地方，类似一个 web app ，跟 server 端通讯利用 socket.io，执行单测在一个独立的 iframe 中。下面是它的结构图

在这里插入图片描述

client 和 server 端通讯采用 socket.io

client 端会发送这些消息

在这里插入图片描述

server 端会发送这些消息

在这里插入图片描述

安装Karma

对于Nodejs版本的要求：

Karma currently works on Node.js 6.x, 8.x, and 10.x. See FAQ for more info.

全局安装
```
$npm install -g karma
```
安装 Karma 命令会到全局的 node_modules 目录下，我们可以在任何位置直接运行 karma 命令。
```
npm install -g karma-cli
```
此命令用来安装 karma-cli，它会在当前目录下寻找 karma 的可执行文件。这样我们就可以在一个系统内运行多个版本的 Karma。
本地安装
```
$ npm install karma --save-dev
```
安装 Karma 命令到当前 node_modules 目录下，此时，如果需要执行 karma 命令，就需要这样
```
./node_modules/.bin/karma

npx karma --version
或
npx karma init
```

配置Karma

karma配置文件可以用JavaScript，CoffeeScript或TypeScript编写，并作为常规Node.js模块加载。

除非作为参数提供，否则Karma CLI将在以下位置以该顺序(从上至下)查找配置文件

./karma.conf.js
./karma.conf.coffee
./karma.conf.ts
./.config/karma.conf.js
./.config/karma.conf.coffee
./.config/karma.conf.ts

在配置文件中，配置代码通过设置module.exports指向一个接受一个参数的函数：配置对象。

// karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '../..',
    frameworks: ['jasmine'],
    //...
  });
};
# karma.conf.coffee
module.exports = (config) ->
  config.set
    basePath: '../..'
    frameworks: ['jasmine']
    # ...
// karma.conf.ts
module.exports = (config) => {
  config.set({
    basePath: '../..',
    frameworks: ['jasmine'],
    //...
  });
}

关于typescript的支持，需要使用到ts-node，配置ts-node以使用commonjs模块格

配置文件中的基本的属性介绍：Overview

使用CLI工具，快速创建配置

打开终端，开始配置

~/Downloads/Demo is 📦 v1.0.0 via ⬢ v10.16.0 
➜ npx karma init

# 如果在应用中用到了其它的测试框架，那就需要我们安装它们所对应的插件，并在配置文件中标注它们（详见 karma.conf.js 中的 plugins 项）
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
# jasmine
> mocha
# qunit
# nodeunit
# nunit

# Require.js 是异步加载规范（AMD）的实现。常被作为基础代码库，应用在了很多的项目与框架之中，例如 Dojo, AngularJs 等
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
# yes

# 选择需要运行测试用例的浏览器。需要注意的就是，必须保证所对应的浏览器插件已经安装成功。
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
# ChromeHeadless
# ChromeCanary
# Firefox
# Safari
# PhantomJS
# Opera
# IE

# 选择测试用例所在的目录位置。Karma 支持通配符的方式配置文件或目录，例如 *.js, test/**/*.js 等。如果目录或文件使用相对位置，要清楚地是，此时的路径是相对于当前运行 karma 命令时所在的目录。
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> src/*js

# 目录中不包括的那些文件。
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.

# 是否需要 Karma 自动监听文件？并且文件一旦被修改，就重新运行测试用例？
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

执行完成后，生成了一个karma.conf.js文件：

// Karma configuration
// Generated on Wed Jul 10 2019 22:46:32 GMT+0800 (GMT+08:00)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      'src/*js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

viceen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置

自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置测试环境&帮手KarmaKarma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流 Web 浏览器，也可以集成到 CI（Continuous integration）工具，还可以和其他代码编辑器一起使用。Karma 会监控配置文件中所指定的每一个文件，每当文件发生改变，它都会向测试服务器发送信号，
复制链接

扫一扫