?

對于富客戶端的 Web 應用頁面，自動登錄、頁面修改、抓取頁面內容、屏幕截圖、頁面功能測試…面對這些需求，使用后端語言需要花費不少的精力才能實現。此時 SlimerJS、phantomJS 或 CasperJS 或許是更好的一種選擇。

一、PhantomJS 和 SlimerJS

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

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

例如，對頁面的某個區域截圖：

SlimerJS 示例：

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

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

slimerjs test_slimerjs.js

PhantomJS 示例：

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

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

phantomjs test_phantomjs.js

可以看到，上面的代碼內容非常相似，實現的功能都是打開頁面，然后截圖。

參考：

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

二、前端自動化測試工具 CasperJS

CasperJS 是一個開源的導航腳本和測試工具。它提供了一套用于 Web 應用測試的方法組件，這些組件基于 PhantomJS 或 SlimerJS 所提供的 javascript API，實現對 Web 應用的功能執行。CasperJS 簡化了完整的導航場景的過程定義，提供了用于完成常見任務的實用的高級函數、方法和語法。如：

• 定義和整理導航步驟
• 表單填充
• 點擊、跟蹤鏈接
• 區域、頁面截圖
• 斷言遠程DOM
• 日志、事件
• 資源下載，包括二進制資源
• 捕捉錯誤，并做出相應的響應
• ……

使用 CasperJS 的方法組件，可以更方便的書寫前端自動化測試腳本。

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} });//打開頁面 webpage.start().thenOpen('http://www.meizu.com', function openMeizu(res) {this.echo('打印頁面信息');res.body = '';//不打印body信息utils.dump(res);//點擊登錄按鈕if (this.exists("#_unlogin")) {this.echo('點擊登錄按鈕');this.click("#_unlogin a:nth-child(1)");this.wait(3000, function wait3s_1() {if (this.exists("form#mainForm")) {this.echo("需要登陸，填充賬號信息。。。");//填充表單賬號this.fill('form#mainForm', {'account': 'lzwy***@flyme.cn','password': '********'}, true);this.capture('meizu_login_page.png');this.wait(3000, function wait3s_2() {//登錄按鈕存在，點擊if (this.exists("#login")) {this.echo('提交登錄');this.click("#login");}});}});}}).then(function capture() {if (this.exists('#mzCustName')) {this.echo('登錄成功！開始截圖存儲..');} else {this.echo('登錄失敗！請查看截圖文件')}//截圖this.capture('meizu.png');this.captureSelector('meizu_header.png', 'div.meizu-header');}).then(function exit() {this.echo('執行完成，退出');this.exit();}).run();

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

casperjs test_casperjs.js

效果參考：

圖1 登陸頁

圖2 首頁登陸成功

圖3 局部截取（header）

提示：可在 create casper 對象時進行一些初始化設置，比如不用請求圖片資源，CSS資源，以及不需要的JS等資源，這樣可以加快測試執行速度。

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 以上版本支持）：

執行命令：

npm install -g casperjs

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

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

執行命令：

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 訪問路徑到環境變量。

2. 使用

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

slimerjs test_slimerjs.js

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

可對比查看執行過程與結果。

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

附：前端自動化測試工具 Selenium

Selenium 也是一個前端自動化測試工具，與 casperJS 的無界面方式不同，Selenium 是直接運行于瀏覽器中，并且通過插件可以實現腳本錄制等功能。

http://docs.seleniumhq.org/

?

轉載于:https://www.cnblogs.com/limingziqiang/p/8622271.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。