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();
})