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

  phantomjs 使用场景:  

  页面自动化测试: 无需浏览器的情况下进行快速的Web测试,且支持很多测试框架,如YUI Test、Jasmine、WebDriver、Capybara、QUnit、Mocha等。 网页监控: 定期打开页面,检查网站是否正常加载,加载结果是否符合预期等 页面截图:以编程方式抓起CSS、SVG和Canvas等页面内容 网络爬虫:抓取网络页面

  phantomjs 安装:

npm install  phantomjs  -g

  phantomjs 事件就是精确插入点

  为了能够在精确的时间点注入测试脚本,我们需要了解下 phantomjs 在请求资源时会发生哪些事件,毕竟它也是一个事件驱动模型。

    onInitialized 类似于我们发送 ajax 请求,状态为 0 的时候
    onLoadStarted 准备加载网页,此时页面的 page.content 是存在的,内容为 <html><body></body></html>
    onLoadFinished 页面加载完成,是 DOMContentLoaded 还是 window.onload,我稍微测试了下,感觉应该是后者
    onResourceRequested 请求资源,如 css、js 等
    onResourceReceived 请求的资源已到达
    onClosing 关闭页面
    onConsoleMessage 沙箱内的 console 内容是不会出现到外层的,通过这个函数可以输出

  还有很多,具体可以翻阅文档: http://phantomjs.org/api/webpage/

  以下是我写的部分demo,仅供参考phcaTest.js:

//http://javascript.ruanyifeng.com/tool/phantomjs.html
//http://div.io/topic/1366
//http://imweb.io/topic/556c287879878a3b386dd026
//http://www.cnblogs.com/xinzhyu/p/4214669.html
//http://www.cnblogs.com/ziyunfei/archive/2012/09/27/2706254.html
//http://wiki.jikexueyuan.com/project/node-lessons/mocha-chai-phantomjs.html var webPage = require('webpage'); var files = [
{url:"http://pingfan1990.sinaapp.com/html5/pfgame/index.html",name:"game"},
{url:"http://pingfan1990.sinaapp.com/festival/index.html",name:"festival"},
{url:"http://pingfan1990.sinaapp.com/html5/travel/index.html",name:"travel"},
{url:"http://pingfan1990.sinaapp.com/html5/StackBlur/index.html",name:"blur"},
{url:"http://pingfan1990.sinaapp.com/html5/ScratchGirls/index.html",name:"scratch"},
{url:"http://wq.111.com/fd/promote/201509/s11/mainvenue.html",name:"main"}
]; files.forEach(function(item,index){
//console.log(index);
//createPic(item.url,item.name);
eventCreatePic(item.url,item.name,480,2000);
}); var count = 0; function createPic(url,picname,width,height){
var page = webPage.create(); //设置截图放大系数,尺寸
page.zoomFactor = 1; page.clipRect = { top: 0, left: 0, width: width, height: height }; page.viewportSize = {
width: width,
height: height
}; page.settings = {
javascriptEnabled: true,
loadImages: true,
userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0'
}; page.open(url,function(status){ //evaluate在页面中执行JavaScript代码
var title = page.evaluate(function() {
return document.title;
}); //includeJs方法用于页面加载外部脚本,加载结束后就调用指定的回调函数
/*page.includeJs("http://path/to/jquery.min.js", function() {
console.log(111);
});*/ if (status === 'fail') {
console.log('open page fail!');
} else {
page.render('./phantom/'+picname+".jpg", {format: 'jpeg', quality: '100'});
console.log('Page title is ' + title);
}
count++;
if(count === files.length){
console.log("截图生成完毕,phantomjs退出运行!");
phantom.exit();
}
page.close();
//phantom.exit();
});
} function eventCreatePic(url,picname,width,height){
var page = webPage.create(); page.clipRect = { top: 0, left: 0, width: width, height: height }; page.viewportSize = {
width: width,
height: height
};
page.onLoadStarted = function(){
//console.log("开始进入页面");
}
page.onLoadFinished = function(){
page.render('./phantom/'+picname+".jpg", {format: 'jpeg', quality: '100'});
page.close();
count++;
if(count === files.length){
console.log("截图生成完毕,phantomjs退出运行!");
phantom.exit();
}
}; page.open(url,function(status){
//evaluate在页面中执行JavaScript代码
var title = page.evaluate(function() {
return document.title;
});
if (status === 'fail') {console.log('open page fail!');}
console.log('Page title is '+title);
});
}

  结合node进程:

var fs = require("fs"),
child_process = require("child_process"),
http = require("http"); console.log("看是配合node+phantomjs玩法开始!"); var phan = child_process.exec("phantomjs phcatest.js",function (error, stdout, stderr) {
if (error) {
console.log(error.stack);
console.log('Error code: ' + error.code);
}
console.log('Child Process STDOUT: ' + stdout);
}); /*var phan = child_process.spawn("phantomjs",["phcatest.js"]);
phan.stdout.on('data', function (data) {
console.log('stdout: ' + data);
}); phan.stderr.on('data', function (data) {
console.log('stderr: ' + data);
}); phan.on('close', function (code) {
console.log('child process exited with code ' + code);
});*/

注意按照phantomjs的问题,由于phantomjs资源包被墙的限制,按照时建议大家采用淘宝镜像源

ios下推荐通过brew install phantomjs安装。

资料来源:

  phantomjs小试

  phantomjs 基础

  浏览器端测试:mocha,chai,phantomjs

  CasperJS,基于PhantomJS的工具包

  casperjs.org

  PhantomJS bridge for NodeJS

  阮老师PhantomJS

  利用nodejs+phantomjs+casperjs采集淘宝商品的价格

  前端自动化测试工具:SlimerJS、phantomJS 和 CasperJS

phantomjs试玩的更多相关文章

  1. HTML5+JS 《五子飞》游戏实现(七)游戏试玩

    前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...

  2. 一个小玩意 PHP实现微信红包金额拆分试玩

    <meta charset="utf-8"> <?php // 新年红包金额拆分试玩 class CBonus { public $bonus;//红包 publ ...

  3. 1.2G内存试玩RAMOS_XP

    1.2G内存试玩RAMOS_XP1.为了防止做系统时出现意外,用Bootice把C盘MBR修改为Grub4dos,这样子系统如果失败,可以进入PE重做. 2.进入PE格式化C盘,格式化的时候勾选启用N ...

  4. 8个经典的HTML5游戏在线试玩及源码学习

    原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...

  5. Apollo框架试玩

    2017年7月5日,百度举行了AI开发者大会,在会上发布了Apollo项目,并进行了演示,该项目在Github上已经能够被访问.出于一个程序员的好奇,昨天试玩了一把,确实不错. http://apol ...

  6. 发布到FaceBook试玩广告,FaceBook要求要一个Html文件

    Facebook 试玩广告具体要求: 试玩广告参数是创建试玩广告素材时要满足的要求. 试玩素材应为 HTML5 格式. 试玩广告素材不应使用 mraid.js 格式. 包含所有素材的试玩广告的单个 H ...

  7. [试玩] FMXLinux (Firemonkey for Linux) Linux 桌面开发(第三方插件)

    FMXLinux 是一个可以用来开发 Linux 桌面软件的第三方插件,它需要配合 Delphi 10.2 Toyko 官网:http://www.fmxlinux.com/ 使用方法:开启 FMX ...

  8. ESP32 LyraT音频开发板试玩(二):播放音乐

    我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 本文延续上一篇博客 将D:\msys32\ ...

  9. ESP32 LyraT音频开发板试玩(一):搭建开发环境

    我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 关于ESP32的开发环境搭建,官方有教程, ...

随机推荐

  1. MathType怎么编辑半开半闭区间

    数学中的公式有很多,涉及到各种各样的样式,这些公式都会用到不同的符号,每一个符号用在不同数学问题的公式中,都会有其特定的意义,比如括号.括号这个符号在除了能够表示优先运算之外,还可以代表区间的意思,小 ...

  2. 【QT】Cannot find file: untitled.pro,项目路径不要包含中文。

    Cannot find file: D:\文件及下载相关\文档\untitled\untitled.pro. 17:01:45: 进程"D:\Englishpath\QT5.9.3\5.9. ...

  3. Line云端全自动加好友机器人

    一个 LINE 帐号可以加入 5,000 名好友,让这些 5,000 名好友收到 LINE 的主动提醒,好友会看到我的头像.主页照片.姓名与状态消息等,这种行为称为 LINE 的曝光. 如果我们要针对 ...

  4. java中的编码和编码格式问题

    看来问的人和回答的人都不一定清楚什么是“编码和编码格式”,以及如何理解“java中字符串的编码”;首先明确几点: unicode是一种“编码”,所谓编码就是一个编号(数字)到字符的一种映射关系,就仅仅 ...

  5. scala中list集合的操作与总结

    /** * Created by root * Description : List */ object ListTest { def main(args: Array[String]): Unit ...

  6. windows本地hash值获取和破解详解

    powershell版的procdump https://www.t00ls.net/articles-48428.html procdump procdump是微软官方提供的一个小工具, 微软官方下 ...

  7. javascript使用jQuery加载CSV文件+ajax关闭异步

    <script src="jquery-3.3.1.min.js"></script>定义一个csv函数// 关闭异步,否则cesium初始化的时候,csv ...

  8. log4net日志的简单配置

    说起来log4net,我一直都知道这个的存在,但实际在项目中还真是没有去自己写过的那,这一次我在项目完成后并没有着急下一个项目的开始,于是突然想起来是否添加一个日志的编写,于是开始了log4net的总 ...

  9. “std”: 具有该名称的命名空间不存在

    当只用using namesp std 时,会报 error C2871: “std”: 具有该名称的命名空间不存在. 包含一个含有std的头文件就不会报错了,比如<iostream>.& ...

  10. PHP 函数引用传值

    <?php /* * @1 $arr = array_fill(1,100,'bbb'); echo memory_get_usage()."<br>"; fun ...