使用phantomjs操做DOM並對頁面進行截圖須要注意的幾個問題

phantomjs是一個無界面瀏覽器，可用於網頁截圖和前端自動化測試，基於webkit內核（也就是chrome使用的內核），並使用js編寫業務腳原本請求、瀏覽和操做頁面。最近前端監控須要用到phantomjs，特意研究了一下這個組件，遇到幾個坑，這裏彙總起來，但願對你們尤爲是剛入門者有所幫助。

 

一、如何操做頁面中的DOM元素？

這個問題比較簡單，官方API提供了page.evaluate函數，範例代碼：

 

page.evaluate(function()
    {
                var plist = document.querySelectorAll("a");//獲取全部連接
    });

 

二、如何滾動到頁面底部？

部分頁面使用了lazyload，好比圖片或js的延遲加載，只有滾動到底部纔會觸發，所以對於這種頁面，若是要展現完整的頁面，則需設法使底部可見，主要有3個辦法：

　　一、使瀏覽器足夠大，這樣底部就顯示了，能夠設置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};

　　二、經過BOM方法操做滾動條，能夠把滾動條滾動到一個很大的值，如：window.scrollTo(0,10000);也能夠滾動到適應的高度：window.document.body.scrollTop = document.body.scrollHeight;

 

三、如何延遲截圖？

頁面請求的資源，如圖片、異步cgi、js等，返回的時間以及執行的長短都是不肯定的，若是截圖過早，可能不少空白區域，所以須要定時截圖，在打開頁面後，使用setTimeout來延遲截圖：

 

window.setTimeout(function () 
    {
        page.render("json2form.png");
        phantom.exit();
    }, 1000);    

 

四、注意page.evaluate中的回調函數做用域鏈

對於初學者，極可能寫出這樣的代碼（不是嗎？看起來很正常，JS支持閉包呀？）：

 

var page = require('webpage').create();
var url = 'http://json2form.wikisoft.me//';
var globalVar = 1;
page.open(url, function (status) 
{
    if (status != "success") 
    {
        console.log('FAIL to load the address');
    }
    
    page.evaluate(function()
    {
        var x = globalVar;//引用本js的一個全局變量
        page.method();//執行phantomjs的一個api
    });
});

 

有個問題須要明白，page.evaluate中的函數是在目標網頁執行的，其上下文、做用域鏈已經不能與phantomjs執行這個js同日而語，所以請勿在evaluate中引用phantomjs的api或你這個js文件中的全局變量，不然出了錯，都很難定位。

 

上述幾個總結若有謬誤也歡迎指正，最後附上一個完整的代碼（請求某網頁、對連接標記紅框，並延遲截圖，已驗證）：

var page = require('webpage').create();
var url = 'http://www.w3school.com.cn/';
page.open(url, function (status) 
{
    if (status != "success") 
    {
        console.log('FAIL to load the address');
        phantom.exit();
    }
    
    page.evaluate(function()
    {
        //此函數在目標頁面執行的，上下文環境非本phantomjs，因此不能用到這個js中其餘變量
        
        window.scrollTo(0,10000);//滾動到底部
        //window.document.body.scrollTop = document.body.scrollHeight;

        window.setTimeout(function()
        {
            var plist = document.querySelectorAll("a");
            var len = plist.length;
            while(len)
            {
                len--;
                var el = plist[len];
                el.style.border = "1px solid red";
            }
        },5000);
    });
    
    window.setTimeout(function () 
    {
        page.render("json2form.png");
        phantom.exit();
    }, 5000+500);    

});

 

截屏效果圖：