GUI测试工具WebdriverCSS、BackstopJS、PhantomCSS、Viff介绍

以下为你介绍的GUI测试工具都可用在Linux系统上:WebdriverCSS(CSS 回归测试工具)、BackstopJS(自动 CSS 回归测试工具)、PhantomCSS(CSS 回归测试工具)、Viff(自动化 UI 测试工具)。

1、WebdriverCSS(CSS 回归测试工具)

WebdriverCSS CSS 回归测试工具。此插件是用于 WebdriverIO 的自动视觉回归测试工具。灵感来自于 James Cryer 的项目 PhantomCSS。初始化过后,它可以通过一个额外的 webdrivercss 指令增强 WebdrivercssIO 实例,并且使保存你的应用程序部分截屏成为可能。

示例代码:

var assert = require('assert');

// init Webdri

verIOvar client = require('webdriverio').remote({desiredCapabilities:{browserName: 'chrome'}})

// init WebdriverCSSrequire('webdrivercss').init(client);

client

.init()

.url('http://example.com')

.webdrivercss('startpage',[

{

name: 'header',

elem: '#header'

}, {

name: 'hero',

elem: '//*[@id="hero"]/div[2]'

}

], function(err, res) {

assert.ifError(err);

assert.ok(res.header[0].isWithinMisMatchTolerance);

assert.ok(res.hero[0].isWithinMisMatchTolerance);

})

.end();

它是如何工作的?

定义应用程序中应该始终看起来相同的区域。

使用WebdriverIO和WebdriverCSS编写一些E2E测试并截取这些区域的屏幕截图。

继续在您的应用程序或网站上工作。

一段时间后重新运行测试。

如果所需区域与先前拍摄的屏幕截图不同,则会生成图像差异,并在测试中通知您。

安装说明:

WebdriverCSS使用GraphicsMagick进行图像处理,要安装此软件包,您需要将其预先安装在系统上:

$ sudo apt-get install graphicsmagick

安装完依赖项之后,您可以通过NPM安装WebdriverCSS:

$ npm install webdrivercss

$ npm install webdriverio # 如果尚未安装

下载地址:https://github.com/webdriverio-boneyard/webdrivercss

2、BackstopJS(自动 CSS 回归测试工具)

BackstopJS 是自动 CSS 回归测试工具,它通过比较不同视窗大小的 DOM 截图来回应你所测试的 Web 界面。可以识别出两个不同视角上的网页差异。

GUI测试工具WebdriverCSS、BackstopJS、PhantomCSS、Viff介绍

{  "viewports": [

{

"name": "phone",      "width": 320,      "height": 480

},

{

"name": "tablet_v",      "width": 568,      "height": 1024

},

{

"name": "tablet_h",      "width": 1024,      "height": 768

}

],

"scenarios": [

{

"label": "http://getbootstrap.com",

"url": "http://getbootstrap.com",

"hideSelectors": [],

"removeSelectors": [

"#carbonads-container"

],

"selectors": [

"header",

"main",

"body .bs-docs-featurette:nth-of-type(1)",

"body .bs-docs-featurette:nth-of-type(2)",

"footer",

"body"

],

"readyEvent": null,

"delay": 500

}

]

}

安装:

$ npm install -g backstopjs

下载地址:https://github.com/garris/BackstopJS

3、PhantomCSS(CSS 回归测试工具)

PhantomCSS 是 CSS 回归测试工具。一个通过 PhantomJS 或者 SlimerJS 和 Resemble.js 进行自动视觉回归测试的 CasperJS 模块。

示例代码:

casper.

start( url ).

then(function(){

// do something

casper.click('button#open-dialog');

// Take a screenshot of the UI component

phantomcss.screenshot('#the-dialog', 'a screenshot of my dialog');

});

GUI测试工具WebdriverCSS、BackstopJS、PhantomCSS、Viff介绍

从命令行/终端运行:

casperjs test demo/testsuite.js

or:

casperjs test demo/testsuite.js --verbose --log-level=debug --xunit=results.xml

下载:

PhantomCSS可以通过多种方式下载:

npm install phantomcss(PhantomCSS本身不是Node.js模块)

bower install phantomcss

git clone git://github.com/Huddle/PhantomCSS.git

如果不是通过NPM安装,则需要在PhantomCSS根文件夹中运行npm install。

请注意,根据您安装PhantomCSS的方式,可能需要设置libraryRoot配置属性以链接到phantomcss.js所在的目录。

下载地址:https://github.com/HuddleEng/PhantomCSS

4、Viff(自动化 UI 测试工具)

Viff 测试框架,它可以不同环境和浏览器下的 Web 页面的视觉差异。

安装:

Viff使用selenium服务器运行,您可以使用wdm轻松设置selenium服务器:

$ npm install wdm -g

$ wdm update --standalone //安装selenium和webdrivers

然后安装viff命令行:

npm install -g viff

示例代码:

var Viff = require('viff');var viff = new Viff('http://localhost:4444/wd/hub');

viff.takeScreenshot('firefox', 'http://localhost:3000', '/path1', function (bufferImg)

{  /* buffer of images */  });

// partial of web pages

viff.takeScreenshot('firefox', 'http://localhost:3000', ['path1', '#css-selecor'], 

function (bufferPartialImg) {});

// responsive of web pages

function size(width) {  return function (driver) {

driver.setWindowSize(width, 600 /* any height*/);

};

}

viff.takeScreenshot('firefox', 'http://localhost:3000', ['path', size(1024)], 

function (bufferImg) {});

// Q promiseviff.takeScreenshot('firefox', 'http://localhost:3000', ['path', size(1024)])

.done(function (bufferImg)

{    /* generate image here */

})

.catch(function (err)

{    /* handle err here */

})

// using browser

stackviff = new Viff('http://hub.browserstack.com/wd/hub');

viff.takeScreenshot({  'browserName' : 'iPhone',  'platform' : 'MAC',

'device' : 'iPhone 5',  'browserstack.user': /* your name */,

'browserstack.key': /* your key */},

'http://www.google.com', 'path1', function (bufferImg) {});

GUI测试工具WebdriverCSS、BackstopJS、PhantomCSS、Viff介绍

使用Viff Server(测试版):

您可以尝试使用viffserver和viff-client与功能测试一起进行viff测试。

首先运行viff服务器:

$ viffserver

并且在功能测试代码中集成了viffclient.post方法。

下载地址:https://github.com/winsonwq/viff

注明

以上就是GUI测试工具WebdriverCSS、BackstopJS、PhantomCSS、Viff的介绍内容,这些GUI测试工具都能使用在Linux操作系统中。

栏目相关文章