Javascript & QA 工程師 -實戰篇

karma

(大型集成化開發.)
npm install karma –save-dev (集成化測試環境 集成瀏覽器 & 斷言庫)
npm install -g karma-cli
karma init 上下鍵選擇 選擇斷言庫, 建議選擇jasmine 這個斷言庫
能做什麼,首先是一個js 就要有一個瀏覽器,和一個斷言庫 所以是大型集成化環境
初始化步驟:
- no 不選擇 require插件
- PhantomJS 選擇無頭瀏覽器然後回車
- 最後一項選擇no 不需要檢測文件變化看到文件karma.conf.js 文件說明 初始化成功
接下來配置karma.conf.js 的文件

//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
  })
}

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

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

如果不是第一次karma start執行可能會少包,可以以下命令行補充安裝

npm install karma-jasmine –save
npm i jasmine-core –save,
npm install karma-jasmine –save,
npm install karma-phantomjs-launcher –save,
npm install phantomjs –save,

npm install karma-coverage –save-dev(代碼覆蓋率的問題)
配置文件:

// karma.conf.js 
module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],

    // coverage reporter generates the coverage 
    reporters: ['progress', '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']
    },

    // optionally, configure the reporter 
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    }
  });
};
//然後執行 karma 會生產可視化的html頁面.而且會自動生成文件./coverage 文件 查看裏面index.html 既可以查閱代碼使用情況

e2e

功能測試 自動化測試 端對端 也可使用新出來的 rize;nightwatchjs雖然功能強大,但是配置複雜,vue就是用這個的e2e工具 的;還有一個就是阿里巴巴家的端對端測試工具f2etest 有條件可以自學起來,這裏使用這個selenium ,地位能相當於e2e中的jquery
npm install selenium-webdriver –save

然後下載對應的 瀏覽器內核選擇系統匹配的, 我這裏選擇的是fireFox

//usage: //baidu.spec.js
const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('http://www.google.com/ncr');
    await driver.findElement(By.name('q'));.sendKeys('webdriver', Key.RETURN);
    await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
})();
//執行可以寫進npm 啓動項裏.    
"scripts": {
    "e2e": "node ./e2e/*.js",
    "permance": "node ./permance/code.js",
    "ui": "backstop test"
  },

9.性能測試 頁面性能 秒開率 node性能 代碼的性能

ui測試

npm install -g backstopjs
然後backstop init 會多出兩個文件 /backstop_data 一個是backstop.json
文件上不需要什麼配的的地方
但有要說明的地方.

//backstop.js
    {//測試的設備以及寬高
      "label": "phone",
      "width": 375,
      "height": 667
    },
    "cookiePath": "backstop_data/engine_sc" //要保存的cookie
    "url": "http://map.qq.com/m/"  //上線的要測試的目標url
    "bitmaps_reference": "backstop_data/bitmaps_reference",//放ui 設計圖.
    "bitmaps_test": "backstop_data/bitmaps_test",//目標網站生產的網址 圖片
    "engine_scripts": "backstop_data/engine_scripts", //引擎
    "html_report": "backstop_data/html_report",//生產報告文件的目錄

js性能測試

npm i –save benchmark 用測試js運行速度,以及代碼的健壯性

//code.js   js性能測試
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 });
  //執行  node code.js

接口測試

需要的npm包:
express 構建簡單node服務;
npm install supertest –save-dev把node環境集成;
npm install –save-dev mocha 異步執行接口,比如斷言等
npm install –save-dev mochawesome用於生產mocha報表

// app.js   先用express.啓動服務,簡單的接口
var express = require('express');
var app = express();

app.get('/test', function (req, res) {
  res.send({
      data:'Hello World!'
  });
});

var server = app.listen(3000, function () {
  console.log('Example app listening');
});
module.exports = app;

//router.spec.js  接口測試
const superagent = require('supertest');//接口測試的  應用node環境, 把node 那個環境集成進來
// mocha異步接口測試  比如說斷言,
const app = require('./app');

function request(){
    return superagent(app.listen());
}
describe("node接口測試",function(){
    it("test 接口測試",function(done){
        request()
        .get('/test')
        .expect('Content-Type', /json/)
        .expect(200)
        .end(function(err, res) {
            if(res.data == "Hello World!"){
                done();
            }else{
                done(err);
            }
        //   if (err) throw err;
        });
    });
});

// mochaRunner.js //配置mochawesome可視化界面
const Mocha = require("mocha");
const mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions:{//生產的報表
        reporteDir:"./reports/mochawesome-reporter"
    }
});
mocha.addFile('./service/router.spec.js');
mocha.run(function(){
    console.log("done");
    process.exit();
})