BackstopJS具有以下特征:

  • 支撑多页面、多测试用例测试
  • 可采用脚本模拟出用户之互动作
  • 提供命令行和浏览器两栽形式报告
  • 支撑PhantomJS或SlimerJS做浏览器引擎,事实上两栽引擎也得改造出因快照对比的回归测试方案,但是BackstopJS使用重复简便易行,并且就了可透过部署切换引擎。
  • 支撑设置余浏览器尺寸,方便实现响应式布局测试
  • 得测试HTML5元素,比如网页字体和Flexbox
  • 供了扩大接口,可供应用户集成到任何测试系统受

装方式吗:

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>npm install -g backstopjs</pre>

使用方式:

BackstopJS的求实做事流程可以分成3步:

1.安排:该步骤用户需要创造一个backstop.json文件,设置屏幕的尺码、访问页面的url、测试区域之dom选择器、准备事件、用户交互等

2.预备测试样板:生成一多级页面快照,之后BackstopJS将因这些快照作为页面是否是bug的论断则

3.测试:使用时页面样式快照和之前的样板快照进行比,如果出现不愿意的生成就告出来

BackstopJS提供了零星种植下办法,cli和commonjs模块。cli可以供命令行式的家伙,而commonjs模块可叫我们当nodejs里面调用,方便继承其他测试网受。

我们简要布置一个回归测试的dome:

1.配置

这是BackstopJS的主干,配置文件默认名吧backstop.json,下面是测试配置的以身作则:

[

复制代码

](javascript:void(0); “复制代码”)

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>{
//测试用例id,用于BackstopJS管理以及也文件命名
“id”: “backstop_prod_test”,
//测试视口,就是布局各种分辨率 “viewports”: [
{ “name”: “phone”, “width”: 320, “height”: 480
}],
//在履行有脚论前、页面加载后行的剧本。通过他我们得以推行用express做一个静态服务器
“onBeforeScript”: “onBefore.js”, “onReadyScript”: “onReady.js”,
//测试用例
“scenarios”: [
{ //测试用例名称
“label”: “homepage”,
//测试的地址 “url”:
“https://garris.github.io/BackstopJS/”,
//测试的区域,支持css选择器,然后BackstopJS会将选择器指定的地方截屏
“selectors”: [ “.class”,
“#id” ], “selectorExpansion”: true, “hideSelectors”: [],
“removeSelectors”: [], “readyEvent”: null, “delay”: 500,
“misMatchThreshold” : 0.1,
//在各种的测试用例执行时、页面加载后前实施,我们好把我们针对页面操作的效仿脚本放上onReady.js中
“onBeforeScript”: “onBefore.js”, “onReadyScript”: “onReady.js” }
],
//测试图的输出路径 “paths”: { “bitmaps_reference”:
“backstop_data/bitmaps_reference”,
“bitmaps_test”: “backstop_data/bitmaps_test”, “casper_scripts”:
“backstop_data/casper_scripts”, “html_report”:
“backstop_data/html_report”, “ci_report”: “backstop_data/ci_report”
}, //测试用的浏览器还是模拟器,这里用之凡PhantomJS
“engine”: “phantomjs”,
//报告的花样,支持命令行和浏览器两种 “report”: [“browser”],
//是否打印测试日志
“debug”: false }</pre>

[

复制代码

](javascript:void(0); “复制代码”)

经安装viewports我们好安排多种屏幕尺寸,这样好形成响应式布局的测试。

scenarios可以配备多个测试用例。url指定了急需测试页面的地方;selector指定要测试的区域,如果尽页面还是测试区域可以直接给document或者是body。

当测试用例的onReadyScript中我们好设置法用户的操作的脚本,如:

[

复制代码

](javascript:void(0); “复制代码”)

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>module.exports = function(casper,
scenario, vp) {
// Example: setting cookies
casper.echo(“Setting cookies”);
casper.then(function(){
casper.page.addCookie({some: ‘cookie’});
}); // casper.thenOpen() demonstrates a redirect to the original page
with your new cookie value.
// this step is not required if used with onBeforeScript
casper.thenOpen(scenario.url); // Example: Adding script delays to allow
for things like CSS transitions to complete.
casper.echo( ‘Clicking button’ );
casper.click( ‘.toggle’ );
casper.wait( 250 ); // Example: changing behavior based on config
values
if (vp.name === ‘phone’) {
casper.echo( ‘doing stuff for just phone viewport here’ );
} // …do other cool stuff here, see Casperjs.org for a full API and
many ideas.
}</pre>

[

复制代码

](javascript:void(0); “复制代码”)

这些本子还是在casper_scripts配置的目中。

2.预备样板图

执行命令行:

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>backstop reference </pre>

backstop会自动截取屏幕整个样板图,并会见设有bitmaps_reference指定的门径下。

为了能与服务器集成,我们运用commonjs模块的款式调用backstopjs,如:

[

复制代码

](javascript:void(0); “复制代码”)

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>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 backstop(‘reference’).then(function () {
sever.close();
});
});</pre>

[

复制代码

](javascript:void(0); “复制代码”)

在咱们重构项目事先,可以运行此剧本,这样即便得转变样板图,为重构后开测试用。

别的楷模图格式如下图:

image

3.测试

在重构样式后执行命令行:

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>backstop test</pre>

同等为能够与服务器集成,我们应用commonjs模块的款型调用backstopjs,如:

[

复制代码

](javascript:void(0); “复制代码”)

<pre style=”margin-top: 0px; margin-bottom: 0px; white-space:
pre-wrap; word-wrap: break-word; font-family: “Courier New” !important;
font-size: 12px !important;”>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 backstop(‘test’).then(function () {
sever.close();
});
});</pre>

[

复制代码

](javascript:void(0); “复制代码”)

假若新转变的图形以及样板图不相同,就会见报错。生成的语有个别种植样式——命令行报告和浏览器报告,这里显得的是浏览器报告结果:

image

image.png

此展示了backstopjs做自动化回归测试的一个例,backstopjs基本能满足我们的要求,可以支持响应式布局测试、可以跟服务器集成、可以切换浏览器引擎等。不过也生弱点,因为PhantomJS和SlimerJS分别是行使webkit(blink,chrome的水源)和
Gecko (Firefox内核)作为基础,因此无法模拟ie浏览器做测试.

相关文章

网站地图xml地图