软件测试技术之Webpack单元测试，e2e测试-职坐标

软件测试技术之Webpack单元测试，e2e测试

凌雪 2018-11-02 来源：网络阅读 1012 评论 0

摘要：本文将带你了解软件测试技术之Webpack单元测试，e2e测试，希望对大家学测试技术有所帮助。

本文将带你了解软件测试技术之Webpack单元测试，e2e测试，希望对大家学测试技术有所帮助。

一、单元测试
　　实现单元测试框架的搭建、es6语法的应用、以及测试覆盖率的引入。
　　1. 需要安装的项目：
　　jasmine：单元测试库
　　karma：测试框架，配置选择phantomjs浏览器
　　karma-jasmine：操作jasmine的插件
　　karma-webpack：webpack与karma的连接
　　mock：用于数据模拟，用'npm install --save-dev mockjs'安装
　　karma-coverage：测试覆盖率报表
　　karma-spec-reporter：命令行输出测试用户的运行结果
　　babel-plugin-istanbul: 测试覆盖率显示未通过webpack打包的源码
　　由于babel-plugin-istanbul是bable的一个插件，所以需要修改.babelrc文件，代码如下:
　　{
　　"presets":["es2015","stage-2"],
　　"plugins": ["istanbul"] //这句话是重点
　　}
　　2. 配置参数及运行命令：
　　运行命令 .\node_modules\.bin\karma start .\test\karma.conf.js
　　karma命令为私有安装，karma配置文件指定在test文件夹下。
　　配置文件如下：
　　module.exports = function(config) {
　　config.set({
　　// 基路径：表示karma从那个位置开始找文件
　　basePath: '',
　　// 框架
　　frameworks: ['jasmine'],
　　// 测试的入口文件
　　files: ['../test/unit/index.js'],
　　// 排除的文件，可以是正则
　　exclude: [
　　],
　　// 对指定文件的preprocess(预处理)
　　preprocessors: {
　　'../test/unit/index.js': ['webpack', 'sourcemap'],
　　'../src/**/*.js': ['webpack','sourcemap', 'coverage', 'coverage'] //表示那些代码需要生成测试覆盖率报表
　　},
　　// 结果报表
　　reporters: ['progress'],
　　// 服务器端口
　　port: 9876,
　　// 报表中是否有颜色区分
　　colors: true,
　　// 输出的日志级别
　　// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
　　logLevel: config.LOG_INFO,
　　// 文件变化是否自动刷新
　　autoWatch: true,
　　// 测试的测试器环境
　　browsers: ['PhantomJS'],
　　// 是否依附浏览器运行
　　// if true, Karma captures browsers, runs the tests and exits
　　singleRun: false,
　　// 并发个数，同时支持在多少个浏览器运行
　　// how many browser should be started simultaneous
　　concurrency: Infinity,
　　//webpack配置
　　webpack: webpackConfig,
　　//代码覆盖率配置节点
　　coverageReporter:{
　　dir: './converage',
　　reporters:[
　　{ type: 'lcov', subdir: '.' },
　　{type: 'text-summary'}
　　],
　　}
　　})
　　}
　　*.spec.js(测试代码)如下：
　　import {init} from '../../src/ma'
　　import data from '../mocks/demo'
　　describe('demo_spec', function(){
　　it('body',() => {
　　init();
　　let button = document.querySelector('.btn');
　　button.textContent = data.btnName;
　　expect(button.textContent).toEqual(data.btnName);
　　})
　　});
　　src/ma:会向dom插件一个button标签
　　mocks/demo.js的代码：
　　import Mock from 'mockjs';
　　var template = {
　　'title': 'Demo01',
　　'btnName|1-3': '*'
　　}
　　export default Mock.mock(template);
　　mocks/demo：用mockjs模拟的一些数据
　　3. 运行结果
　　二、e2e(模拟用户行为的测试)
　　1. 需要安装的npm包
　　selenium-server：webdriver测试服务器的nodejs搭建
　　nightwatch：对selenium-server的包装，简化其配置
　　chromedriver：selenium的chrome测试环境插件，如果是firefox、ie等都需要重新下测试环境插件。
　　2. 原理简要说明
　　selenium-server由于浏览器同源策略(域名、协议、端口相同才是同源，如不明白可以baidu)的限制，selenimue就以代理的方式进行目标站点的测试(也就是测试环境跑的浏览器连接是selenium-server产生的代理服务器)，selenium-server代理服务器=selenium核心Js + 测试目标站点(proxy)。
　　3. 相关代码展示
　　nightwatch配置参数：
　　module.exports = {
　　"src_folders": ["test/e2e/specs"],
　　"selenium":{
　　"start_process":true,
　　"server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-3.3.1.jar",
　　"host": "127.0.0.1",
　　"port": 9538,
　　"cli_args":{
　　"webdriver.chrome.driver": require('chromedriver').path
　　}
　　},
　　"test_settings":{
　　"default": {
　　"selenium_port": 9538,
　　"selenium-host": "127.0.0.1",
　　"silent": true,
　　"globals":{
　　"devServerURL": "//localhost:8080"
　　}
　　},
　　"chrome":{
　　"desiredCapabilities": {
　　"browserName": "chrome",
　　"javascriptEnabled": true,
　　"acceptSslCerts": true
　　}
　　}
　　}
　　}
　　selenium.server_path指向为selenium的jar包
　　selenium.cli_args：配置运行时的必要参数，webdriver.chrome.driver指定适合selenium的chrome安装位置
　　test.default.globals.devServerURL：需要测试的目标站点，此站点必须处于活动状态。
　　测试用例代码：
　　module.exports = {
　　"default e2e": function(browser){
　　var devServer = browser.globals.devServerURL;
　　var driver = browser.url(devServer)
　　.waitForElementVisible(".btn", 5000)
　　.setValue('.btn', 'e2e产生的内容');
　　browser.getText('.btn', function(result){
　　console.log(result.value);
　　});
　　browser.end();
　　}
　　}

　　nightwatch相关api可以参考此链接
　　运行e2e的命令 .\node_modules\.bin\nightwatch --config ".\test\e2e\runner.js" --env chrome