文档章节

phantomjs入门学习笔记

rasine的杂货铺
 rasine的杂货铺
发布于 2014/10/21 23:53
字数 1386
阅读 2131
收藏 3

一、简介

    PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试等。

    简而言之:基于WebKit的,没有界面的浏览器。

    闪亮的功能点:PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试。

    优势:跨平台,易上手。

二、安装

    工欲善其事必先利其器,首先看下phantomjs的安装。

    phantomjs网站:http://phantomjs.org/     里面有很多例子可以你参考学习

    工具下载页面:http://phantomjs.org/download.html

    下载相应版本的phantomjs,然后配置环境变量,然后就可以正常使用phantomjs做相应的操作了。

三、简单使用——hello world 

    phantomjs程序可以用javascript语言写,也可以用CoffeeScript,下面代码主要以javascript为例。

    helloWorld.js

console.log('Hello, world!');//控制台输出字符串hello world
phantom.exit();//退出运行,否则程序将无法运行

    控制台输入与运行结果

四、脚本参数传递

    arguments.js

var sys = require('system');//创建system模块对象sys
if(sys.args.length === 1){//当输入参数长度为1时,提示请多输入几个参数测试代码,然后退出
	console.log('please input more data to test the code!');
	phantom.exit();
}else{//当脚本参数长度大于1时,遍历所有的参数,并打印其长度,然后退出
	for (var i = 0; i < sys.args.length; i++) {
		console.log(i+":"+sys.args[i]);
	};
	console.log('sys.args.length :'+sys.args.length);
	phantom.exit();
};

    控制台输入与运行结果

五、web page模块基础

    通过创建一个网页对象,一个网页可以被加载,分析和渲染。

    加载一个网页主要是使用web page模块的open()函数,载入页面url,从而抓取得到相关网页的数据,达到网络监控的目的。

    实例1:firstLoadPage.js——页面首屏加载时间

var page = require('webpage').create();//创建webpage对象
var sys = require('system');//创建system对象
var t = 0;//页面加载时间赋初值
var address = sys.args[1];//页面加载的地址为参数sys.args[1]

if (sys.args.length === 1) {
	console.log('please input like this:phantomjs firstLoadPage.js <some url>');
	phantom.exit();
}else{
	page.onLoadStarted = function () {
        page.startTime = new Date();
    };//获取页面开始加载的时间
    page.viewportSize = { width: 960, height: 2000 };//设置可视界面宽高

	page.open(address,function(status){//页面加载状态为success、fail两种
		if (status !== 'success') {//状态为fail时,控制台打印,载入页面失败,然后退出
			console.log('Fail to load the page!');
			phantom.exit();
		}else{//状态为success时,加载页面成功,计算页面加载时间,并在控制台打印加载时间,退出
			t = Date.now() - page.startTime;//页面加载完成后的当前时间减去页面开始加载的时间,为整个页面加载时间
			console.log('firstLoadPage time :'+ t +'ms');
			phantom.exit();
		};
	});
};

    控制台输入与运行结果

ps:当页面的url中包含不止一个参数时(形如:http://www.oschina.net/a?b=1&c=2&d=3·····),控制台直接输入url的时候程序会报错,这里建议含有多个参数的url用“”把url括起来页面就可以正常运行了。

    实例2:netsniff.js——以json格式输出页面加载过程中的http请求信息

    代码参考:https://github.com/ariya/phantomjs/blob/master/examples/netsniff.js(官方给出的代码)

    直接把生成的json格式的数据输入到网站中(http://www.softwareishard.com/har/viewer/)就可以看到整个网页加载过程中的瀑布流图,可以很直观的监测到网络的加载情况。轻轻松松的就完成了页面的网络监控工作。

    百度首页生成har文件瀑布流图示例

    phantomjs用于网页监控详情可参考:http://my.oschina.net/rasine/blog/333056

六、网页截屏

    网页截屏主要是利用web page模块的render函数。

    render.js

var page = require('webpage').create();//创建webpage对象
var sys = require('system');//创建system对象
var address = sys.args[1];//页面加载的地址为参数sys.args[1]

if (sys.args.length === 1) {
	console.log('please input like this:phantomjs render.js <some url>');
	phantom.exit();
}else{
	page.open(address,function(status){//页面加载状态为success、fail两种
		if (status !== 'success') {//状态为fail时,控制台打印,载入页面失败,然后退出
			console.log('Fail to load the page!');
			phantom.exit();
		}else{//状态为success时,加载页面成功,截图保存为test.png,退出
			page.render('test.png');
			phantom.exit();
		};
	});
};

    控制台输入与运行结果   

    phantomjs render.js http://www.baidu.com

    源码路径下生成test.png图片

七、页面自动化及无界面测试

    由于脚本好像是一个web浏览器上的运行一样,标准的DOM脚本和CSS选择器可以很好的工作,这使得phantomjs可以支持各种页面自动化测试任务、无界面测试任务。

    实例:引入jquery类库到目标页面——引入外部js文件,脚本完全可以模拟标准的页面操作

var page = require('webpage').create();
page.open('http://www.baidu.com', function() {
	//引入外部js库
    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() {
        page.evaluate(function() {//操作页面事件
            $("button").click();
        });
        phantom.exit()
    });
});

    PS:对于page打开的页面,往往需要与其进行一些交互。 page.evaluate() 提供了在page打开页面的上下文(下文直接用page上下文指代)执行function的功能(类比Chrome开发者工具的控制台)。

© 著作权归作者所有

rasine的杂货铺
粉丝 5
博文 24
码字总数 14856
作品 0
武汉
程序员
私信 提问
Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用。 1、PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScript API,它无需浏览器的支持即可实现对Web的支持,且原生...

大数据之路
2015/04/28
0
2
CasperJS 的安装和快速入门

CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript 基于 PhantomJS 编写,用于测试 Web 应用功能,Phantom JS是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准: DO...

红薯
2012/05/30
10.9K
4
ubuntu 安装phantomjs、chromedriver、geckodriver

一、安装phantomjs 1.从官网下载http://phantomjs.org/download.html 2.加压 tar -zxvf phantomjs-2.1.1-linux-x86_64.tar.bz2 3.mv phantomjs-2.1.1-linux-x86_64 /usr/local/share/phanto......

littlemesieV
2018/04/18
0
0
PhantomJS学习--phantomjs入门教程

PhantomJS 来自《JavaScript 标准参考教程(alpha)》,by 阮一峰 PhantomJS官方API 目录 概述 REPL环境 webpage模块 open() evaluate() includeJs() render() viewportSize,zoomFactor on......

spinachgit
2018/12/17
0
0
聊聊phantomjs的优化措施

序 本文主要小结一下phantomjs的优化措施 phantomjs phantomjs相当于一个后台浏览器,有点内嵌jetty的味道,通常在自动化测试或者爬虫领域用。 优化点 池化技术,避免重复启动 对于其他语言进...

go4it
2017/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
15
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
16
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部