【Karma】多環境自動測試框架 -- 基礎教程

BaronZhang 發布于2019-08-21 16:21 / 1043人閱讀

摘要：介紹前身，創建出來的以下是官網對的相關特點介紹支持真實瀏覽器無瀏覽器熱更新，文件變化后自動測試測試框架無關性支持開源易測試持續集成安裝配置配置項自動監控更新如果為相對路徑，則加上作為前綴配合運行瀏覽器如果瀏覽器在指定時間

介紹

前身 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已經包含
  ]
}

GPU云服務器云服務器 python自動化測試框架 android自動化測試框架自動化測試環境接口自動化框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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