phantomjs入门学习笔记之一

ゞ浴缸里的玫瑰 2022-06-14 00:41 292阅读 0赞

### 一、简介    ###

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

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

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

优势：跨平台，易上手。

### 二、安装 ###

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

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

工具下载页面：[http://phantomjs.org/download.html][http_phantomjs.org_download.html]

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

### 三、简单使用——hello world    ###

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

**helloWorld.js**

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

**控制台输入与运行结果**

[![phantomjs入门学习笔记][phantomjs]][phantomjs_phantomjs]

### 四、脚本参数传递    ###

**arguments.js**

**控制台输入与运行结果**

**[![phantomjs入门学习笔记][phantomjs 1]][phantomjs_phantomjs 1]**

### 五、web page模块基础 ###

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

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

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

**控制台输入与运行结果**

[![phantomjs入门学习笔记][phantomjs 2]][phantomjs_phantomjs 2]

**ps：当页面的url中包含不止一个参数时（形如：http://www.codeweblog.com/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/）][http_www.softwareishard.com_har_viewer]就可以看到整个网页加载过程中的瀑布流图，可以很直观的监测到网络的加载情况。轻轻松松的就完成了页面的网络监控工作。

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

[![phantomjs入门学习笔记][phantomjs 3]][phantomjs_phantomjs 3]

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

### 六、网页截屏    ###

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

**render.js**

**控制台输入与运行结果**

phantomjs render.js [http://www.baidu.com][http_www.baidu.com]

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

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

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

**实例：引入[jQuery][]类库到目标页面——引入外部js文件，脚本完全可以模拟标准的页面操作**

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

### 一、简介    ###

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

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

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

优势：跨平台，易上手。

### 二、安装 ###

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

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

工具下载页面：[http://phantomjs.org/download.html][http_phantomjs.org_download.html]

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

### 三、简单使用——hello world    ###

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

**helloWorld.js**

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

**控制台输入与运行结果**

[![phantomjs入门学习笔记][phantomjs]][phantomjs_phantomjs]

### 四、脚本参数传递    ###

**arguments.js**

**控制台输入与运行结果**

**[![phantomjs入门学习笔记][phantomjs 1]][phantomjs_phantomjs 1]**

### 五、web page模块基础 ###

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

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

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

**控制台输入与运行结果**

[![phantomjs入门学习笔记][phantomjs 2]][phantomjs_phantomjs 2]

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

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

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

[![phantomjs入门学习笔记][phantomjs 3]][phantomjs_phantomjs 3]

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

### 六、网页截屏    ###

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

**render.js**

**控制台输入与运行结果**

phantomjs render.js [http://www.baidu.com][http_www.baidu.com]

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

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

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

转载自：http://blog.csdn.net/yuexianchang/article/details/53306892

[JavaScript]: http://lib.csdn.net/base/javascript
[Link 1]: http://lib.csdn.net/base/softwaretest
[http_phantomjs.org]: http://phantomjs.org/
[http_phantomjs.org_download.html]: http://phantomjs.org/download.html
[phantomjs]: http://image.codeweblog.com/upload/5/cf/5cffc03c193d5d31_thumb.png
[phantomjs_phantomjs]: http://image.codeweblog.com/upload/5/cf/5cffc03c193d5d31.png
[phantomjs 1]: http://image.codeweblog.com/upload/a/b6/ab6af8bfdf81e83d_thumb.png
[phantomjs_phantomjs 1]: http://image.codeweblog.com/upload/a/b6/ab6af8bfdf81e83d.png
[phantomjs 2]: http://image.codeweblog.com/upload/a/cd/acdde225081abdd8_thumb.png
[phantomjs_phantomjs 2]: http://image.codeweblog.com/upload/a/cd/acdde225081abdd8.png
[http_www.softwareishard.com_har_viewer]: http://www.softwareishard.com/har/viewer/%EF%BC%89%E5%B0%B1%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E6%95%B4%E4%B8%AA%E7%BD%91%E9%A1%B5%E5%8A%A0%E8%BD%BD%E8%BF%87%E7%A8%8B%EF%BF%BD%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%9B%BE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%BE%88%E7%9B%B4%E8%A7%82%E7%9A%84%E7%9B%91%E6%B5%8B%E5%88%B0%E7%BD%91%E7%BB%9C%E7%9A%84%E5%8A%A0%E8%BD%BD%E6%83%85%E5%86%B5%E3%80%82%E8%BD%BB%E8%BD%BB%E6%9D%BE%E6%9D%BE%E7%9A%84%E5%B0%B1%E5%AE%8C%E6%88%90%E4%BA%86%E9%A1%B5%E9%9D%A2%E7%9A%84%E7%BD%91%E7%BB%9C%E7%9B%91%E6%8E%A7%E5%B7%A5%E4%BD%9C%E3%80%82
[phantomjs 3]: http://image.codeweblog.com/upload/a/fa/afabcf187f503636_thumb.png
[phantomjs_phantomjs 3]: http://image.codeweblog.com/upload/a/fa/afabcf187f503636.png
[http_www.baidu.com]: http://www.baidu.com/
[jQuery]: http://lib.csdn.net/base/jquery