未完待续...
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 有时候会报错,但是不影响使用
网友评论