PhantomJS

一、任务描述

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

二、任务目标

1、掌握PhantomJS的使用

三、任务环境

Ubuntu16.04、Python2.7

四、任务分析

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

五、任务实施

步骤1、环境准备

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

通过【cd /home】切换到home目录下。【ls】查看该目录下的所有内容。

图1 切换目录

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

图2 创建文件夹

步骤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文件