使用phantomjs操作DOM并对页面进行截图需要注意的几个问题

phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit内核(也就是chrome使用的内核),并使用js编写探测脚本,您可以编写js完整地请求、浏览页面,并可以编写自定义的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‘);
    }
    
    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);    

});

 

截屏效果图:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。