记录phantomjs学习

Posted 2022-12-13 一如年少模样

初次接触这个，一直跟着API 和网上的前辈学习，下面我就记录下学习的情况吧。

                                                                                                    -----------------坚持住，奔跑吧，小青年

一、初次见面

       phantomjs实现了一个无界面的webkit浏览器。虽然没有界面，但dom渲染、js运行、网络访问、canvas/svg绘制等功能都很完备，在页面抓取、页面输出、自动化测试等方面有广泛的应用。

      核心API：

webpage:如你所见，上面的例子我们已经见识了它的威力了。它的作用主要是提供了一套可以访问和操作web文档的核心方法，包括操作DOM、事件捕获、用户事件模拟等等。

system:该模块提供了一些与操作系统相关的接口，例如访问操作系统信息、访问系统环境变量、接受命令行参数等等与程序执行相关的系统信息。

fs:即FileSystem。熟悉NodeJS的朋友都知道，NodeJS也内建了相关的核心模块。fs提供了执行文件I/O操作的标准接口，如读写文件、删除文件等。它使得你持久化一些文件（如logfile等）变得非常容易。

webserver:如其名字一样，你可以基于它来实现自己的webserver，用来处理请求并且执行PhantomJS代码等。

API 地址：http://phantomjs.org/api/

二、安装使用

       下载地址：http://phantomjs.org/download.html，支持三种操作系统，window \\Mac OS\\linux,下载完成解压， 配置环境变量。打开我的电脑->右键属性->高级系统设置->高级标签->环境变量，在系统变量里找到Path,将你的phantomjs路径添加到环境变量里，不过记得在前面加个；号。可以试着运行hello.js看下效果。

三、代码分析

直接上代码 work.js

 var page = require('webpage').create();
 var fs=require("fs");
 phantom.outputEncoding="gbk";
 var url='http://127.0.0.1:8020/login/login.html';//本地的html 没有服务器交互，无cookie
 var url1="https://account.xiaomi.com/pass/serviceLogin";
 page.open(url1, function(status) 

 if ( status === "success" ) 
    var ret=page.evaluate(function()

        var form = document.getElementById("login-main-form");
        form.elements["username"].value = '用户名';
        form.elements["pwd"].value = '密码';
        form.elements["login-button"].click();  
        return document.title;
    ); 
    var url = page.url;
    console.log('URL: ' + url);//get page url
    console.log(ret)
    console.log(page.title); // get page title
    page.viewportSize =  width: 1366, height: 600 ;//设置页面的尺寸
    page.render('info_test.png');//截图
  else

    console.log("Page failed to load."); 
 
 setTimeout('print_cookies()',1000);
);

function print_cookies()

    console.info(JSON.stringify(page.cookies, undefined, 4))//打印
    //写入file
    file=fs.open("cookie.log",'w');
    file.write(JSON.stringify(page.cookies));
    file.close();

    phantom.exit()

分析以上代码：

引入web page模块，并创建实例。

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

设置为gbk防止访问信息乱码

phantom.outputEncoding="gbk"

page.open() 此方法用于打开一个网页，是一个很重要的API，它有四种调用形式：

第一种：open(url, callback)void

上段代码中就应用的这个方法，也是最简单的， callback（）会在页面载入完成后调用，由page.onLoadFinished 调用（时机晚于 page.onLoadFinished ）。这个callback 会接受一个参数 status ，可能值为 "success" 和 "fail" 。

第二种：open(url, method, callback)void,

第三种：open(url, method, data, callback) void

二 三差不多，举个官网的example ， we make a request using the POST method, and include some basic data.（psot请求，携带一些基本的数据）

var webPage = require('webpage');
var page = webPage.create();
var postBody = 'user=username&password=password';

page.open('http://www.google.com/', 'POST', postBody, function(status) 
  console.log('Status: ' + status);
  // Do other things here...
);

第四种：open(url, settings, callback) void 携带一些设置，operation、header、encoding类型等等，

var webPage = require('webpage');
var page = webPage.create();
var settings = 
  operation: "POST",
  encoding: "utf8",
  headers: 
    "Content-Type": "application/json"
  ,
  data: JSON.stringify(
    some: "data",
    another: ["custom", "data"]
  )
;

page.open('http://your.custom.api', settings, function(status) 
  console.log('Status: ' + status);
  // Do other things here...
);

page.render() 能够把当前页面渲染成图片并输出到指定文件中。输出的文件格式由传入的文件扩展名决定，目前支持 PNG 、 JPEG 、 GIF 、 PDF 。

page.render('info_test.png');//截图

由于js语言是非阻塞的，所以有时候需要使用setTimtout setInterval来等待沙箱中执行的js语句，例如等待里面的ajax完成等。

举个倒计时的例子，按秒从10倒数到1，结束。

var t = 10,
interval = setInterval(function()
    if ( t > 0 ) 
        console.log(t--);
     else 
        console.log("BLAST OFF!");
        phantom.exit();
    
, 1000);

接下来看下fs

var fs=require("fs");也需要引入 创建实例的

fs.open(string path, string/Object parameters)

open() 方法接受两个参数，第一个参数是要打开的文件路径，第二个参数后面还会见到，这里统一说明。如果是字符串，则代表文件打开的模式，可选的有 'r' 、 'w' 、 'a/+' 、 'b' （read时仅支持 'b' ）；如果是一个对象，则表示配置项，一共有两个配置项，分别是 mode 和 charset ， mode 就是刚刚提到的打开模式， charset 表示文件的编码类型。

    1 r      //读取文件
    2 w    //写文件，回覆盖
    3 a     //写文件，追加
    4 rb    //读取二进制流
    5 rw    //写入二进制流

如果对一个文件执行了open，请别忘了在文件使用完成后，再对其执行close。 本段代码就是把网页cookie保存到工程目录cookie.log下。

运行下代码：

：

运行完看下目录下是否多了一个图片和存储cookie的log文件。