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:{ 應用庫:"http://span[contains(text(),應用庫)]", 應用分類:"http://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(); }); }); |