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

phantomjs是一個無界面瀏覽器，可用於網頁截圖和前端自動化測試，基於webkit內核（也就是chrome使用的內核），並使用js編寫業務腳本來請求、瀏覽和操作頁面。最近前端監控需要用到phantomjs，特地研究了一下這個組件，遇到幾個坑，這里匯總起來，希望對大家尤其是剛入門者有所幫助。

 

1、如何操作頁面中的DOM元素？

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

 

page.evaluate(function()
    {
                var plist = document.querySelectorAll("a");//獲取所有鏈接
    });

 

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

部分頁面使用了lazyload，比如圖片或js的延遲加載，只有滾動到底部才會觸發，因此對於這種頁面，如果要展示完整的頁面，則需設法使底部可見，主要有3個辦法：

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

　　2、通過BOM方法操作滾動條，可以把滾動條滾動到一個很大的值，如：window.scrollTo(0,10000);也可以滾動到適應的高度：window.document.body.scrollTop = document.body.scrollHeight;

 

3、如何延遲截圖？

頁面請求的資源，如圖片、異步cgi、js等，返回的時間以及執行的長短都是不確定的，如果截圖過早，可能很多空白區域，因此需要定時截圖，在打開頁面后，使用setTimeout來延遲截圖：

 

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

 

4、注意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);    

});

 

截屏效果圖：