phantomjs 网页截图及测试工具

phantomjs 是WebKit的服务器端JavaScript API，可以很模样浏览器进行抓取、分析、截图、网络性能监控、跟踪页面加载情况。

一些大名的开源软件也在用phantomjs进行测试，比如：

Bootstrap、CodeMirror、Ember.js、Grunt、Modernizr、YUI3、Zepto、Durandaljs

快速使用：

下载：http://phantomjs.org/download.html， 我下载的是mac版本，里面bin/phantomjs 脚本已生成好。

也有github版本，下载下来需要自己编译。建议直接下载包，本地就可以使用了。

sudo cp bin/phantomjs /usr/bin/phantomjs
phantomjs -v

里面的examples 例子有很多，拿一个例子测试下

phantomjs examples/rasterize.js http://www.ffeeii.com ffeeii.jpg

http://www.ffeeii.com第一个参数，网页地址

ffeeii.jpg 截图网页名称

其它说明：对于页面lazyload的，解决办法很简单。2秒执行

window.setTimeout(function () {
    page.render(output);
    phantom.exit();
}, 2000);

指定截图网页大小

page.viewportSize = { width: 1200, height: 1000 };

完整的网页截图代码

var page = require('webpage').create();
//设置请求userAgent
//page.settings.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.86 Safari/537.36";

//指定浏览器大小
//page.viewportSize = { width: 1200, height: 1000 };
page.open('http://www.ffeeii.com', function(status) {
    console.log("Status: " + status);
    if(status === "success") {
        //截取800x600的大小
        //page.clipRect = { top: 0, left: 0, width: 800, height: 600 };

        window.setTimeout(function () 
        {
            //quality 指定网页保存质量0-100
            page.render("ffeeii.jpg",{format: 'jpeg', quality: '80'});
phantom.exit();
        }, 1000);       
    }
    
});

Status: success