?

對(duì)于富客戶端的 Web 應(yīng)用頁(yè)面，自動(dòng)登錄、頁(yè)面修改、抓取頁(yè)面內(nèi)容、屏幕截圖、頁(yè)面功能測(cè)試…面對(duì)這些需求，使用后端語(yǔ)言需要花費(fèi)不少的精力才能實(shí)現(xiàn)。此時(shí) SlimerJS、phantomJS 或 CasperJS 或許是更好的一種選擇。

一、PhantomJS 和 SlimerJS

PhantomJS 和 SlimerJS 都是服務(wù)器端的 JavaScript API 工具，可以理解為無界面的可編程操作的瀏覽器。 它們大部分的 API 接口都很相似，使用方法也很接近，最大的不同在于：PhantomJS 基于 Webkit 內(nèi)核，不支持 Flash 的播放；SlimerJS 基于火狐的 Gecko 內(nèi)核，支持 Flash播放，并且執(zhí)行過程會(huì)有頁(yè)面展示。

借助 PhantomJS 或 SlimerJS 所提供的 API，你幾乎可以使用 javascript 模擬在瀏覽器上的任何操作：打開頁(yè)面、前進(jìn)/后退、頁(yè)面點(diǎn)擊、鼠標(biāo)滾動(dòng)、DOM 處理、CSS 選擇器、Canvas 畫布、SVG畫圖，如此等等。

例如，對(duì)頁(yè)面的某個(gè)區(qū)域截圖：

SlimerJS 示例：

var webpage = require('webpage').create(); webpage.open('http://www.meizu.com') // 打開一個(gè)網(wǎng)頁(yè) .then(function() { // 頁(yè)面加載完成后執(zhí)行//保存頁(yè)面截屏webpage.viewportSize = {width: 650,height: 320};webpage.render('page.png', {onlyViewport: true});//再打開一個(gè)網(wǎng)頁(yè)return webpage.open('http://bbs.meizu.com'); }) .then(function() {// 點(diǎn)擊某個(gè)位置webpage.sendEvent("click", 5, 5, 'left', 0);slimer.exit(); //退出 });

將以上代碼保存為 test_slimerjs.js，然后執(zhí)行：

slimerjs test_slimerjs.js

PhantomJS 示例：

var webpage = require('webpage').create(); var url = 'http://www.phantomjs.org/'; webpage.open('http://www.meizu.com', function (status) {//打開一個(gè)頁(yè)面 }).then(function(){//保存頁(yè)面截屏webpage.viewportSize = {width: 650,height: 320};webpage.render('page.png', {onlyViewport: true});//再打開一個(gè)網(wǎng)頁(yè)return webpage.open('http://bbs.meizu.com'); }).then(function(){webpage.sendEvent("click", 5, 5, 'left', 0);phantom.exit(); });

將以上代碼保存為 test_phantomjs.js，然后執(zhí)行：

phantomjs test_phantomjs.js

可以看到，上面的代碼內(nèi)容非常相似，實(shí)現(xiàn)的功能都是打開頁(yè)面，然后截圖。

參考：

http://phantomjs.org/
https://github.com/ariya/phantomjs
http://slimerjs.org/
http://docs.slimerjs.org/current/
https://github.com/laurentj/slimerjs/

二、前端自動(dòng)化測(cè)試工具 CasperJS

CasperJS 是一個(gè)開源的導(dǎo)航腳本和測(cè)試工具。它提供了一套用于 Web 應(yīng)用測(cè)試的方法組件，這些組件基于 PhantomJS 或 SlimerJS 所提供的 javascript API，實(shí)現(xiàn)對(duì) Web 應(yīng)用的功能執(zhí)行。CasperJS 簡(jiǎn)化了完整的導(dǎo)航場(chǎng)景的過程定義，提供了用于完成常見任務(wù)的實(shí)用的高級(jí)函數(shù)、方法和語(yǔ)法。如：

• 定義和整理導(dǎo)航步驟
• 表單填充
• 點(diǎn)擊、跟蹤鏈接
• 區(qū)域、頁(yè)面截圖
• 斷言遠(yuǎn)程DOM
• 日志、事件
• 資源下載，包括二進(jìn)制資源
• 捕捉錯(cuò)誤，并做出相應(yīng)的響應(yīng)
• ……

使用 CasperJS 的方法組件，可以更方便的書寫前端自動(dòng)化測(cè)試腳本。

CasperJS 示例：

var utils = require('utils'); var webpage = require('casper').create({//verbose: true,logLevel: 'debug',viewportSize: {width: 1024,height: 768},pageSettings: {loadImages: true,loadPlugins: true,XSSAuditingEnabled: true} });//打開頁(yè)面 webpage.start().thenOpen('http://www.meizu.com', function openMeizu(res) {this.echo('打印頁(yè)面信息');res.body = '';//不打印body信息utils.dump(res);//點(diǎn)擊登錄按鈕if (this.exists("#_unlogin")) {this.echo('點(diǎn)擊登錄按鈕');this.click("#_unlogin a:nth-child(1)");this.wait(3000, function wait3s_1() {if (this.exists("form#mainForm")) {this.echo("需要登陸，填充賬號(hào)信息。。。");//填充表單賬號(hào)this.fill('form#mainForm', {'account': 'lzwy***@flyme.cn','password': '********'}, true);this.capture('meizu_login_page.png');this.wait(3000, function wait3s_2() {//登錄按鈕存在，點(diǎn)擊if (this.exists("#login")) {this.echo('提交登錄');this.click("#login");}});}});}}).then(function capture() {if (this.exists('#mzCustName')) {this.echo('登錄成功！開始截圖存儲(chǔ)..');} else {this.echo('登錄失敗！請(qǐng)查看截圖文件')}//截圖this.capture('meizu.png');this.captureSelector('meizu_header.png', 'div.meizu-header');}).then(function exit() {this.echo('執(zhí)行完成，退出');this.exit();}).run();

將以上代碼保存為 test_casperjs.js，然后執(zhí)行：

casperjs test_casperjs.js

效果參考：

圖1 登陸頁(yè)

圖2 首頁(yè)登陸成功

圖3 局部截取（header）

提示：可在 create casper 對(duì)象時(shí)進(jìn)行一些初始化設(shè)置，比如不用請(qǐng)求圖片資源，CSS資源，以及不需要的JS等資源，這樣可以加快測(cè)試執(zhí)行速度。

http://casperjs.org/
http://www.qiqishare.com/

三、安裝與使用 SlimerJS、phantomJS 和 CasperJS

1. 安裝

nodejs 安裝：

http://nodejs.org

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

CasperJS 安裝（需要 python2.6 以上版本支持）：

執(zhí)行命令：

npm install -g casperjs

http://docs.casperjs.org/en/latest/installation.html
https://www.python.org/download/

SlimerJS 安裝（需要先安裝 Firefox 或 XulRunner ）：

執(zhí)行命令：

npm install -g slimerjs

http://www.slimerjs.org/download.html
http://docs.slimerjs.org/current/installation.html

phantomJS 安裝：

npm install -g phantomjs-prebuilt

或者下載 phantomJS：http://phantomjs.org/download.html
解壓并配置 phantomjs.exe 訪問路徑到環(huán)境變量。

2. 使用

將上文示例保存為 js 文件(如 test_*.js) ，然后打開命令行，進(jìn)入到該文件所在目錄下，執(zhí)行命令：

slimerjs test_slimerjs.js

phantomjs test_phantomjs.js
# 默認(rèn)使用 phantomjs 引擎
casperjs test_casperjs.js
# 使用 slimerjs 引擎
casperjs test_casperjs.js –disk-cache=yes –engine=slimerjs

可對(duì)比查看執(zhí)行過程與結(jié)果。

本文只是簡(jiǎn)單介紹三種工具的功能與基本安裝使用，具體功能應(yīng)用可參考其各自文檔，也可在討論區(qū)書寫您的意見和建議。

附：前端自動(dòng)化測(cè)試工具 Selenium

Selenium 也是一個(gè)前端自動(dòng)化測(cè)試工具，與 casperJS 的無界面方式不同，Selenium 是直接運(yùn)行于瀏覽器中，并且通過插件可以實(shí)現(xiàn)腳本錄制等功能。

http://docs.seleniumhq.org/

?

轉(zhuǎn)載于:https://www.cnblogs.com/limingziqiang/p/8622271.html

總結(jié)

以上是生活随笔為你收集整理的前端自动化测试工具：SlimerJS、phantomJS 和 CasperJS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。