casperjs进行web功能自动化测试demo

通过一周多的学习和总结，终于掌握了casperjs用于自动化的方法，填平了大大小小的各种坑。

casperjs是一个新兴的测试框架，网上资料很少，基本上靠翻译英文资料。

贡献出来，供大家参考：

//page.js，存放页面元素
//c表示通过css选择元素，x表示通过xpath选择元素
var baseurl="http://www.cnblogs.com/reach296/";
var base={
	//首页
	url:baseurl,
	c:{
		登录表单:‘form#login‘,
		登录按钮:‘.btn‘
	}
};
var index={
	//登录后成功后跳转页
	url:baseurl+"/seven/index"
};
var sidebar={
	//左边框
	url:baseurl+"/seven/sidebar.jsp",
	x:{
		应用库:"//span[contains(text(),应用库)]",
		应用分类:"//ul[@class=‘submenu‘]/li/a[1]"
	}
};
var category_list={
	//应用分类page
	url:baseurl+"/seven/app/category-list",
	c:{
		名称:‘td.sorting_1‘
	},
	x:{
		表格:‘//*[@id="sample-table-2"]/tbody/tr‘,
		名称:‘//*[@id="sample-table-2"]/tbody/tr/td[1]‘,
		海报:‘//*[@id="sample-table-2"]/tbody/tr/td[2]‘,
		编辑:‘//*[@id="sample-table-2"]/tbody/tr/td[3]‘
	}
}

//common.js，存放全局变量和方法

var path={
	capture:‘cms/capture/‘,
	lib:‘cms/lib/‘
};
var cap={
	clipRect:{top: 0,left: 0,width: 1024,height: 768},
//	clipRect:{width: 1024,height:768},
    imgOptions:{format: ‘jpg‘,quality:100}
};
var account={‘loginName‘:‘reachwang‘,‘passwd‘:‘test12345‘};

function get_menu_links(){
	//获取一级模块
	var links = window.frames[0].document.getElementsByTagName("frame")[0].contentDocument.getElementsByClassName("menu-text");	
    return Array.prototype.map.call(links, function(e) {
        return e.innerText;
    });
};

function get_submenu_links(){
	//获取二级模块
	var links = window.frames[0].document.getElementsByTagName("frame")[0].contentDocument.querySelectorAll(‘.submenu a‘);	
    return Array.prototype.map.call(links, function(e) {
        return (e.innerText).replace(/(^\s*)|(\s*$)/g, "");
    });
};

//应用分类测试用例，检查应用分类页面是否正常展示，分类数据是否存在
casper.test.begin(‘应用分类测试用例‘,function suite(test) {
	casper.options.verbose = true;
	casper.options.logLevel = "debug";
	casper.options.viewportSize={width: 1024, height: 768};
	casper.options.waitTimeout=20000;
//	casper.options.clientScripts=[
//		path.lib+‘common.js‘
//	];
	casper.test.comment(‘检查应用分类页面是否正常展示，分类数据是否存在‘);
    casper.start(base.url, function() {
  		this.echo("1、打开登录页面");
  		test.assertHttpStatus(200,"检查http请求状态");
		
    });
   
    casper.waitForSelector(base.c.登录按钮, function() {	
    	this.echo("2、登录页面截图");
    	this.capture(path.capture+"登录页面.jpg",cap.clipRect, cap.imgOptions);	
	});

    casper.then(function() {
    	this.echo("3、登录页面检查");	
    	test.assertTitle("TCL CMS", "标题正确");
        test.assertExists(base.c.登录表单, "帐号登录表单存在");
    	this.echo("4、输入帐号和密码");
    	this.fill(base.c.登录表单, account, true);
		this.echo("5、点击登录按钮");
		test.assertExists(base.c.登录按钮, "登录按钮存在");
		this.mouse.click(base.c.登录按钮);
	});
	casper.waitForUrl(index.url,function(){
		test.assertHttpStatus(200,"跳转到登录完成页");
		this.capture(path.capture+‘跳转到登录完成页.jpg‘,cap.clipRect, cap.imgOptions);
		
	});
	casper.withFrame(0,function(){
		this.echo("切换到mian frame里");
		casper.withFrame(0,function(){
			this.echo("切换到mian frame下的sider frame里");
			this.echo("6、点击应用库");
			this.click({type: ‘xpath‘,path:sidebar.x.应用库});
			this.echo("7、点击应用分类");
			this.click({type: ‘xpath‘,path:sidebar.x.应用分类});
		});	
	});
	casper.waitForUrl(index.url,function(){
		test.assertHttpStatus(200,"跳转到应用分类页");
		this.capture(path.capture+‘打开应用分类.jpg‘,cap.clipRect, cap.imgOptions);
		
	});
	casper.withFrame(0,function(){
		this.echo("切换到mian frame里");
		casper.withFrame(1,function(){
			this.echo("应用分类页面")
			test.assertExists({type: ‘xpath‘,path:category_list.x.表格},"表格检查");
			test.assertExists(category_list.c.名称,"名称字段检查");
			test.assertExists({type: ‘xpath‘,path:category_list.x.海报},"海报字段检查");
			test.assertExists({type: ‘xpath‘,path:category_list.x.编辑},"编辑字段检查");
		});
	});
    casper.run(function() {
        test.done();
    });
});

casperjs进行web功能自动化测试demo,古老的榕树,5-wow.com