视觉感知测试(3)

　　3.Viff

　　来自ThoughtWorks，基于Javascript/node

　　支持多浏览器(Selenium WebDriver)

　　JavaScript/DSL开发测试

　　支持人工认证报表系统

　　开源，免费

　　支持嵌入式测试：智能电视，手机等

　　Viff是基于NodeJS和Selenium开发的一个本地工具。通过编写JavaScript代码来调用Selenium API, 并在真实的浏览器中进行截图比较。所以它比较适合动态的Web系统，因为可以编写代码模拟用户输入和点击操作。由于它底层使用的是Selenium作为驱动，所以他支持多种浏览器，比如IE，Chrome，Firefox等。由于最新的Selenium加入了对Android和iOS的支持，因而Viff 也能够支持Android和iOS上的浏览器测试。

　　如果对你来说搭建多浏览器环境比较困难，比如需要同时测试 IE8，IE9，IE10等，可以选择BrowserStack。BrowserStack是一个商业产品，他同时通过Web界面和API接口提供多浏览器环境给客户进行Web测试，Viff可以使用其API进行进行多浏览器截图。对于Viff，由于编写JavaScript代码也需要一定的门槛，所以对于没有代码能力的使用者在测试静态网页的时候应该选择Dpxdt，但是如果你有一定的代码能力，并且希望能在当前的功能测试里面加上视觉感知测试或者希望对局部的界面进行测试，建议选用Viff。现在Viff正在开发Web Service功能，这样以后就可以作为一个Service进行部署和使用。

　　还有其他的视觉感知测试工具，这里就不一一熬述了。在VIFF的官网上有一张多个工具的比较图，有兴趣的读者可以参考一下：http://twers.github.io/Viff-Service/

　　VIFF演示

　　1.安装

　　VIFF的安装步骤请参考其项目上的说明文档https://github.com/winsonwq/viff。

　　为了帮助大家理解和学习VIFF，我们还开发了一系列的Examples和Demos，请参见https://github.com/winsonwq/viff-examples，以下所有代码全部来自这个项目。

　　2.安装需要被测试的演示网站

　　下载https://github.com/winsonwq /viff-examples上的代码，模拟产品版本的站点在viff-examples/example/prod里面，模拟需要测试的站点在 viff-examples/example/build里面。由于演示网站都是静态代码，所以用任意一个HTTP Sever进行部署都可以，比如我使用Nginx将其部署在本地的8000端口上。部署成功之后，通过http://localhost:8000 /example/build和http://localhost:8000/example/prod就可以访问到两个测试演示站点。

　　3.使用VIFF的Main API进行测试

　　对于一个全新的项目，直接使用VIFF的Main API编写测试代码，如下：

　　测试结果报表如下：

　　1.首先测试主页，由于没有任何改动，所以测试结果是绿色，表示产品环境和测试环境没有任何改变。

　　图12 演示结果报表1

　　2.然后在搜索输入框中输入commander.js，结果发现产品版本上的show 1 repository 在测试版本上变成了showing 1 repositories，所以测试结果是红色。然后通过报表可以在立即发现改变，然后在进行人工审核其修改的正确性。这里明显是测试版本出现了错误，然后针对这个错误就可以上报一个bug了。

　　图13 演示结果报表2

　　3.清空输入框，然后在主页中点击co，然后测试结果还是红色。认真仔细的查看才发现generator在测试版本中被改成了generators。在如此多的内容中找到一个字母s的改变是非常困难的，但是通过VIFF的测试报告，又一次快速的轻松地发现了改变。

　　图14 演示结果报表3

　　4.使用VIFF的Client API进行测试

　　对于一个已经有Functional Testing的项目，可以不需要重新开发VIFF测试代码，只需要在功能测试代码中调用其Client API，同样可以完成视觉感知测试。由于当前VIFF只开发了JavaScript版本的Client API，所以下面的例子使用的是基于JavaScript开发的Functional Testing。以后VIFF会初步提供基于其他语言的Client API，比如Java，Python 和 Ruby等。

　　代码说明，其中两行绿色代码表示分别对产品环境和测试环境进行Functional Testing;其中所有的蓝色代码是Functional Testing的代码;其中所有红色部分代码是VIFF的Client API)

原文转自：http://www.ltesting.net