【大前端攻城獅之路·二】Javascript&QA⼯程師

　　今天給你們分享的主題的是Javascript&QA⼯程師。看到這個主題，可能有人問：前端開發完就OK了，剩下的丟給測試就行，哪裏還須要關心這些？但事實上呢，測試是前端開發很是重要的環節，也是邁向高級前端工程師的必經之路！

　　本文主要分爲一下四個部分：

　　· 單元測試

　　· 性能測試

　　· 功能測試

　　· 安全測試

 

　　一. 單元測試

　　單元測試（unit testing），是指對程序中的最小可測試單元進行檢查和驗證。對於單元測試中單元的含義，通常來講，要根據實際狀況去斷定其具體含義，如C語言中單元指一個函數，Java裏單元指一個類，圖形化的軟件中能夠指一個窗口或一個菜單等。總的來講，單元就是人爲規定的最小的被測功能模塊。單元測試是在軟件開發過程當中要進行的最低級別的測試活動，軟件的獨立單元將在與程序的其餘部分相隔離的狀況下進行測試。

　　在一種傳統的結構化編程語言中，好比C，要進行測試的單元通常是函數或子過程。在像C++這樣的面向對象的語言中， 要進行測試的基本單元是類。對Ada語言來講，開發人員能夠選擇是在獨立的過程和函數，仍是在Ada包的級別上進行單元測試。單元測試的原則一樣被擴展到第四代語言（4GL)的開發中，在這裏基本單元被典型地劃分爲一個菜單或顯示界面。

　　常常與單元測試聯繫起來的另一些開發活動包括代碼走讀（Code review)，靜態分析（Static analysis)和動態分析（Dynamic analysis)。靜態分析就是對軟件的源代碼進行研讀，查找錯誤或收集一些度量數據，並不須要對代碼進行編譯和執行。動態分析就是經過觀察軟件運行時的動做，來提供執行跟蹤，時間分析，以及測試覆蓋度方面的信息。

　　對於前端來講就是一個函數。

　　（1）前端爲何要作單元測試？

　　我認爲主要緣由爲一下5點：

　　1.正確性

　　測試能夠驗證代碼的正確性，在上線前作到內心有底。

　　2.自動化

　　固然手工也能夠測試，經過console能夠打印出內部信息，可是這是一次性的事情，下次測試還須要從頭來過，效率不能獲得保證。經過編寫測試用例，可以作到一次編寫，屢次運行。

　　3.解釋性

　　測試用例用於測試接口、模塊的重要性，那麼在測試用例中就會涉及如何使用這些API。其餘開發人員若是要使用這些API，那閱讀測試用例是一種很好地途徑，有時比文檔說明更清晰。

　　4.驅動開發，指導設計

 　  代碼被測試的前提是代碼自己的可測試性，那麼要保證代碼的可測試性，就須要在開發中注意API的設計，TDD將測試前移就是起到這麼一個做用。

　　5.保證重構

　　互聯網行業產品迭代速度很快，迭代後必然存在代碼重構的過程，那怎麼才能保證重構後代碼的質量呢？有測試用例作後盾，就能夠大膽的進行重構。

 

 　　（2）單元測試原則&測試風格

　　單元測試的目的是爲了讓開發者明確的知道代碼結果，原則有三點：單一職責，接口抽象，層次分離。而單元測試必備的東西是斷言庫，斷言庫是保證最小單元可否正常運行的檢測方法。

　　測試風格：測試驅動開發(Test-Driven Development,TDD)、(BehaviorDriven Development,BDD)行爲驅動開發均是敏捷開發方法論。

　　TDD關注全部的功能是否被實現(每個功能都必須有對應的測試用例)，suite配合test利用assert('tobi' == user.name);

　　BDD關注總體行爲是否符合總體預期,編寫的每一行代碼都有目的提供一個全面的測試用例集。expect/should,describe配合it利用天然語言expect(1).toEqual(fn())執行結果。

　　

　　（3）單元測試框架

　　單元測試的主要框架：

　　

 

　　（3）單元測試運行流程

　　

　　每個測試用例組經過 describe進行設置

　　1.before單個測試用例(it)開始前
　　2.beforeEach每個測試用例開始前
　　3.it定義測試用例 並利用斷言庫進行
　　設置chai如：expect(x).to.equal(true);異步mocha。
　　4.以上專業術語叫mock

　　

　　（4）自動化單元測試 karma

　　Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular更名爲Karma。Karma是一個讓人感到很是神祕的名字，表示佛教中的緣分。這個名字和LOL中的扇子媽同名 - -，比較佛系。

　　On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That‘s why we created Karma - a test runner that fits all our needs.

　　Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具可用於測試全部主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其餘代碼編輯器一塊兒使用。

　　能夠生成報告和單測覆蓋率檢查。

　　Karma.conf.js

　　

// Karma configuration
// Generated on Thu Mar 22 2018 20:30:24 GMT+0800 (CST)

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: ['jasmine'],

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


    // list of files / patterns to exclude
    exclude: [
    ],
    //指定對應的JS文件 去執行代碼的覆蓋率
    preprocessors: {
      './unit/**/*.js': ['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    },
    // 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: false,


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


    //黑窗小獨立的運行環境
    singleRun: true,

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

　　單元測試demo：

// index.js
window.test = function (num) {
    if(num == 1){
        return 1
    }else{
        return num + 1;
    }
}

// index.spec.js
describe("測試基本的函數API",function(){
    it("+1函數的應用",function(){
        expect(window.test(1)).toBe(1);
    });
});

　　

　　二. 功能測試

　　功能測試主要是e2e測試。端到端測試是一種用於測試應用程序的流程是否從開始到結束執行的方法。執行端到端測試的目的是識別系統依賴性，並確保在各類系統組件和系統之間傳遞正確的信息。

　　通俗點說，就是把整個系統看成一個黑盒，測試人員模擬真實用戶在瀏覽器中操做UI來測試。

　　常見的幾種e2e測試框架，今天主要講selenium，由於phantomjs，無頭瀏覽器不在維護，因此rize與其造成犄角之勢。能夠在終端進行端對端測試。
　　Nightwatch是一個功能很是強大，配置巨複雜的端對端測試框架，vue-cli就是用的night watch。

　　（1）Selenium

　　Selenium 是一個用於Web應用程序測試的工具。Selenium測試直接運行在瀏覽器中，就像真正的用戶在操做同樣。支持的瀏覽器包括IE（7, 8, 9, 10, 11），Mozilla Firefox，Safari，Google Chrome，Opera等。這個工具的主要功能包括：測試與瀏覽器的兼容性——測試你的應用程序看是否可以很好得工做在不一樣瀏覽器和操做系統之上。測試系統功能——建立迴歸測試檢驗軟件功能和用戶需求。支持自動錄製動做和自動生成 .Net、Java、Perl等不一樣語言的測試腳本。

　　Selenium是ThoughtWorks公司的一個強大的開源Web功能測試工具系列，採用Javascript來管理整個測試過程，包括讀入測試套件、執行測試和記錄測試結果。它採用Javascript單元測試工具JSUnit爲核心，模擬真實用戶操做，包括瀏覽頁面、點擊連接、輸入文字、提交表單、觸發鼠標事件等等，而且可以對頁面結果進行種種驗證。也就是說，只要在測試用例中把預期的用戶行爲與結果都描述出來，咱們就獲得了一個能夠自動化運行的功能測試套件。（Selenium的核心是Javascript寫的，他和瀏覽器進行通訊，把測試用例的信息發送給瀏覽器執行，從而達到自動化測試的目的。）

　　我這裏是用火狐測試的，須要先下載一個driver，geckdriver。而後nmp i selenium-webdriver --save；

　　這裏用代碼控制打開火狐，找到name爲‘wd’的元素並鍵入‘node’，而後按會車，最後退出火狐。代碼以下：

　　

const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('https://www.baidu.com/');
    await driver.findElement(By.name('wd')).sendKeys('node', Key.RETURN);
    await driver.wait(until.titleIs('node_百度搜索'), 1000);
  } finally {
    await driver.quit();
  }
})();

　　

　　使用rize框架，寫法更爲簡潔：

const Rize = require('rize');
const rize = new Rize();
rize
  .goto('https://github.com/')
  .type('input.header-search-input', 'node')
  .press('Enter')
  .waitForNavigation()
  .assertSee('Node.js')
  .end();

　　

　　三. UI測試

　　前端，做爲一個傳統的頁面仔，本身寫的樣式，內心得有點B數，不能老等着人家UI走查，說你哪哪差幾像素。

　　這裏給你們介紹一個神奇的框架 BackstopJs。

　　BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

　　

　　　　

　　Backstop配置文件，backstop.json。

　　

{
  "id": "天驕",
  "viewports": [
    {
      "label": "phone",
      "width": 375,
      "height": 667
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "chromy/onBefore.js",
  "onReadyScript": "chromy/onReady.js",
  "scenarios": [
    {
      "label": "qq",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "http://map.qq.com/m/", // 這裏是待測試的UI界面URL
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": "",
      "selectors": [],
      "selectorExpansion": true,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test", // 這裏放UI的設計圖
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"], // 報表的方式，這裏是瀏覽器
  "engine": "chrome",
  "engineFlags": [],
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

　　測試的結果頁面很是友好，她會把你的界面和UI圖的差別標註出來：

　　

 

　　三. 性能測試　　 

　　下面說下性能測試。

　　前端性能主要分爲兩部分，第一是頁面性能，如秒開率等，第二是代碼性能。今天主要說代碼性能。

　　今天主要講代碼性能測試 benchmarkjs，A benchmarking library that supports high-resolution timers & returns statistically significant results

　　字面意思理解，支持高分辨率計時器的基準測試庫，並返回統計上顯著的結果。

　　面向切面編程AOP無侵入式統計。Benchmark基準測試方法，它並非簡單地統計 執行多少次測試代碼後對比時間，它對測試有着 嚴密的抽樣過程。執行多少次取決於採樣到的數 據可否完成統計。根據統計次數計算方差。

話很少說，直接看代碼：

　　

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
suite.add('使用正則匹配字符串', function() {
    /o/.test('Hello World!');
  })
  .add('使用字符串查找', function() {
    'Hello World!'.indexOf('o') > -1;
  })
  //添加監聽
  .on('cycle', function(event) {
    console.log(String(event.target));
  })
  //執行結果
  .on('complete', function() {
    console.log('更快的是-》 ' + this.filter('fastest').map('name'));
  })
  // run async
  .run({ 'async': true });

　　執行結果以下：

　　

　　

　　下面說下 壓力測試。

　　對網絡接口作壓力測試須要檢查的幾個經常使用指標有吞吐率、響應時間和併發數，這些指標反映了服務器併發處理能力。

　　PV網站當日訪問人數 UV獨立訪問人數。PV天天幾十萬甚至上百萬就 須要考慮壓力測試。換算公式QPS=PV/t ps:1000000/ 10*60*60=27.7(100萬請求集中在10個小時，服務器每秒處理27.7 個業務請求)；

　　ab -c 100 -n 100 http://localhost:8001 每秒持續發出28個請求。
 Request per second 表示服務器每秒處理請求數 即爲QPS
。Failed requests 表示這次請求失敗的請求數 理論上壓測值越大增長
 Connection Times 鏈接時間，它包括客戶端向服務器端創建鏈接、服 務器端處理請求、等待報文響應的過程。

　　經常使用的壓力測試工具是ab、siege、http_load。

　　四. 安全測試

　　常見的安全攻擊有三種：XSS， CSRF， SQL注入。

　　（1）XSS 跨站點腳本攻擊

　　在input中輸入未閉合標籤，測試是否會執行。

><scrīpt>alert(document.cookie)</scrīpt>

　　（2）CSRF，Sql注入。

 

　　Sql注入。 ' or 1=1- -

 

　　（3）Csrf跨站請求僞造
　　這是一個cookies漏洞（身份驗證），用戶訪問了危險網站B後，B會訪問偷偷的讓用戶訪問正規網站A。正規網站對身份進行校驗後（經過cookies）認爲這是同一個用戶，則進行操做
目前沒找到什麼好的測試方法。

 

　　總結：前段時間不少前端名人的博客網站都被攻擊了，不少人吐槽前端天花板低，因此學習一門後臺語言對咱們前端開發人員對思惟培養相當重要。而是否能寫好單測很是重要。這也是咱們邁向高級前端工程師的必經之路。

　　最後我想說一句話：不懂測試的UI不是好前端；不懂後臺的產品不是好前端。前端路漫漫，吾將上下而求索。