今天Web测试自动化中的一个热门话题是回归测试。回归是在进行了某些更改之后引入系统的错误。
这些更改可能包括修补,新功能开发,第三方组件的集成等。
在敏捷开发中,回归测试至关重要,以确保您的产品在每次迭代或冲刺结束时都能正常运行。自动化回归测试意味着您可以更快,更频繁地运行它们,同时在测试执行过程中消除人为错误。
在本文中,我们将探讨使用CasperJS编写回归测试,这是一个利用PhantomJS的易于使用的JavaScript测试框架。
PhantomJS?CasperJS?
PhantomJS是一种快速,脚本化,无头无缝的基于WebKit的浏览器-非常适合自动化网页交互。PhantomJS非常支持许多Web标准,包括DOM操作,CSS3选择器,Canvas,AJAX等。
CasperJS是一款功能强大的实用程序,运行在PhantomJS之上。
Casper提供了一大堆高级方法,极大地方便了网页浏览,点击按钮,填写表单和下载资源。此外,它还包括一个不错的测试框架-与JUnit支持竞争,实现简单的CI集成。
CasperJS自2011年以来一直存在,所以它是一个坚实的工具,具有明确的API和文档,清晰,简洁,通常很高兴阅读。
入门
安装
PhantomJS和Casper都不是Node.js模块,但它们仍然可以方便地安装npm:
npminstall-gphantomjs
npminstall-gcasperjs
组织测试
组织您的CasperJS代码的好方法是将每个测试套件放入单独的JavaScript文件中。这样,每个脚本都可以专注于您网站的特定部分或功能片段,例如主页,搜索或联系表单。
该tester模块
卡斯珀船上有一个Tester类和一个tester模块。该模块提供了一个完美的功能和单元测试API,非常适合我们的目的。
类的实例可以通过test任何Casper类实例的属性来访问。该test对象允许我们在当前上下文中运行断言,通过或失败测试,日志错误等。
您使用test对象并驻留在单个*.js文件中的典型测试套件必须使用test子命令运行,如下所示:
casperjstest/path/to/your/test.js
测试主页
通过温柔的介绍,我们来看看芊雅企服的主页,看看当我们更新内容或代码库时,我们可以检查什么样的事情可能的回归。
首先,我们需要确保我们的主页实际加载并返回200状态码。我们也会很好地检查必须在那里的重要关键字的页面标题。
所以让我们写一个最小的测试套件,并将其存储在一个名为tests.homepage.js:
casper.test.begin(‘HomepageTests’,2,functionsuite(test){
casper.start(‘http://oxagile.com’,function(){
test.assertHttpStatus(200,’01-Homepagemustbeupandrunning.’);
test.assertTitleMatch(/^CustomSoftwareDevelopmentCompany/,’02-Homepagetitlemustcontaintherightkeywords.’);
});
casper.run(function(){
test.done();
});
});
这里发生了几件事情:
该begin()方法启动我们的测试套件,其中2包含预期的测试次数;
测试套件将使用该start()方法打开一个URL,并在URL加载后执行一个功能;
这个功能是实际测试的地方;我们会一起添加更多的测试;
run()运行整个测试套件,并在完成时执行回调(该done()方法简单地将套件标记为完整的)。
好的,我们准备运行我们的脚本:
casperjstesttests.homepage.js
您应该在终端中获取以下输出:
现在我们将通过添加更多的断言来扩展我们的测试套件。让我们确保:
1.上面的区域实际上包含正确的联系方式(电话号码和电子邮件,都很重要);
2.导航菜单有五个顶级项目到位;
3.浮动免费报价按钮存在;
4.六个客户端徽标都可见;
5.三个主要服务提供在那里,并包含正确的关键字;
6.底部的技术图标数为7个。
添加这些测试很容易与assertExists(),assertSelectorHasText()和assertElementCount()方法:
test.assertSelectorHasText(‘div.phone’,’+18554669244′,’03-Phonenumbermustbecorrect.’);
test.assertSelectorHasText(‘a.mail’,’contact@oxagile.com’,’04-Emailmustbecorrect.’);
test.assertElementCount(‘div.inner-wrapperul.prime>li’,5,’05-Fivetop-levelmenuitemsmustexist.’);
test.assertExists(‘div.free-quote-btn’,’06-“FreeQuote”buttonexists.’);
test.assertElementCount(‘div.clients>div>img’,6,’07-Sixclientlogosmustexist.’);
test.assertSelectorHasText(‘div.soft’,’CustomSoftwareDevelopment’,’08-CustomSoftwareDevelopmentservicemustexist.’);
test.assertSelectorHasText(‘div.web’,’WebApplicationDevelopment’,’09-WebApplicationDevelopmentservicemustexist.’);
test.assertSelectorHasText(‘div.mobile’,’MobileApplicationDevelopment’,’10-MobileApplicationDevelopmentservicemustexist.’);
test.assertElementCount(‘div.technologiesdiv.listimg’,7,’11-Seventechexpertiseiconsmustexist.’);
运行上述代码应该产生以下结果:
正如你所看到的,我们需要几秒钟的时间来确保我们的主页显示我们关心的大部分信息。
我们进一步检查搜索表单是否有效。
用于填充表单,CasperJS提供了一种方便的方法形象地称为fill()。该方法有三个参数:
1.一个CSS选择器来标识表单,
2.输入字段名称和值对的对象,
3.以及一个布尔参数,用于确定表单是否自动提交。
通过测试,让我们搜索测试自动化并计算结果。填写搜索字段并提交表单:
casper.fill(‘form#searchform’,{
‘s':’testautomation’
},true);
我们现在等待结果页面加载,以便我们可以运行我们的测试。我们还会将搜索结果作为额外支票打印到控制台:
casper.waitForUrl(/\?s=.+/,function(){
test.assertElementCount(‘div.search-list-item-title’,10,’12-Tensearchresultsmustbedisplayed.’);
console.log(‘\nSearchresults:’);
this.getElementsInfo(‘div.search-list-item-title’).forEach(function(_item,_index){
console.log(_index+1+’.”‘+_item.text+'”‘);
});
console.log(”);
});
输出应如下所示:
在上面的代码片段中,getElementsInfo()是一种方便的方法,它检索与CSS选择器匹配的所有元素的数据,并返回一个包含元素的对象表示的数组。我们使用其text键来检索搜索结果标题。