---

PhantomJS - 快速指南

PhantomJS - 概述

PhantomJS 被称为 无头浏览器，因为在执行 JavaScript 代码时无需浏览器参与。执行不会在浏览器显示中看到，而是在命令行提示符中看到。CSS 处理、DOM 操作、JSON、Ajax、Canvas、SVG 等功能都将在命令提示符中处理。PhantomJS 没有 GUI，因此，它的所有执行都在命令行中进行。

使用 PhantomJS，我们可以写入文件、读取文件内容或上传文件、进行屏幕截图、将网页转换为 pdf 等等。使用无头浏览器，您可以获得所有浏览器行为，即Cookies、Http 请求方法，即GET /POST、清除 Cookies、删除 Cookies等，重新加载页面，导航到其他页面。

PhantomJS 使用 WebKit，它具有与著名浏览器(Google Chrome、Mozilla Firefox、Safari 等)类似的浏览环境。它还提供了许多 JavaScript API，可帮助截取屏幕截图、上传文件、写入文件、读取文件、与网页交互等。

PhantomJS 不支持 Flash 或视频，因为它需要插件，并且很难在命令行上支持它们。

PhantomJS 的功能

现在让我们了解 PhantomJS 提供的功能。

页面自动化

PhantomJS 允许您在其 API 的帮助下读取页面内容。它可以帮助操作 DOM，使用外部库执行所需的任务。

屏幕截图

PhantomJS 有助于对指定页面进行屏幕截图，并将其保存为 PNG、JPEG、PDF 和 GIF 等各种格式的图像。借助屏幕截图，它可以轻松帮助确保 Web 内容正常。

PhantomJS 提供属性和方法，借助这些属性和方法，开发人员可以调整屏幕截图的大小并指定他们想要捕获的区域。

无头测试

PhantomJS 帮助在命令行上测试 UI。同时，借助屏幕截图，它可以轻松帮助查找 UI 中的错误。PhantomJS 有时无法单独帮助测试。但是，它可以与其他测试库(如 Mocha、Yoeman 等)一起打包。您可以借助 PhantomJS 上传文件并提交表单。

PhantomJS 可用于测试跨站点的登录，并确保安全性不受损害。PhantomJS 可以与其他工具(如 CasperJS、Mocha、Qunit)一起使用，以使测试更加强大。

网络监控

PhantomJS 的重要功能之一是使用可用的 API 监控网络连接。PhantomJS 允许检查网络流量;它适合对网络行为和性能进行各种分析。

PhantomJS 可用于在实时环境中收集有关网页性能的数据。PhantomJS 可以与 Yslow 等工具一起使用，以收集任何网站的性能指标。

PhantomJS - 环境设置

PhantomJS 是一款免费软件，根据 BSD 许可证 分发。它易于安装，并提供多种功能来执行脚本。PhantomJS 可在 Windows、Linux 和 Mac 等多个平台上轻松运行。

要下载 PhantomJS，您可以访问 - http://phantomjs.org/，然后单击下载选项。

适用于 Windows

下载页面显示不同操作系统的下载选项。下载 zip 文件，解压后您将获得可执行文件 phantom.exe。将 PATH 环境变量设置为 phantom.exe 文件的路径。打开新的命令提示符并输入 phantomjs –v。它应该会为您提供正在运行的 PhantomJS 的当前版本。

对于 MAC OS X

下载适用于 MAC OS 的 PhantomJS zip 文件并提取内容。下载内容后，将 PhantomJS 移动到 - /usr/local/bin/。在终端执行 PhantomJS 命令，即 phantomjs –v，它应该会为您提供 PhantomJS 的版本描述。

Linux 64 位

下载适用于 Linux 64 位的 PhantomJS zip 文件并提取内容。下载内容后，将 PhantomJS 文件夹移动到 /usr/local/share/ 并 创建符号链接 −

sudo mv $PHANTOM_JS /usr/local/share
sudo ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin。

在终端执行 phantomjs –v，它应该会给出 PhantomJS 的版本。

Linux 32 位

下载适用于 Linux 32 位的 PhantomJS zip 文件并提取内容。下载内容后，将 PhantomJS 文件夹移动到 /usr/local/share/ 并创建符号链接 −

sudo mv $PHANTOM_JS /usr/local/share
sudo ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin。

在终端执行 phantomjs –v，它应该会给出 PhantomJS 的版本。

也可以通过单击以下链接从 git 存储库中获取 PhantomJS 源代码 - https://github.com/ariya/phantomjs/

要在 PhantomJS 中运行脚本，命令如下 −

phantomjs jsfile arg1 arg2… 

PhantomJS - Object

在本章中，我们将介绍 PhantomJS 的四个重要对象。它们如下所示 −

• CookiesEnabled
• Cookies
• LibraryPath
• Version

现在让我们详细讨论一下这些对象。

cookiesEnabled

它指示是否启用了 cookie。如果启用，它将返回 true;否则返回 false。

语法

其语法如下 −

phantom.cookiesEnabled

示例

cookieenabled.js

phantom.addCookie ({  
   //使用 addcookie 属性添加 cookie
   name: 'c1', 
   value: '1', 
   domain: 'localhost' 
}); 

console.log("Cookie Enabled value is : "+phantom.cookiesEnabled); 
phantom.exit();

输出

命令 − phantomjs cookieenabled.js

Cookie Enabled value is : true 

Cookies

它有助于向域添加和设置 cookie。它返回一个对象，其中包含该域可用的所有 cookie。

语法

其语法如下 −

phantom.cookies;

示例

文件名:phantomcookie.js

phantom.addCookie ({ 
   name: 'c1', 
   value: '1', 
   domain: 'localhost' 
}); 
phantom.addCookie ({ 
   name: 'c2', 
   value: '2', 
   domain: 'localhost' 
}); 
phantom.addCookie ({ 
   name: 'c3', 
   value: '3', 
   domain: 'localhost' 
}); 
console.log(JSON.stringify(phantom.cookies)); 
phantom.exit();

输出

命令 − phantomjs phantomcookie.js

[{"domain":".localhost","httponly":false,"name":"c3","path":"/","secure":false, "
value":"3"},{"domain":".localhost","httponly":false,"name":"c2","path":"/","sec u
re":false,"value":"2"},{"domain":".localhost","httponly":false,"name":"c1","pat h
":"/","secure":false,"value":"1"}]

在上面的例子中，我们向 localhost 域添加了一些 cookie。然后我们使用 phantom.cookies 获取它。它使用 JSON stringify 方法将 JavaScript 对象转换为字符串，返回一个包含所有 cookie 的对象。您还可以使用 foreach 访问 cookie 的名称/值。

LibraryPath

PhantomJS libraryPath 存储 injectJS 方法要使用的脚本路径。

语法

其语法如下 −

phantom.libraryPath

示例

以下是查找版本的示例。

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

page.open('http://www.tutorialspoint.com/jquery', function(status) {
   if (status === "success") { 
      page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ', function() { 
         if (page.injectJs('do.js')) { 
            // returnTitle 是从我们的 do.js 文件加载的一个函数 - 见下文
            return returnTitle(); 
         });
         
         console.log(title); 
         phantom.exit(); 
      } 
   } 
});

window.returnTitle = function() { 
   return document.title;
}; 

上述程序生成以下输出。

Jquery Tutorial

Version

它给出正在运行的 PhantomJS 的版本，并在对象中返回详细信息。例如:{"major":2,"minor":1,"patch":1

语法

其语法如下 −

phantom.version

示例

以下是查找版本的示例。

var a = phantom.version;
console.log(JSON.stringify(a));
console.log(a.major);
console.log(a.minor);
console.log(a.patch);
phantom.exit();

上述程序生成以下输出。

{"major":2,"minor":1,"patch":1} 
2 
1 
1

在上面的例子中，我们使用了 console.log 来打印版本。目前，我们正在运行版本 2。它返回包含上述代码块中显示的详细信息的对象。

PhantomJS - 方法

PhantomJS 是一个无需浏览器即可执行 JavaScript 的平台。为此，使用以下方法，这些方法有助于添加 Cookie、删除、清除、退出脚本、注入 JS 等。

我们将在本章中进一步讨论这些 PhantomJS 方法及其语法。类似的方法，即addcookie，injectjs存在于网页模块中，将在后续章节中讨论。

PhantomJS 公开了以下方法，可以帮助我们在没有浏览器的情况下执行 JavaScript −

• addCookie
• clearCookie
• deleteCookie
• Exit
• InjectJS

现在让我们通过示例详细了解这些方法。

addCookie

addcookie 方法用于添加 cookie 并存储在数据中。它类似于浏览器存储它的方式。它接受一个参数，该参数是一个具有 cookie 所有属性的对象，其语法如下所示 −

语法

其语法如下 −

phantom.addCookie ({ 
   "name" : "cookie_name",  
   "value" : "cookie_value", 
   "domain" : "localhost" 
});

name、value、domain 是必须添加到 addcookie 函数的属性。如果 cookie 对象中缺少任何此属性，此方法将失败。

• name − 指定 cookie 的名称。

• value − 指定要使用的 cookie 的值。

• domain − 将应用 cookie 的域。

示例

以下是 addcookie 方法的示例。

var page = require('webpage').create(),url = 'http://localhost/tasks/a.html'; 
page.open(url, function(status) { 
   if (status === 'success') {     
      phantom.addCookie({   //添加名称 cookie1，其值为 1
         name: 'cookie1', 
         value: '1', 
         domain: 'localhost' 
      }); 
      phantom.addCookie({   // 添加值为 2 的 cookie2
         name: 'cookie2', 
         value: '2', 
         domain: 'localhost' 
      }); 
      phantom.addCookie({   // 添加值为 3 的 cookie3
         name: 'cookie3', 
         value: '3', 
         domain: 'localhost' 
      }); 
      console.log('Added 3 cookies'); 
      console.log('Total cookies :'+phantom.cookies.length);  
      
      // 将输出添加到 url 的 cookie 总数。 
   } else { 
      console.error('Cannot open file'); 
      phantom.exit(1); 
   } 
}); 

示例

a.html

<html>
   <head>
      <title>Welcome to phantomjs test page</title>
   </head>
   
   <body>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
   </body>
</html>

上述程序生成以下输出。

Added 3 cookies 
Total cookies :3

代码注释一目了然。

clearCookies

此方法允许删除所有 cookie。

语法

其语法如下 −

phantom.clearCookies();

此概念的工作原理类似于通过在浏览器菜单中选择来删除浏览器 cookie。

示例

以下是 clearCookies 方法的示例。

var page = require('webpage').create(),url = 'http://localhost/tasks/a.html'; 
page.open(url, function(status) { 
   if (status === 'success') {     
      phantom.addCookie({   //添加名称 cookie1，其值为 1
         name: 'cookie1', 
         value: '1', 
         domain: 'localhost' 
      }); 
      phantom.addCookie({   // 添加值为 2 的 cookie2
         name: 'cookie2', 
         value: '2', 
         domain: 'localhost' 
      }); 
      phantom.addCookie({   // 添加值为 3 的 cookie3
         name: 'cookie3', 
         value: '3', 
         domain: 'localhost' 
      }); 
      console.log('Added 3 cookies'); 
      console.log('Total cookies :'+phantom.cookies.length); 
      phantom.clearCookies(); 
      console.log(
         'After clearcookies method total cookies :' +phantom.cookies.length); 
      
      phantom.exit();     
   } else { 
      console.error('Cannot open file'); 
      phantom.exit(1); 
   } 
}); 

a.html

<html>
   <head>
      <title>Welcome to phantomjs test page</title>
   </head>
   
   <body>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
      <h1>This is a test page</h1>
   </body>
</html>

上述程序生成以下输出。

Added 3 cookies 
Total cookies :3 
After clearcookies method total cookies :0 

deleteCookie

删除 CookieJar 中任何具有与 cookieName 匹配的"name"属性的 cookie。如果成功删除，它将返回 true;否则返回 false。

语法

其语法如下 −

phantom.deleteCookie(cookiename);

让我们借助示例了解 addcookie、clearcookies 和 deletecookie。

示例

以下是演示 deleteCookie 方法 − 用法的示例。

文件:cookie.js

var page = require('webpage').create(),url = 'http://localhost/tasks/a.html'; 
page.open(url, function(status) { 
   if (status === 'success') {     
      phantom.addCookie({   //添加名称 cookie1，其值为 1
         name: 'cookie1', 
         value: '1', 
         domain: 'localhost' 
      }); 
      phantom.addCookie({   // 添加值为 2 的 cookie2
         name: 'cookie2', 
         value: '2', 
         domain: 'localhost' 
      });
      phantom.addCookie({   // 添加值为 3 的 cookie3
         name: 'cookie3', 
         value: '3', 
         domain: 'localhost' 
      });  
      console.log('Added 3 cookies'); 
      console.log('Total cookies :'+phantom.cookies.length); 
      
      //将输出添加到 url 的 cookie 总数。   
      console.log("Deleting cookie2"); 
      phantom.deleteCookie('cookie2'); 
      
      console.log('Total cookies :'+phantom.cookies.length); 
      phantom.clearCookies();
      
      console.log(
         'After clearcookies method total cookies :' +phantom.cookies.length); 
      phantom.exit(); 
   } else { 
      console.error('Cannot open file'); 
      phantom.exit(1); 
   } 
});

上述程序生成以下输出。

phantomjs cookie.js
Added 3 cookies
Total cookies :3
Deleting cookie2
Total cookies :2
After clearcookies method total cookies :0

Exit

phantom.exit 方法将退出它已启动的脚本。它退出程序并返回值。如果没有传递任何值，则返回 '0'。

语法

其语法如下 −

phantom.exit(value);

如果您未添加 phantom.exit，则命令行会假定执行仍在进行中且不会完成。

示例

让我们看一个例子来了解 exit 方法的用法。

console.log('Welcome to phantomJs'); // 输出 Welcome to phantomJS
var a = 1; 
if (a === 1) { 
   console.log('Exit 1'); //outputs Exit 1 
   phantom.exit(); // Code exits. 
} else { 
   console.log('Exit 2'); 
   phantom.exit(1); 
}

上述程序生成以下输出。

phantomjs exit.js

Welcome to phantomJs 
Exit 1 

phantom.exit 之后的任何代码都不会执行，因为 phantom.exit 是结束脚本的方法。

injectJs

InjectJs 用于在 phantom 中添加 addtionaljs 文件。如果在当前 目录 librarypath 中找不到该文件，则 phantom 属性 (phantom.libraryPath) 将用作跟踪路径的附加位置。如果文件添加成功，则返回 true，否则，如果无法找到该文件，则返回 false 以防失败。

语法

其语法如下 −

phantom.injectJs(filename);

示例

让我们看下面的例子来了解injectJs的用法。

文件名:inject.js

console.log("Added file");

文件名:addfile.js

var addfile = injectionJs(inject.js);
console.log(addfile);
phantom.exit();

输出

命令 − C:\phantomjs\bin>phantomjs addfile.js

Added file // coming from inject.js
true

在上面的例子中，addfile.js 使用injectJs调用文件inject.js。执行addfile.js时，inject.js中的console.log将显示在输出中。由于文件inject.js已成功添加，因此addfile变量也显示为true。

PhantomJS - Webpage 网页模块属性

PhantomJS 提供了相当多的属性和方法来帮助我们与网页内的内容进行交互。

require("webpage").create() 命令创建一个网页对象。我们将使用此对象在下面列出的属性和方法的帮助下操作网页。

var wpage = require("webpage").create();

下表列出了我们将要讨论的所有网页属性。

PhantomJS - Webpage 网页模块方法

Webpage 网页模块具有用于Cookie、框架、页面导航、重新加载、渲染和文件上传的方法。

以下是网页上可用的方法。

Webpage 网页模块事件/回调

下表描述了Webpage 网页模块可用的回调。

网页子进程模块

Phantomjs 子进程模块有助于与子进程交互，并使用 stdin /stdout/stderr 与它们通信。子进程可用于执行 打印、发送邮件 等任务，或 调用用其他语言编写的程序。要创建子进程模块，您需要引用。

例如 −

var process = require("child_process");

Spawn 方法

使用 spawn 子进程，您可以订阅其 stdout 和 stderr 流以实时获取数据。

语法

其语法如下 −

var spawn = require('child_process').spawn;

示例

让我们看一个 spawn 方法的示例。

var process = require("child_process")
var spawn = process.spawn
var child = spawn("cmd", ['/c', 'dir']);

child.stdout.on("data", function (data) {
   console.log("spawnSTDOUT---VALUE:", JSON.stringify(data))
})
child.stderr.on("data", function (data) {
   console.log("spawnSTDERR:", JSON.stringify(data))
})
child.on("exit", function (code) {
   console.log("spawnEXIT:", code)
})

Output

上述程序生成以下输出。

spawnSTDOUT---VALUE: " Volume in drive C is OS
"
spawnSTDOUT---VALUE: " Volume Serial Number is 7682-9C1B

 Directory of C:
\phantomjs\bin

"
spawnSTDOUT---VALUE: "20-05-2017  10:01
<DIR>          .
20-05-2017  10:01
<DIR>          ..
13-05-2017  20:48   12 a,txt.txt
07-05-2017  08:51
63 a.js
06-05-2017  16:32           120,232 a.pdf
13-05-2017  20:49 
spawnEXIT: 0 

PhantomJS - 文件系统模块属性

文件系统模块有许多 API 来处理文件和目录。您可以创建/写入和删除文件/目录。要开始使用文件系统模块，您必须引用 fs 模块。

var fs = require('fs');

文件系统模块有两个可用属性:Separator 和 Working Directory。让我们详细了解它们。

分隔符

它告诉您用于文件路径的分隔符。

• 对于 Windows:\
• 对于 Linux:/

语法

其语法如下 −

fs.seperator

示例

var fs = require('fs');
console.log(fs.seperator);
phantom.exit();

上述程序生成以下输出。

undefined

workingDirectory

工作目录是PhantomJS执行的目录。

语法

其语法如下 −

var fs = require('fs');
fs.workingDirectory;

示例

var fs = require('fs');
console.log(fs.workingDirectory);
phantom.exit();

上述程序生成以下输出。

C:/phantomjs/bin

PhantomJS - 文件系统模块方法

下表包含文件系统模块上可用的所有方法及其说明。

PhantomJS - 系统模块属性

在本章中，我们将讨论 PhantomJS 的各种系统模块属性。

args

PhantomJS 的系统模块具有不同的属性，有助于传递参数、了解执行的文件等。

args 属性基本上返回在命令行传递的参数。您还可以传递要读取的页面 URL。如果您想要存储屏幕截图 pdf 文件或上传文件，可以将详细信息传递到命令行，并使用 args 属性读取。

让我们找到传递到命令行的每个参数的长度和获取方法。

语法

其语法如下 −

var system = require('system');
system.args;

示例

查看以下示例以了解此属性的工作原理。

var system = require('system');
console.log(system.args.length);

if (system.args.length>0) {
   console.log(JSON.stringify(system.args));
}
phantom.exit();

上述程序生成以下输出。

Command − phantomsjs args.js http://localhost/tasks/request.html

2
["args.js","http://localhost/tasks/request.html"]

第一个值是文件的名称，下一个值是传递的 URL。您可以在命令行中传递更多参数，并使用 system.args 获取相同的参数。

env

env 属性返回系统的详细信息。

语法

其语法如下 −

var system = require('system');
system.env;

示例

var system = require('system');
console.log(JSON.stringify(system.env));
phantom.exit();

上述程序生成以下输出。

{"=::":"::\","=C:":"C:\phantomjs\bin","=ExitCode":"00000000","ALLUSERSPROFILE":
"C:\ProgramData","APPDATA":"C:\Users\UserName\AppData\Roaming","COMPUTERNAME":
"X","ComSpec":"C:\Windows\system32\cmd.exe","CommonProgramFiles":
"C:\Program Files (x86)\Common Files","CommonProgramFiles(x86)":
"C:\Program Files (x86)\Common Files","CommonProgramW6432":
"C:\Program Files\Common Files","FP_NO_HOST_CHECK":"NO","HOMEDRIVE":"C:",
"HOMEPATH":"\Users\UserName","LOCALAPPDATA":
"C:\Users\UserName\AppData\Local","LOGONSERVER":"\\MicrosoftAccount",
"NUMBER_OF_PROCESSORS":"2","OS":"Windows_NT","PATHEXT":".COM;.EXE;.BAT;.CMD;.VBS ;
.VBE;.JS;.JSE;.WSF;.WSH;.MSC","PROCESSOR_ARCHITECTURE":"x86","PROCESSOR_ARCHITEW64 32":
"AMD64","PROCESSOR_IDENTIFIER":"Intel64 Family 6 Model 58Stepping9,GenuineIntel",
"PROCESSOR_LEVEL":"6","PROCESSOR_REVISION":"3a09","PROMPT":
"$P$G","PSModulePath":"C:\Windows\system32\WindowsPowerShell\v1.0\
Modules\" ,"PUBLIC":"C:\Users\Public","Path":
"C:\Program Files\Dell\DW WLAN Card;
c:\Program Files (x86)\Intel\iCLS Client\;c:\Program Files\Intel\iCLSClient\;
C:\Windows\system32;C:\Windows;C:\Windows\System32\ \Wbem;
C:\Windows\System32\WindowsPowerShell\v1.0\;
C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;
C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;
C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;
C:\Program Files (x86)\Intel\Intel(R) 
ManagementEngineComponents\IPT;c:\ProgramFiles\WIDCOMM\BluetoothSoftware\;
c:\ProgramFiles\WIDCOMM\BluetoothSoftware\syswow64;
C:\ProgramFiles(x86)\WindowsLive\Shared;C:\ProgramFiles\nodejs\;
C:\ProgramFiles\Git\cmd;C:\ProgramFiles\ OpenVPN\bin;
C:\ProgramFiles(x86)\Skype\Phone\;C:\Users\UserName\AppData\Roaming
\npm","ProgramData":
"C:\ProgramData","ProgramFiles":"C:\ProgramFiles(x86)", 
"ProgramFiles(x86)":"C:\ProgramFiles(x86)","ProgramW6432":
"C:\ProgramFiles","SESSIONNAME":"Console","SystemDrive":
"C:","SystemRoot":"C:\Windows","TEMP":"C:\Users\ \Username~1\AppData\Local\Temp",
"TMP":"C:\Users\Username~1\AppData\Local\Temp",
"USERDOMAIN":"USER","USERDOMAIN_ROAMINGPROFILE":"USER","USERNAME":"X Y","USERPROFILE":
"C:\Users\X Y","windir":"C:\Windows"}

OS

它返回所用操作系统的详细信息。它返回一个包含体系结构、操作系统名称和版本的对象。

语法

其语法如下 −

var system = require('system');
system.os;

示例

var system = require('system');
console.log(JSON.stringify(system.os));
phantom.exit();

上述程序生成以下输出。

{"architecture":"32bit","name":"windows","version":"8.1"}

pid

此属性返回进程 ID。

语法

其语法如下 −

var system = require('system');
system.pid;

示例

让我们看一个 pid 属性的示例。

var system = require('system');
console.log(system.pid);
phantom.exit();

上述程序生成以下输出。

2160

platform

此属性返回我们正在处理的平台。

语法

其语法如下 −

var system = require('system');
system.platform;

示例

var system = require('system');
console.log(system.platform);
phantom.exit();

上述程序生成以下输出。

Phantomjs

PhantomJS - Web 服务器模块属性

PhantomJS 使用名为 mongoose 的嵌入式 Web 服务器。目前，PhantomJS 无法与任何其他生产 Web 服务器连接。就连接而言，它一次可以处理 10 个连接，并且超过 10 个请求将在队列中等待。

要启动 Web 服务器，我们需要使用以下语法 −

var webserver = require ('webserver');

让我们了解 Port 属性，该属性用于侦听发送到 Web 服务器的请求。

port

Web 服务器的 Port 属性用于侦听发送给它的请求。

语法

其语法如下 −

var server = require('webserver').create();
var listening = server.listen(port, function (request, response) {});

示例

让我们举一个例子来了解 port 属性的工作原理。

var webserver = require('webserver'); 
var server = webserver.create(); 
var service = server.listen(8080,function(request,response){  
}); 
if(service) console.log("server started - http://localhost:" + server.port); 

上述程序生成以下输出。

server started - http://localhost:8080

PhantomJS - Web 服务器模块方法

在本章中，我们将讨论 PhantomJS 的 Web 服务器模块的各种方法。

close

close 方法用于关闭 Web 服务器。

语法

其语法如下 −

var server = require('webserver').create();
server.close();

示例

以下示例展示了如何使用 close 方法。

var webserver = require('webserver');
var server = webserver.create();
var service = server.listen(8080,function(request,response){
});

if(service) console.log("server started - http://localhost:" + server.port);
console.log(server.port);
server.close();
console.log(server.port);

上述程序生成以下输出。

server started - http://localhost:8080 
8080

在这里，我们在关闭服务器后对 server.port 进行了控制。因此，由于 Web 服务器已关闭，因此它不会响应。

listen

server.listen 方法采用端口和回调函数以及两个参数，即 - Request Object 和 Response Object。

Request Object 包含以下属性 −

• Method − 这定义了方法 GET /POST。

• URL − 这显示请求的 URL。

• httpVersion − 这显示实际的 http 版本。

• Headers −这将显示所有带有键值对的标头。

• Post − 请求正文仅适用于 post 方法。

• postRaw − 如果 Content-Type 标头设置为"application/x-www-formurlencoded"，则帖子的原始内容将存储在此额外属性 (postRaw) 中，然后该帖子将自动使用 URL 解码版本的数据进行更新。

Response Object 包含以下属性 −

• Headers − 包含所有 HTTP 标头作为键值对。应在首次调用 write 之前设置它。

• SetHeader −这将设置一个特定的标头。

• Header (name) − 它返回给定标头的值。

• StatusCode − 它设置返回的 HTTP 状态代码。

• SetEncoding (encoding) − 它用于转换给定给 write() 的数据。默认情况下，数据将转换为 UTF-8。如果数据是二进制字符串，则指示"二进制"。如果数据是缓冲区(例如来自 page.renderBuffer)，则不需要。

• Write (data) − 它发送响应主体的数据。可以多次调用。

• WriteHead (statusCode, headers) − 它向请求发送响应标头。状态代码是 3 位 HTTP 状态代码(例如 404)。最后的参数和标头是响应标头。

• Close − 它关闭 http 连接。

• CloseGracefully − 它与 close() 类似，但它确保首先发送了响应标头。

语法

其语法如下 −

var server = require('webserver').create();
var listening = server.listen(8080, function (request, response) {}

示例

让我们举一个例子来了解 listen 方法的工作原理。

var page = require('webpage').create(); 
var server = require('webserver').create(); 
var port = 8080; 
var listening = server.listen(8080, function (request, response) { 
    console.log("GOT HTTP REQUEST");
    console.log(JSON.stringify(request, null, 4));
    
    // 我们在这里设置标头
    response.statusCode = 200;
    response.headers = {"Cache": "no-cache", "Content-Type": "text/html"};
    
    // 上面的标头现在将被隐式发送
    // 现在我们编写正文
    response.write("<html><head><title>Welcone to Phantomjs</title></head>");
    r​​esponse.write("<body><p>Hello World</p></body></html>");
    r​​esponse.close();
}); 

if (!listening) { 
   console.log("could not create web server listening on port " + port); 
   phantom.exit(); 
} 

var url = "http://localhost:" + port + "/foo/response.php"; 
console.log("sending request to :" +url); 
page.open(url, function (status) { 
   if (status !== 'success') { 
      console.log('page not opening'); 
   } else { 
      console.log("Getting response from the server:"); 
      console.log(page.content); 
   } 
   
   phantom.exit(); 
});

上述程序生成以下输出。

sending request to :http://localhost:8080/foo/response.php 
GOT HTTP REQUEST { 
   "headers": {
      "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8", 
      "Accept-Encoding": "gzip, deflate", 
      "Accept-Language": "en-IN,*", 
      "Connection": "Keep-Alive", 
      "Host": "localhost:8080", 
      "User-Agent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 
         (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1" 
   }, 
   "httpVersion": "1.1", 
   "method": "GET", 
   "url": "/foo/response.php" 
} 
Getting response from the server: 
<html><head><title>Welcone to Phantomjs</title></head><body><p>Hello World</p></body>
</html> 

PhantomJS - 命令行界面

可以使用关键字"phantomjs"和文件名称来执行 PhantomJS。例如，"phantomjs file.js"。

您还可以将参数传递给"file.js"，如下所示 −

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

让我们来看看命令行中可用的一些选项。

PhantomJS - 屏幕截图

PhantomJS 在截取网页屏幕截图和将网页转换为 PDF 方面非常有用。我们在这里给出了一个简单的示例来演示它的工作原理。

示例

var page = require('webpage').create();
page.open('http://phantom.org/',function(status){
    page.render('phantom.png');
    phantom.exit();
});

执行上述程序，输出将保存为 phantom.png。

将网页转换为 PDF

PhantomJS 还有助于将网页转换为添加了页眉和页脚的 PDF。请查看以下示例以了解其工作原理。

var wpage = require('webpage').create(); 
var url = "https://en.wikipedia.org/wiki/Main_Page"; 
var output = "test.pdf"; 

wpage.paperSize = { 
   width: screen.width+'px', 
   height: '1500px', 
   
   margin: {
      'top':'50px', 
      'left':'50px', 
      'rigtht':'50px' 
   }, 
   orientation:'portrait', 
   header: { 
      height: "1cm", 
      contents: phantom.callback(function(pageNumber, nPages) { 
         return "<h5>Header <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   }, 
   footer: { 
      height: "1cm", 
      contents: phantom.callback(function(pageNumber, nPages) {   
         return "<h5>Footer <b>" + pageNumber + " / " + nPages + "</b></h5>"; 
      }) 
   } 
} 
wpage.open(url, function (status) { 
   if (status !== 'success') { 
      console.log('Page is not opening'); 
      phantom.exit(); 
   } else { 
      wpage.render(output); 
      phantom.exit();     
   } 
});

上述程序生成以下输出。

The above will convert the page into pdf and will be saved in test.pdf

将 Canvas 转换为图像

Phantomjs 可以轻松将 Canvas 转换为图像。查看以下示例以了解其工作原理。

var page = require('webpage').create(); 
page.content = '<html><body><canvas id="surface" width="400" height="400"></canvas></body></html>'; 

page.evaluate(function() {
   var context,e1; 
   el = document.getElementById('surface'); 
   
   context = el.getContext('2d'); 
   context.font = "30px Comic Sans MS"; 
   context.fillStyle = "red"; 
   context.textAlign = "center"; 
   context.fillText("Welcome to PhantomJS ", 200, 200); 
   
   document.body.style.backgroundColor = 'white'; 
   document.body.style.margin = '0px'; 
}); 
page.render('canvas.png'); 
phantom.exit(); 

上述程序生成以下输出。

h1>PhantomJS - 页面自动化

PhantomJS 在其网页模块 API 的帮助下，可以操作网页并执行诸如 DOM 操作、单击按钮等操作。

从页面获取图像

以下程序展示了如何使用 PhantomJS 从页面获取图像。

var wpage = require('webpage').create();
wpage.onConsoleMessage = function(str) {
   console.log(str.length);
}
wpage.open("http://phantomjs.org", function(status) {
   console.log(status);
   var element = wpage.evaluate(function() {
      var imgdata =  document.querySelectorAll('img');
      var imgsrc = [];
      
      if (imgdata) {
         for (var i in imgdata) {
            imgsrc.push(imgdata[0].src);
         }
      }
      return imgsrc;
   });
   console.log(JSON.stringify(element));
});

上述程序生成以下输出。

Success 
["http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org/img/phantom 
js-logo.png","http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org 
/img/phantomjs-logo.png"]

可以使用 injectJS 网页方法 在页面中包含外部 JavaScript。有许多属性和方法，可以帮助页面自动化并执行许多其他操作。您可以参考网页模块，其中详细解释了属性和方法。

PhantomJS - 网络监控

借助 PhantomJS，我们可以监控网络并验证特定网页的行为和性能。PhantomJS 中有回调，即 onResourceRequested 和 onResourceReceived，它们有助于监控给定页面的流量。

示例

以下示例展示了如何使用 PhantomJS 监控给定页面的流量。

function createHAR(address, title, startTime, resources) {  
   
   // 此函数格式化来自 onresourcerequest 和 onresourcereceived 的数据
   var entries = []; 
   
   resources.forEach(function (resource) { 
      var request = resource.request, startReply = resource.startReply, 
         endReply = resource.endReply;  
      
      if (!request || !startReply || !endReply) { 
         return; 
      }  
      
      // 从 HAR 文件中排除数据 URI，因为
      // 它们未包含在规范中
      if (request.url.match(/(^data:image\/.*)/i)) { 
         return; 
      }  
      entries.push ({ 
         startedDateTime: request.time.toISOString(), 
         time: endReply.time - request.time, 
         
         request: { 
            method: request.method, 
            url: request.url, 
            httpVersion: "HTTP/1.1", 
            cookies: [], headers: request.headers, 
            queryString: [], 
            headersSize: -1, 
            bodySize: -1 
         }, 
         response: { 
            status: endReply.status, 
            statusText: endReply.statusText, 
            httpVersion: "HTTP/1.1", 
            cookies: [], 
            headers: endReply.headers, 
            redirectURL: "", 
            headersSize: -1, 
            bodySize: startReply.bodySize, 
            
            content: { 
               size: startReply.bodySize, 
               mimeType: endReply.contentType 
            } 
         }, 
         cache: {}, 
         timings: { 
            blocked: 0, 
            dns: -1, 
            connect: -1, 
            send: 0, 
            wait: startReply.time - request.time, 
            receive: endReply.time - startReply.time, 
            ssl: -1 
         }, 
         pageref: address 
      }); 
   });  
   return { 
      log: { 
         version: '1.2', creator: { 
            name: "PhantomJS", 
            version: phantom.version.major + '.' + phantom.version.minor + 
               '.' + phantom.version.patch 
         }, 
         pages: [{ 
            startedDateTime: startTime.toISOString(), 
            id: address, 
            title: title, 
            
            pageTimings: { 
               onLoad: page.endTime - page.startTime 
            } 
         }], 
         entries: entries 
      } 
   }; 
}  
var page = require('webpage').create(), system = require('system'); 
var fs = require('fs');   

if (system.args.length === 1) { 
   console.log('Usage: netsniff.js <some URL>'); 
   phantom.exit(1); 
} else { 
   page.address = system.args[1]; 
   page.resources = []; 
   
   page.onLoadStarted = function () {  // 页面加载时调用
      page.startTime = new Date(); 
   };  
   page.onResourceRequested = function (req) {  
      // 当从给定的页面 URL 请求任何文件时调用
      page.resources[req.id] = { 
         request: req, 
         startReply: null, 
         endReply: null 
      }; 
   };  
   page.onResourceReceived = function (res) {  
      //当收到任何文件时调用。
      if (res.stage === 'start') { 
         page.resources[res.id].startReply = res; 
      } 
      if (res.stage === 'end') { 
         page.resources[res.id].endReply = res; 
      } 
   };  
   page.open(page.address, function (status) {  // 打开给定的页面网址
      var har; 
      
      if (status !== 'success') { 
         console.log('FAIL to load the address'); 
         phantom.exit(1); 
      } else { 
         page.endTime = new Date(); 
         
         page.title = page.evaluate(function () { // 获取页面标题
            return document.title; 
         });             
         har = createHAR(page.address, page.title, page.startTime, page.resources);  
         
        // 使用页面 URL、开始时间和页面资源调用 createHAR 函数。
        // console.log(JSON.stringify(har, undefined, 4));
        fs.write('log.txt', JSON.stringify(har, undefined, 4), 'w');
        
        // 日志收集在 log.txt 文件中。
        phantom.exit();
      } 
   }); 
}

提供给 HAR 预览的 log.txt 示例

{ 
   "log": { 
      "version": "1.2", 
      "creator": { 
         "name": "PhantomJS", 
         "version": "2.1.1" 
      }, 
      "pages": [ 
         { 
            "startedDateTime": "2017-05-21T13:41:21.824Z", 
            "id": "http://www.sample.com", 
            "title": "Free Sample Products – Sample.com ≫ Free Samples, 
               Free Product Samples, Product Test Marketing", 
            "pageTimings": { 
               "onLoad": 11081 
            } 
         } 
      ], 
      "entries": [ 
         { 
            "startedDateTime": "2017-05-21T13:41:21.815Z", 
            "time": 1999, 
            
            "request": { 
               "method": "GET", 
               "url": "http://www.sample.com/", 
               "httpVersion": "HTTP/1.1", 
               "cookies": [], 
               
               "headers": [ 
                  { 
                     "name": "Accept", 
                     "value": "text/html,application/xhtml+xml,
                        application/xml;q = 0.9,*/*;q = 0.8" 
                  }, 
                  
                  { 
                     "name": "User-Agent", 
                     "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 
                        (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"  
                  } 
               ], 
               
               "queryString": [], 
               "headersSize": -1, 
               "bodySize": -1 
            }, 
            "response": { 
               "status": 301, 
               "statusText": "Moved Permanently", 
               "httpVersion": "HTTP/1.1", 
               "cookies": [], 
               
               "headers": [ 
                  { 
                     "name": "Date", 
                     "value": "Sun, 21 May 2017 13:41:25 GMT" 
                  }, 
                  
                  { 
                     "name": "Server", 
                     "value": "Apache/2.2.14 (Ubuntu)" 
                  }, 
                  
                  { 
                     "name": "Location", 
                     "value": "http://sample.com//" 
                  }, 
                  
                  { 
                     "name": "Vary", 
                     "value": "Accept-Encoding" 
                  }, 
                  
                  { 
                     "name": "Content-Encoding", 
                     "value": "gzip" 
                  }, 
                  
                  { 
                     "name": "Keep-Alive", 
                     "value": "timeout = 15, max = 100" 
                  },
                  
                  { 
                     "name": "Connection", 
                     "value": "Keep-Alive" 
                  }, 
                  
                  { 
                     "name": "Content-Type", 
                     "value": "text/html; charset = iso-8859-1" 
                  } 
               ],  
               "redirectURL": "", 
               "headersSize": -1, 
               "bodySize": 307, 
               
               "content": { 
                  "size": 307, 
                  "mimeType": "text/html; charset = iso-8859-1" 
               } 
            }, 
            
            "cache": {}, 
            "timings": { 
               "blocked": 0, 
               "dns": -1, 
               "connect": -1, 
               "send": 0, 
               "wait": 1999, 
               "receive": 0, 
               "ssl": -1 
            }, 
            "pageref": "http://www.sample.com" 
         }, 
      ]   
      { 
         "startedDateTime": "2017-05-21T13:41:24.898Z", 
         "time": 885, 
         
         "request": { 
            "method": "GET", 
            "url": "http://sample.com/", 
            "httpVersion": "HTTP/1.1", 
            "cookies": [], 
            
            "headers": [ 
               { 
                  "name": "Accept", 
                  "value": "text/html,application/xhtml+xml,
                     application/xml;q = 0.9,*/*;q = 0.8" 
               }, 
               
               { 
                  "name": "User-Agent", 
                  "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 
                     (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1" 
               } 
            ], 
            "queryString": [], 
            "headersSize": -1, 
            "bodySize": -1 
         }, 
         "response": { 
            "status": 200, 
            "statusText": "OK", 
            "httpVersion": "HTTP/1.1", 
            "cookies": [], 
            
            "headers": [ 
               { 
                  "name": "Date", 
                  "value": "Sun, 21 May 2017 13:41:27 GMT" 
               }, 
               
               { 
                  "name": "Server", 
                  "value": "Apache/2.2.14 (Ubuntu)" 
               }, 
               
               { 
                  "name": "X-Powered-By", 
                  "value": "PHP/5.3.2-1ubuntu4.29" 
               }, 
               
               {
                  "name": "X-Pingback", 
                  "value": "http://sample.com/xmlrpc.php" 
               }, 
               
               { 
                  "name": "Link", 
                  "value": "<http://sample.com/wp-json/>; 
                     rel = \"https://api.w.org/\", <http://wp.me/P6Jj5H-4>; 
                     rel = shortlink" 
               }, 
               
               { 
                  "name": "Vary", 
                  "value": "Accept-Encoding"  
               }, 
               
               { 
                  "name": "Content-Encoding",
                  "value": "gzip" 
               },

               { 
                  "name": "Keep-Alive",
                  "value": "timeout = 15, max = 99"
               },

               {
                  "name": "Connection",
                  "value": "Keep-Alive"
               },

               { 
                  "name": "Content-Type",
                  "value": "text/html; charset = UTF-8"
               }
            ],

            "redirectURL": "",
            "headersSize": -1,
            "bodySize": 1969,

            "content": {
               "size": 1969,
               "mimeType": "text/html; charset = UTF-8"
            }
         },

         "cache": {},
         "timings": {
            "blocked": 0,
            "dns": -1,
            "connect": -1,
            "send": 0,
            "wait": 869,
            "receive": 16,
            "ssl": -1
         },

         "pageref": http://www.sample.com
      },

      {
         "startedDateTime": "2017-05-21T13:41:25.767Z",
         "time": 388,

         "request": {
            "method": "GET",
            "url": "http://sample.com/wpcontent/themes/samplecom/style.css",
            "httpVersion": "HTTP/1.1",
            "cookies": [],

            "headers": [
               {
                  "name": "Accept",
                  "value": "text/css,*/*;q = 0.1"
               },

               {
                  "name": "Referer",
                  "value": "http://sample.com/"
               },

               {
                  "name": "User-Agent",
                  "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 
                     (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"
               }
            ],

            "queryString": [],
            "headersSize": -1,
            "bodySize": -1
         },

         "response": {
            "status": 200,
            "statusText": "OK",
            "httpVersion": "HTTP/1.1",
            "cookies": [],

            "headers": [
               {
                  "name": "Date",
                  "value": "Sun, 21 May 2017 13:41:27 GMT"
               },

               {
                  "name": "Server",
                  "value": "Apache/2.2.14 (Ubuntu)"
               },

               {
                  "name": "Last-Modified",
                  "value": "Fri, 22 Apr 2011 00:32:22 GMT"
               },

               {
                  "name": "ETag",
                  "value": "\"e1d7-1836-4a176fdbbd180\""
               },

               {
                  "name": "Accept-Ranges",
                  "value": "bytes"
               },

               {
                  "name": "Vary",
                  "value": "Accept-Encoding"
               },

               {
                  "name": "Content-Encoding",
                  "value": "gzip"
               },

               {
                  "name": "Keep-Alive",
                  "value": "timeout = 15, max = 98"
               },

               {
                  "name": "Connection",
                  "value": "Keep-Alive"
               },

               {
                  "name": "Content-Type",
                  "value": "text/css"
               }
            ],

            "redirectURL": "",
            "headersSize": -1,
            "bodySize": 3174,
            
            "content": {
               "size": 3174,
               "mimeType": "text/css"
            }
         },

         "cache": {},
         "timings": {
            "blocked": 0,
            "dns": -1,
            "connect": -1,
            "send": 0,
            "wait": 388,
            "receive": 0,
            "ssl": -1
         },
         
         "pageref": "http://www.sample.com"
      }
   }
}

Output

上述程序生成以下输出。

所有日志都收集在 .txt 文件 中，之后使用 HAR 预览将其转换为上述格式，例如 (http://www.softwareishard.com/har/viewer/)

PhantomJS - 测试

PhantomJS 为网页提供了大量 API，可提供所有详细信息。PhantomJS 可用于测试，如获取页面内容、进行屏幕共享、将页面转换为 pdf 等。市场上有许多流行的测试库，可与 PhantomJS 一起使用并用于测试。

一些可与 PhantomJS 配合使用的流行框架如下 −

• Mocha
• Jasmine
• Qunit
• Hiro
• Laika
• Buster.JS
• WebDriver

示例 - PhantomJS 与 Qunit

(function () {     
   var url, timeout,args = require('system').args, page = require('webpage').create(); 
   url = args[1]; 
   timeout = parseInt(10, 10); 
   
   page.onConsoleMessage = function (msg) {  
      //打印所有控制台消息
      console.log(msg); 
   }; 
   page.onInitialized = function () {  // 在页面初始化时调用
      page.evaluate(callqunit); 
   }; 
   page.onCallback = function (message) { // called from  
      var result, failed; 
      
      if (message) {  
         if (message.name === 'QUnit.done') { 
            result = message.data; 
            failed = !result || !result.total || result.failed;  
            
            if (!result.total) { 
               console.error('No tests were executed'); 
            } 
            pageexit(failed ? 1 : 0); 
         } 
      } 
   };  
   page.open(url, function (status) { // opening page  
      if (status !== 'success') { 
         console.error('Unable to access network: ' + status); 
         pageexit(1); 

      } else { 
         var checkqunit = page.evaluate(function () { 
            //评估页面并检查是否为 qunit 对象
               is present on the given page url 
            return (typeof QUnit === 'undefined' || !QUnit); 
         }); 
         
         if (checkqunit) { 
            console.error('Qunit scripts are not present on the page'); 
            pageexit(1); 
         }             
         
         //使用 10 秒的超时时间，否则将打印来自控制台的消息。
         setTimeout(function () { 
            console.error('The specified timeout of ' + timeout + ' seconds has expired. 
               Aborting...'); 
            pageexit(1); 
         }, timeout * 1000);           
      } 
   });  
   function callqunit() {

qunit.html

<!DOCTYPE html> 
<html> 

   <head> 
      <meta charset = "utf-8"> 
      <meta name = "viewport" content = "width = device-width"> 
      <title>QUnit Example</title> 
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-2.3.2.css"> 
   </head> 

   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div> 
      <script src = "https://code.jquery.com/qunit/qunit-2.3.2.js"></script> 
   </body> 
   
</html> 

输出

命令 − phantomjs qunit.js http://localhost/tasks/qunit.html

上述程序生成以下输出。

{"passed":3,"failed":2,"total":5,"runtime":23}
Time taken is 23ms to run 5 tests.
3 passed, 2 failed.

PhantomJS - REPL

REPL 代表 Read Eval Print Loop。在 PhantomJS 中，REPL 是一种测试 JavaScript 代码的交互模式。您可以执行与在 Google Chrome Inspector 或 Firebug 中相同的操作，以直接在控制台上执行某些代码。REPL 返回相同的平台来执行脚本。

输入的命令将发送到解释器进行立即解释(EVAL)并提供反馈(PRINT)。在命令行中输入 PhantomJS，它将带您进入交互模式，您可以在其中直接执行代码。

语法

其语法如下 −

Phantomjs

示例

以下示例演示了 REPL 在 PhantomJS 中的工作方式。

phantomjs> console.log("Welcome to phantomjs");
Welcome to phantomjs
Undefined

phantomjs> window.navigator {
   "appCodeName": "Mozilla",
   "appName": "Netscape",
   "appVersion": "5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko)
      PhantomJS/2.1.1 Safari/538.1",
   "cookieEnabled": true,
   "language": "en-IN",

   "mimeTypes": {
      "length": 0
   },
   "onLine": false,
   "platform": "Win32",

   "plugins": {
      "length": 0
   },
   "product": "Gecko
   "productSub": "20030107",
   "userAgent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko)
      PhantomJS/2.1.1 Safari/538.1",
   "vendor": "Apple Computer, Inc.",
   "vendorSub": ""
}

phantomjs>
To find the version
phantomjs> phantom.version {
   "major": 2,
   "minor": 1,
   "patch": 1
}
phantomjs>

执行每个命令并显示结果。使用 CTRL+C、CTRL+D 或 phantom.exit() 退出交互模式。

使用 向上/向下 箭头键收听先前输入的命令。

还有另一个称为 自动完成 的功能，它有助于记住命令。只需输入"phantom"并点击"Tab"按钮即可获得可执行的可用命令列表。

输出

上述程序生成以下输出。

phantomjs> phantom.→| 
phantomjs> phantom.cookies→| 
phantomjs> phantom.exit→| 
phantomjs> phantom.version→|

PhantomJS - 示例

在本章中，我们将提供一些更实际的示例来帮助您了解 PhantomJS 的一些重要功能。

示例 1 - 查找页面速度

在此示例中，我们将使用 PhantomJS 查找任何给定页面 URL 的页面速度。

var page = require('webpage').create(), 
   system = require('system'), 
   t, address;  

if (system.args.length === 1) { 
   console.log('Usage: loadspeed.js <some URL>'); 
   phantom.exit(1); 
} else { 
   t = Date.now(); 
   address = system.args[1]; 
   
   page.open(address, function (status) { 
      if (status !== 'success') { 
         console.log('FAIL to load the address'); 
      } else { 
         t = Date.now() - t; 
         
         console.log('Page title is ' + page.evaluate(function () { 
            return document.title; 
         })); 
         console.log('Loading time ' + t + ' msec'); 
      } 
      phantom.exit(); 
   }); 
}

上述程序生成以下输出。

命令 − phantomjs pagespeed.js http://www.google.com

Page title is Google 
Loading time 1396 msec 

示例 2 - 向页面发送点击事件

在下面的示例中，我们将使用 PhantomJS 向页面发送 点击事件。

var page = require('webpage').create(); 
page.onConsoleMessage = function(str) { 
   console.log(str); 
} 
page.open('http://phantomjs.org/api/phantom/', function(status) { 
   page.render('beforeclick.png'); 
   console.log(page.url); 
   
   var element = page.evaluate(function() {   
      return document.querySelector('img[src = "http://phantomjs.org/img/phantomjslogo.png"]'); 
   }); 
   page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left'); 
   
   window.setTimeout(function () { 
      console.log(page.url); 
      page.render('afterclick.png'); 
      phantom.exit(); 
   }, 5000); 
   console.log('element is ' + element); 
}); 

上述程序生成以下输出。

http://phantomjs.org/api/phantom/ 
element is [object Object] 
http://phantomjs.org/

我们的程序将在 bin 文件夹中创建以下两个 png 图像。这两幅图像显示了上述程序执行前后的差异。

示例 3 - 提交表单

以下示例显示如何使用 PhantomJS 提交表单。

var wpage = require('webpage').create();  
wpage.open("http://localhost/tasks/submitform.html", function(status) { 
   console.log(status); 
   wpage.uploadFile('input[name = fileToUpload]', 'output.png'); 
   wpage.render("sform.png");  
   
   var element = wpage.evaluate(function() {   
      return document.querySelector('input[type = "submit"]');   
      // 使用 queryselector 获取提交按钮的详细信息。
   }); 
   wpage.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');  
   
   // sendevent 用于发送点击事件，并给出左侧和顶部
      position of the submit button. 
   
   window.setTimeout(function () { 
      console.log(wpage.url); 
      wpage.render("submit.png");  // 截图保存在submit.png中
      phantom.exit(); 
   }, 5000);  
   console.log('element is ' + element);  
});

submitform.html

以下代码显示如何使用 submitform.html 文件。

<html> 
   <head>
      <title>Window 2</title>
   </head> 

   <body>
      <form action = "submitform.php" method = "post" enctype = "multipart/form-data" 
         id = "form1">  
         <input type = "file" name = "fileToUpload" id = "fileToUpload"> 
         <input type = "submit" value = "Upload Image" name = "submit"> 
      </form> 
   </body>  
   
</html>

表单提交后，将转到 submitform.php。

submitform.php

submitform.php 仅打印文件的详细信息。

<?php 
   print_r($_FILES); 
?> 

上述程序生成以下输出。

Success 
element is [object Object] 
http://localhost/tasks/submitform.php 

图片

以下是文件上传和表单提交的图片。

---