phantomjs 前端页面自动化测试

最近网站的质量检查越来越严格，原来开发过程中很多隐蔽的问题，逐渐暴露出来，为提高前端的工作效率，就想到是不是可以在开发过程中能自动的对页面的中一些规范化的东西进行自动监测，这个就可以省去不少麻烦。

整体分析，一张静态页面主要包含以下几块内容：

1. 页面源码，即html内容

2. 图片

3. js

4. css

5. 异步化数据

对页面源码的测试，一般就是看它是否包含一些不合法字符，这样其实就是要求可以获取到页面源码，剩下的就好办了，可以自己写正则去匹配源码内容。

对图片，我们关注的一般我们首先关注，图片是不是404，其次应该就是关注图片大小，然后就是图片格式，再次是图片的域名

js的话，首先关注的也是，是否加载成功，即是不是404，其次是是否报错，然后是js的域名

css，我们主要关注的是css的域名

对于异步化数据，暂时可以先忽略

最近看了下phantomjs，它基本上提供了以上的所有的API接口，对于现有的页面测试，基本上可以满足，具体phantomjs的安装方法自己到网站找吧，这里推荐个地址：

http://www.html-js.com/article/Phantomjs-based-frontend-automation-testing-road

phantomjs使用方法说明

1. 创建页面的接口

var page = require('webpage').create(),sys = require("system");
page.open(sys.args[1],function (status){
 
    var title = page.evaluate(function(s) {
         return document.querySelector(s).innerText;
       }, 'title');
 
    page.render(title+".png");
 
    if(status !== 'success'){
        console.log('FAIL to load the address');
    } else {
        t = Date.now() - t;
        allTime = '页面加载总时间' + t + ' ms';
   
    var P_CONTENT = page.content;
        isIframe  = isContainIframe(P_CONTENT);
    }
});

2. page中有几个很重要的属性，一是page.content，这个属性可以获取页面的内容，即html代码；第二个是 page.onResourceReceived，这个属性可以获取到页面的静态资源。即js／css／img，用一些简单的判断，就可以区分开来资源的类型；第三个，比较重要的属性，就是page.onLoadFinished，这个一般用于结果输出类；第四个属性，是page.onError，这个属性简单易懂，就是报错信息汇总了。

以下是代码是使用phantomjs对网站专题进行的自动化测试代码，附上来，给大家参考

var page = require('webpage').create(),sys = require("system");
var imgALL = new Array();
var illImg = "";
var jsALL = new Array();
var allTime = "";
var isIframe = "";
var isILLPara = "";
var js_tem = true;
var staticZY = new Array();
var msgStack = new Array();
 
var t = Date.now();
page.settings.userAgent = "";
page.open(sys.args[1],function (status){
 
    var title = page.evaluate(function(s) {
         return document.querySelector(s).innerText;
       }, 'title');
 
    page.render(title+".png");
 
    if(status !== 'success'){
        console.log('FAIL to load the address');
    } else {
        t = Date.now() - t;
        allTime = '页面加载总时间' + t + ' ms';
   
    var P_CONTENT = page.content;
        isIframe  = isContainIframe(P_CONTENT);
    }
});
 
//图片大小判断
var jsReg = /(.XXX.com)/ig;
var illPara = /(img[1-4]?.XXX.com)/ig;
 
page.onResourceReceived = function(response){
    if(response.bodySize && illPara.test(response.url)){
      staticZY.push("禁止含有 img[1-4]?.XXX.com："+response.url);
    }
    if(response.bodySize && /(image)/ig.test(response.contentType)){
       if(response.bodySize > 400*1024){
          imgALL.push(response.url+",图片大小："+(response.bodySize/1024).toFixed(2)+"k，大于400k");
        }
    }
 
    if(response.bodySize && /(application\/x-javascript)/ig.test(response.contentType)){
        if(/(.XXX.com)/ig.test(response.url) || /(.XXX.com)/ig.test(response.url)){
        }else{
          jsALL.push("引入外部js文件，请注意核查：" + response.url+",js大小："+(response.bodySize/1024).toFixed(2)+"k");
        }
    }
};
 
 
// 页面报错信息
 
// phantom.onError = function(msg, trace){
//    msgStack = ['PHANTOM ERROR: ' + msg];
//    if (trace && trace.length) {
//         msgStack.push('TRACE:');
//         trace.forEach(function(t) {
//         msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : ''));
//      });
//    }
// };
 
// 页面中是否包涵iframe
function isContainIframe(t){
  //img[0-4].XXX.com域名
  var illPara = /(iframe)/ig;
    if(illPara.test(t)){
      return "页面中静态资源有 iframe 标签，不合法";
    }else{
      return "页面不含有 iframe 标签"
    };
}
 
page.onLoadFinished = function(){
  if(js_tem){
    console.log("测试结果如下：");
    console.log("\n"+allTime);
    console.log("\n"+isIframe);
    console.log("\n"+"静态资源："+staticZY.join("\n"));
    console.log("\n"+"页面中大于 400k图片："+imgALL.join("\n"));
    console.log("\n"+"加载非XXX静态资源数："+jsALL.join("\n"));
    js_tem = false;
    phantom.exit();
  }
}