未完待续...

1. 单元测试 (karma)

2. e2e测试 (selenium-webdriver)

3. UI测试 || "UI走查" (backstopjs)

4. 接口测试 (mocha && mochawesome)

前提

新建一个项目目录,进入目录,初始化npm

$ npm init

微信截图_20181109171530.png

一路回车就ok了,项目目录里自动生成了package.json文件.就算成功了

1) karma

Karma介绍
　　karma不是一个测试框架，也不是一个断言库。karma只是启动一个HTTP服务器，并生成HTML文件。所以你可以选择你自己喜欢的测试框架。如Jasmine,Mocha,QUnit等等。
Jasmine介绍
　　Jasmine即是上面所说的JavaScript测试框架。它不依赖于其他任何JavaScript组件，它有干净的语法，Jasmine断言库可以让你简单的写出测试代码，（断言：表示为一些布尔表达式，你可以采用假设的方式，当程序输出的结果是否与假设的结果一致时，断言为真，否则，断言为假）在karma上运行Jasmine可以完成JavaScript的自动化测试、生成覆盖率报告等。

Karma网址: https://karma-runner.github.io/latest/index.html

安装karma:

# Install Karma:
$ npm install karma --save-dev
$ npm install karma-cli --save-dev

安装插件:

安装完karma,还需要安装karma需要的插件,
比如 karma-jasmine (JavaScript测试框架支持)、 karma-chrome-launcher(chrome浏览器启动器) 、 jasmine-core

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

上面的代码安装了chrome的浏览器启动器.如果测试的时候是用到其他浏览器,也需要单独安装,
比如phantomjs,需要安装karma-phantomjs-launcher.
很多新人第一次按照karma文档安装都会出现这个错误,导致程序启动报错

$ npm install karma-phantomjs-launcher --save-dev

安装完karma 进行初始化

$ karma init

微信截图_20181109165705.png

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
-- ***jasmine*** 
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
-- ***no*** 
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
-- ***PhantomJS*** 
***这里选择的phantomjs,是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。***
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
-- 可以先不填写
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
--可以先不填写
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
-- ***yes***

3) backstopjs

如何做前端样式的自动化回归测试呢？

BackstopJS就是一个能够实现css自动化回归测试的工具，和Mocha这种依靠JavaScript判断断言语句正误和PhantomJS以模拟用户操作的测试工具不同，BackstopJS是一个基于比较网站快照的变化的回归测试工具，因此他更适给项目中的样式做回归测试，可以确保我们在重构网站样式的时候样式不发生变化，而且他支持设置多种浏览器尺寸，可以测试响应式布局。

安装

npm install -g backstopjs

npm有时候会报错.可以用另外一种安装方式cnpm

cnpm install -g backstopjs

backstopjs
什么是backstop
BackstopJS就是一个能够实现css自动化回归测试的工具，BackstopJS是一个基于比较网站快照的变化的回归测试工具，非常适合给项目中的样式做回归测试，可以确保我们在重构网站样式的时候样式不发生变化，而且他支持设置多种浏览器尺寸，可以测试响应式布局。
比较下resemble.js 和phantomCss,backstop算是比较容易上手使用的,方便配置,phantomCss配合casper进行截图回归测试还是挺不错的,但是两张图diff的话不是很稳定,并且慢,目前phantomCss已经不维护了,不再支持最新phantomjs,resemblejs呢,入手困难,文档不容易理解,网络上只有英文文档,国内介绍resemblejs的文章很少.

安装方法:

npm i backstopjs -g

输入backstop -v //显示版本号标明安装成功

目录介绍

├── backstop_data
│   └── bitmaps_reference //存储样板图的地方
│   └── bitmaps_test  //截图存储的地方
│   └── engine_scripts //配置静态服务器,自定义脚本casper/puppet/chromy
│       └──clickAndHoverHelper
│       └──loadCookies  
│       └──onBefore
│       └──onReady 
│       └──waitForHelperHelper       
│   └── html_report  //执行test后弹出的html界面
├── backstop.json  //backstop的配置文件

配置文件

{
    //测试用例id，用于屏幕截图命名。BackstopJS将自动为您生成一个，以避免命名与BackstopJS资源的冲突。
    "id": "backstop_default",
    //测试视口，就是配置各种分辨率
    "viewports": [{
            "label": "phone", // iphone 
            "width": 320,
            "height": 480
        },
        {
            "label": "phone", // iphone 
            "width": 750,
            "height": 960
        },
        {
            "label": "tablet", //平板
            "width": 1024,
            "height": 768
        }
    ],
    //在执行所有脚本前、页面加载后执行的脚本。通过他我们可以执行用express做一个静态服务器 支持casper chromy puppet
    "onBeforeScript": "puppet/onBefore.js",
    "onReadyScript": "puppet/onReady.js",
    //测试用例
    "scenarios": [{
        "label": "BackstopJS Homepage", //测试名称
        "cookiePath": "backstop_data/engine_scripts/cookies.json", //设置cookies
        "url": "https://garris.github.io/BackstopJS/", //所测试的url
        "referenceUrl": "", //创建引用时指定不同的状态或环境。
        "readyEvent": "", //预定义的字符串记录到控制台来触发屏幕捕获。---实现异步交互
        "readySelector": "", //等到此选择器存在后再继续 ---实现异步交互
        "delay": 0, //等待几秒后
        "hideSelectors": [], //设置为visibility的选择器数组：hidden
        "removeSelectors": [], //设置为display的选择器数组：none
        "hoverSelector": "", //满足上述条件后 - 使用此脚本修改屏幕前的UI状态镜头，例如悬停，点击等
        "clickSelector": "", //在屏幕截图之前单击指定的DOM元素。
        "clickSelectors": "", // *仅限Puppeteer *获取selctors数组 - 模拟多个顺序点击交互。
        "postInteractionWait": 0, //在与hoverSelector或clickSelector交互后等待选择器（可选择接受以ms为单位的等待时间。想法用于单击或悬停元素转换。默认使用onReadyScript）
        "selectors": [], //选择需要截图的选择器
        "selectorExpansion": true, //定位元素
        "expect": 0, //跟选择器配合使用,说期望找到的选择器的数量跟配置的数量是否匹配,不匹配的话表示测试失败
        "misMatchThreshold": 0.1, //允许通过测试的不同像素的百分比
        "requireSameDimensions": true //测试必须与参考尺寸相同
    }],
    "paths": {
        "bitmaps_reference": "backstop_data/bitmaps_reference", //存储样板图
        "bitmaps_test": "backstop_data/bitmaps_test", //截图输出路径
        "engine_scripts": "backstop_data/engine_scripts", //js配置路径
        "html_report": "backstop_data/html_report", //显示对比图的html
        "ci_report": "backstop_data/ci_report"
    },
    //报告的形式，支持命令行和浏览器两种
    "report": ["browser"],
    "engine": "casper", //配置引擎属性,slimerjs(Gecko / Mozilla,需要安装),casper,chromy(webkit)
    "engineOptions": { //配置引擎属性的默认值
        "casperFlags": [
            "--engine=slimerjs",
            "--proxy-type=http",
            "--proxy=proxyIp:port",
            "--proxy-auth=user:pass"
        ]
    },
    "asyncCaptureLimit": 5, //一次能捕获5个屏幕
    "asyncCompareLimit": 50, //配置测试期间所需的RAM量
    //是否打印测试日志
    "debug": false,
    "debugWindow": false,
    "resembleOutputOptions": {  //比较差异输出图片的配置
        "errorColor": {
            "red": 255,
            "green": 0,
            "blue": 255
        },
        "errorType": "movement",
        "transparency": 0.3,
        "ignoreAntialiasing": true
    }
}

使用方法
backstop很方便,开箱即用
初始化

backstop init 

直接执行,在backstop_data/bitmaps_test 可以看到截图

backstop test

把上一个backstop test所存储的截图设置为样板图,再次执行 backstop test的时候,当前截图跟样板图进行比较,生成diff图

backstop approve 

执行backstop reference ,能把当前配置的图片存储到bitmaps_reference,当再次执行 backstop test 的时候,会把当前截图跟样板图进行比较,生成diff图

backstop reference 

如何对UI?
可以跟设计稿比较,把设计稿按照存到bitmaps_reference,命名规范按照backstop给的格式命名,直接执行backstop test 就能看到设计稿跟自己写的网页区别哪里,节约对UI的时间

还能为了能够和服务器集成，我们使用commonjs模块的形式调用backstopjs，
引入方法

const  backstop  =  require（' backstopjs '）;

//执行
backstop('test')
  .then(() => {
    // test successful
  }).catch(() => {
    // test failed
  });

例子

var http = require('http');
var express = require('express');
var backstop = require('backstopjs');
var path = require('path');
var app = express();
app.use("/", express.static(path.join(__dirname ,'../html/')));

// 创建服务端
var sever = http.createServer(app).listen('3000', function() {
    //执行backstop test
    backstop('test').then(function () {
        sever.close();
    });

     //执行backstop reference
    // backstop('reference').then(function () {
       // sever.close();
   // });
});

当前项目里安装配置backstop,可通过npm 执行脚本,只要全局安装了packstopjs,在package.json配置,执行npm run init 便能使用了

"scripts": {
 "approve": "backstop approve",
 "test": "backstop test", //注意别跟vue-cli下的e2e/unit自动化测试命令重复了
 "init": "backstop init"
}

有两个疑问?
backstop.json 里的 viewports 截图大小配置不管用,除了官网,我暂时没查出什么原因
执行 backstop test 有时候会报错,但是不影响使用