使用 PhantomJS 实现自动化页面体检报告（一） —— PhantomJS 学习

国庆长假，7 天不在公司，着实担心会不会出个什么问题，身边不备个电脑这都不敢出门了呐。

那我们是否应该实现一个自动化的页面体检工具，以帮助我们周期性的为页面体检并发送体检报告呢？

利用 PhantomJS 就可以帮助我们实现这些功能。在开始之前我们先介绍一下 PhantomJS。

PhantomJS 介绍

打开 PhantomJS 官网，就会看到一段介绍：

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

phantomjs-logo

按我的理解，PhantomJS 是一个基于 Webkit 内核的无头浏览器，它并没有界面可以让你直观的看到网页，同时它还具备了很多好用的功能，比如网页截图、页面注入、存取文档等。

如何运行 PhantomJS

下载 PhantomJS 安装包后，以 WINDOWS 系统为例，安装包中有一个 phantomjs.exe 可执行文件，它可以在命令行中用以执行你的配置文件。

phantomjs [options] somescript.js [arg1 [arg2 [...]]]

关于配置文件，其实就是一个 JS 文件，你可以在这份文件中使用 Javascript 的语法结合 PhantomJS 的 API 进行配置，以实现诸如打开网页、截图等操作。

在命令行执行配置文件时也可以加上相应的一些参数选项，这些选项有些是比较重要的，比如设置解除跨域限制（--web-security）等。

PhantomJS 启动参数列表

一个简单的例子

这里我们实现一个简单的例子以说明 PhantomJS 的一般用法。

var page = require('webpage').create()

page.settings.userAgent = 'PhantomJS robot' //修改标签页的 UA，方便统计

page.open('http://www.yixun.com', function(status) { //使用 open 方法打开网页
    if (status !== 'success') {
        console.log('Unable to access network')
    } else {
        var pageLevel = page.evaluate(function() { //进入页面环境后，可以拿到页面中的所以内容
             return window.yPageLevel
        })
        console.log('page level is ' + pageLevel)
    }
})

上面的例子中，我们使用 PhantomJS 打开了我们易讯的首页，并且向命令行中输出了首页中的一个 JS 变量 yPageLevel 的值。

YIXUNFE / blog