PhantomJS

1、任务描述

  本实验任务主要对PhantomJS进行一些基本操做，经过完成本实验任务，要求学生熟练掌握PhantomJS的操做，并对PhantomJS的基本操做进行整理并填写工做任务报告。

2、任务目标

一、掌握PhantomJS的使用

3、任务环境

Ubuntu16.0四、Python2.7

4、任务分析

  PhantomJS是一个基于webkit的JavaScript API，它使用QtWebKit做为它的核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你能够在基于webkit浏览器作的事情，它都能作到。它不只是个隐形的浏览器，提供了诸如CSS选择器，支持的Web标准，DOM操做，JSON，HTML5画布，SVG等，同时也提供了处理文件I / O的操做，从而使你能够向操做系统读写文件等.PhantomJS的用处可谓很是普遍，如网络监测，网页截屏，无需浏览器的网站测试，页面访问自动化等。

5、任务实施

步骤一、环境准备

  右击Ubuntu操做系统桌面，从弹出菜单中选择【Open in Terminal】命令 打开终端。

  经过【cd /home】切换到home目录下。【ls】查看该目录下的全部内容。

图1 切换目录

  【mkdir phantomJSCode】在home目录下建立phantomJSCode文件夹。

图2 建立文件夹

步骤二、PhantomJS操做

  【cd phantomJSCode】切换到phantomJSCode目录下，【vim helloworld.js】回车后建立一个名为helloworld的JavaScript文件。

图3 建立JavaScript文件

  回车后进入编辑框内，按键盘【i】进入编辑状态，输入以下程序。

  第一句是在控制台输出“Hello World!”,第二句是终止phantom的运行，否则程序会一直运行，不会中止。

图4 便捷JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs helloworld.js】执行helloworld的JavaScript文件。

图5 运行JavaScript文件

  经过PhantomJS，一个网页能够被加载、分析和经过建立网页对象呈现。

  【vim pageload.js】回车后建立一个名为pageload的JavaScript文件。

图6 建立JavaScript文件

  回车后进入编辑框内，按键盘【i】进入编辑状态，输入以下程序。

  首先用webpage模块建立一个page对象，而后经过page对象打开http://passport.shiyanbar.com/网址，若是请求响应成功，则经过render方法将当前的页面保存为shiyanbar.png图片。

图7 编辑JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs pageload.js】执行pageload的JavaScript文件。

  会发现响应成功，在目录下生成一个名为shi shiyanbar.png图片，正是实验吧的登陆界面。

图8 运行JavaScript文件

  除了打开网页截图以外，也能够对网页进行测试。

  【vim loadspeed.js】回车后建立一个名为loadspeed的JavaScript文件。

图9 建立JavaScript文件

  回车后进入编辑框内，按键盘【i】进入编辑状态，输入以下程序。

  首先使用webpage模块建立一个page对象，使用system模块获取系统对象system，并声明两个变量t和address，用来保存时间和传入参数。若是传入的参数的长度等于1，说明要加载的地址没有传入，进行提示并退出phantom。为何等于1，由于phantomjs loadspeed.js 第一个参数是loadspeed.js。接着获取当前的时间，而后打开网页，获取加载完成后的时间，进行相减便可。

图10 编辑JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs loadspeed.js】执行loadspeed的JavaScript文件。

图11 运行JavaScript文件

  为了评估网页中的JavaScript代码，能够利用evaluate。这个执行时“沙盒式”的，不会去执行网页外的JavaScript代码。evaluate方法能够返回一个对像，而后返回值仅限于对象。不能包含函数（或闭包）。

  【vim evaluate.js】回车后建立一个名为evaluate的JavaScript文件。

图12 建立JavaScript文件

  回车后进入编辑框内，按键盘【i】进入编辑状态，输入以下程序。

  经过document.title获取网页的标题。

图13 编辑JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs evaluate.js】执行evaluate的JavaScript文件。

  获得网页的标题为登陆实验吧。

图14 运行JavaScript文件

  PhantomJS能够对视图进行缩放和裁剪。经过【vim pageload.js】对pageload.js进行改动，修改内容以下。

  PhantomJS既能够将页面转化为不一样的文件格式，还能够对视图进行缩放和裁剪，主要用到page对象中两个很是重要的属性：viewportSize和clipRect。viewportSize是视区的大小，起做用能够看作是将打开的浏览器窗口进行缩放，clipRect是在这个视区中裁剪矩形的大小，须要四个参数，前两个基准点，后两个参数是宽高。

图15 编辑JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs pageload.js】执行pageload的JavaScript文件。
【ls】同级目录下生成shiyanbar.pdf文件

图16 运行JavaScript文件

  因为PhantomJS容许对网络流量进行检查，所以适合对网络行为和性能进行各类分析。当页面从远程服务器请求资源时，能够经过onResourceRequested和onResourceReceived回调跟踪请求和响应。

  【vim netmonitor.js】回车后建立一个名为netmonitor的JavaScript文件。

图17 建立JavaScript文件

  回车后进入编辑框内，按键盘【i】进入编辑状态，输入以下程序。
当接受到请求时，能够经过改写onResourceRequested和onResourceReceived回调函数来实现接收到资源请求和资源接受完毕的监听

图18 编辑JavaScript文件

  编辑完毕后，按【esc】退出编辑状态，【:wq】保存并退出编辑框，【phantomjs netmonitor.js】执行netmonitor的JavaScript文件。

  运行结果会打印出全部资源的请求和接收状态，以JSON格式输出。

图19 运行JavaScript文件