來自大佬的自動化測驗提升之路

使用Karma自動化測驗

自動重繪，自動打開瀏覽器，就能把測驗結果告訴我們，不需要手動去打開瀏覽器重繪看控制臺錯誤

工具介紹

Karma（[?kɑrm?] 卡瑪）是一個測驗運行器，它可以呼起瀏覽器，加載測驗腳本，然后運行測驗用例
Mocha（[?mo?k?] 摩卡）是一個單元測驗框架/庫，它可以用來寫測驗用例
Sinon（西農）是一個 spy / stub / mock 庫，用以輔助測驗（使用后才能理解）

步驟

1. 安裝工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

2.創建 karma配置 （新建karma.conf.js)

.創建 karma配置 (新建 karma.conf.js)

files

告訴karma 測驗用例在哪 **/*指的是dist/x/下面所有檔案，沒有寫css為什么也要加載css，如果沒有寫會報錯，在打包的時候有產生css，它會把css和js分開打包，

module.exports = function (config) {
     config.set({
         // 基礎路徑，用在files，exclude屬性上
         basePath: '',
         
           //引入 mocha  和 sinon-chai
            frameworks: ['mocha', 'sinon-chai'],
            client: {
                chai: {
                    includeStack: true
                }
            },

            // 需要加載到瀏覽器的檔案串列

            files: [
                'dist/**/*.test.js',
                'dist/**/*.test.css'
            ],

            // 排除的檔案串列

            exclude: [],

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

            使用測驗結果報告者
    //  可能的值: "dots", "progress"
    //  可用的報告者：https://npmjs.org/browse/keyword/karma-reporter

            reporters: ['progress'],

            // 服務埠號
            port: 9876,

            // 啟用或禁用輸出報告或者日志中的顏色
            colors: true,

            // 日志等級
            // 可能的值: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
            logLevel: config.LOG_INFO,

            // 啟用/禁用監視檔案并在任何檔案更改時執行測驗
            autoWatch: true,

            // 啟動瀏覽器
            browsers: ['ChromeHeadless'],

            // 持續集成模式
            // 為 true, Karma會捕獲瀏覽器，運行測驗并退出
            singleRun: false,

            // 并發級別
            // 應該同時啟動多少個瀏覽器
            concurrency: Infinity
        })
    }

3.創建測驗腳本 （package.json找到scripts并改寫 scripts)
"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-minify && karma start --single-run"
 },

parcel build test/* 打包test里所有一級檔案，打包后會生成dist檔案，然后打包的檔案在dist里面， 為什么要打包呢？因為很多語法例：import xx from xxx，瀏覽器是不認識的，打包就是翻譯成瀏覽器認識的語言
–no-minify不要 minify,不加會經常出bug
karma start 啟動karma
–single-run 只運行一次

如果你有什么地方不懂得話群號：【1125939340 】群里的免費資料都是筆者這些年來的測驗生涯的精華，還有同行大神一起交流技術哦

4.創建 用例測驗檔案 test/xxx.test.js

使用的是 BDD，行為驅動測驗

如何寫測驗用例？

每個it 代表新的測驗用例，引數一：名字是什么，引數二：代碼是什么，

expect(xxx).to.equal(yyy)期待xxx等于yyy 或 expect(xxx).to.eq(yyy)

詳細可參考 chai官網 檔案

describe it是Mocha提供的，是直接掛在window上的全域函式，不需要引入

sinon 提供可假函式，為什么要有假函式呢？因為當我們需要測驗點擊一個事件確定它是否被呼叫時，需要創建一個函式，看他是否被呼叫，但是在技術層面我們這樣創建const callback = function(){}，我們不知道它是否被呼叫了，所以用假函式，它知道自己是否被呼叫了，

chai提供的expect

案列：

//使用chai提供的expect
const expect = chai.expect;
 import Vue from 'vue'
 //引入測驗的組件
 import Button from '../src/button'

 Vue.config.productionTip = false
 Vue.config.devtools = false
 
 //描述 Button
 describe('Button', () => {
     //它存在，實作的它的代碼
     it('存在.', () => {
         expect(Button).to.exist
     })
     it('可以設定icon.', () => {
     	 //構建Button
         const Constructor = Vue.extend(Button)
         //創建實體
         const vm = new Constructor({
         //傳入props ，并掛載到頁面
         propsData: {
             icon: 'settings'
         }
         }).$mount()
         //找到實體上的'use'標簽
         const useElement = vm.$el.querySelector('use')
       //期待它的屬性等于#i-settings
       expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
       //銷毀實體
         vm.$destroy()
     })
     //測驗order， 是css，css是當頁面出現才會進行渲染的，所以必須在頁面上出現才能測驗到
     it('icon 默認的 order 是 1', () => {
         const div = document.createElement('div')
         document.body.appendChild(div)
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings',
         }
         }).$mount(div)
         const icon = vm.$el.querySelector('svg')
         expect(getComputedStyle(icon).order).to.eq('1')
         vm.$el.remove()
         vm.$destroy()
     })
     
     it('點擊 button 觸發 click 事件', () => {
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings',
         }
         }).$mount()
	   // 用sinon提供的假函式
         const callback = sinon.fake();
         vm.$on('click', callback)
         vm.$el.click()
     //期待cllback 被呼叫了
     expect(callback).to.have.been.called

     })
 })

5.運行測驗

1.npm run test 一次性運行

當運行 npm run test 它就會去運行，我們在package.json里運行scriptes- test命令 ，run 就是等運行什么命令

當運行這行命令，它會對js進行打包，然后打開Chrome瀏覽器，然后在chorme運行網頁，運行完網頁自動關閉瀏覽器，然后把瀏覽器的輸出顯示在終端

如果不使用rm -rf .cache dist 將可能出現 這樣的錯誤

不想每次都rm -rf .cache dist 修改下腳本,添加–no-cache 不要快取，每次都重新打包，添加完后每次只需要npm run test 即可

"test": "parcel build test/* --no-cache --no-minify && karma start --single-run"

2.npm run dev-test
進行watch 運行，改了代碼后，會自動幫你測驗

最后： 歡迎大家關注公眾號：【程式媛木子】，領取一份300頁pdf檔案的Python自動化測驗工程師核心知識點總結！

公眾號里大部分資料都是面試時面試官必問的知識點，也包括了很多測驗行業常見知識，其中包括了有基礎知識、Linux必備、Shell、互聯網程式原理、Mysql資料庫、抓包工具專題、介面測驗工具、測驗進階-Python編程、Web自動化測驗、APP自動化測驗、介面自動化測驗、測驗高級持續集成、測驗架構開發測驗框架、性能測驗、安全測驗等，

如果你測驗中有許多的困惑，那么我創建的軟體測驗技術交流群將會是你接觸良師益友的有益社區，同行或許可以給你帶來一些實際性的幫助與突破，Q群：1125939340 你也想知道同行都在怎樣致富吧！