phantomjs小试

本文作者:IMWeb 李冬冬 原文出处:IMWeb社区 未经同意,禁止转载

简单来说,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 命令,最后,可以看到登录后的页面截图

延伸阅读

CasperJS:一个开源的导航脚本处理和高级测试工具

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端复杂表格表头

    最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上的一些例子,在此做一了一个完整的vue版的例子。

    夜尽天明
  • JS是单线程,你了解其运行机制吗?

    如果是windows电脑中,可以打开任务管理器,可以看到有一个后台进程列表。对,那里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及cpu占有率。

    夜尽天明
  • JavaScript判断是否是iPhone X系列机型,H5和其他环境兼容

    先通过返回的布尔值判断会否是 iPhone X ,然后再进行操作:比如给头部一个上边距,一般是44px。

    德顺
  • HTML的 script 标签引用js文件及其属性整理

    在 HTML 页面中,可以通过 <script> 标签插入 JavaScript 代码,也可以引用外部 js 文件。

    德顺
  • 浏览器内核之 HTML 解释器和 DOM 模型

    此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

    夜尽天明
  • 浏览器内核之 CSS 解释器和样式布局

    此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

    夜尽天明
  • a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思

    javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击时就没有任何反应。这是...

    德顺
  • web前端优化,减少http请求,提高页面加载速度

    80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求...

    德顺
  • JavaScript最新手机、电话、身份证号码和汉字等的正则表达式

    最近在使用 jQuery.validator 验证插件,其中有地方需要用到手机号码验证的功能。

    德顺
  • jQuery和js获取页面中所有a链接的href值

    德顺

扫码关注云+社区

领取腾讯云代金券