phantomjs 小试 | AlloyTeam

phantomjs 小试

In 未分类 on 2015年06月01日 by TAT.dongdongli view: 2,890

简单来说，phantomjs 就是一个运行在 node 上的 webkit 内核，支持 DOM 渲染，css 选择器，Canvas，SVG 等，在浏览器上能做的事情，理论上，phantomjs 都能模拟做到。

phantomjs 使用场景：

页面自动化测试： 无需浏览器的情况下进行快速的 Web 测试，且支持很多测试框架，如 YUI Test、Jasmine、WebDriver、Capybara、QUnit、Mocha 等。
网页监控： 定期打开页面，检查网站是否正常加载，加载结果是否符合预期等

页面截图：以编程方式抓起 CSS、SVG 和 Canvas 等页面内容
网络爬虫：抓取网络页面

start

在官网直接下载 phantomjs。windows 环境直接下载 exe 文件，解压，运行

http://phantomjs.org/download.html

来个截图小 demo

由于 phantomjs 相当于一个没有 UI 的浏览器，可以抓取 url 下的所有内容，并渲染。因此，网络截图，对于 phantomjs 来说，就不费劲了。

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

var url = 'http://ke.qq.com';

page.open(url, function (status) {

page.render('index.png');

phantom.exit();

});

保存文件为 capture.js，在终端运行 phantomjs catpure.js ，然后就可以在同目录下看到高大上的腾讯课堂首页的图片了。

phantomjs 实现登录

在写一些爬虫程序的时候，可能会需要先登录系统，获取登录的 cookie。如果有 node request 或是 java 写的话，需要去了解系统本身的登录逻辑，实现起来比较困难，特别是登录设计复杂的时候。用 phantomjs 实现登录要简单很多，加载登录页面后，在 evalutae 包裹的沙箱内，直接对页面进行登录信息的写入，并模拟登记的行为，之后的跳转、cookie set 等就直接交给 phantomjs 完成。

下面是一个用 phantomjs 实现小米商城登录的栗子：

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

testindex = 0,

loadInProgress = false;

page.onLoadStarted = function() {

loadInProgress = true;

console.log("load started");

};

page.onLoadFinished = function() {

loadInProgress = false;

console.log("load finished");

};

var steps = [

function() {

//Load Login Page

page.open("https://account.xiaomi.com/pass/serviceLogin");

function() {

page.evaluate(function(obj) {

var form = document.getElementById("miniLogin");

form.elements["miniLogin_username"].value = '用户名';

form.elements["miniLogin_pwd"].value = '密码';

form.elements['message_LOGIN_IMMEDIATELY'].click();

return document.title;

});

loadInProgress = true;

function() {

page.render('login-succ.png');

}

];

var interval = setInterval(function() {

if (!loadInProgress && typeof steps[testindex] == "function") {

steps[testindex]();

testindex++;

}

if (typeof steps[testindex] != "function") {

phantom.exit();

}

}, 10);

在终端执行 phantomjs 命令，最后，可以看到登录后的页面截图

AlloyTeam

AlloyTeam

phantomjs 使用场景：

start

来个截图小 demo

phantomjs 实现登录

延伸阅读

小心跳大 2016 年 7 月 18 日

发表评论