无头Webkit和Phantomjs

核心要点

• PhantomJS，一个基于WebKit的无头浏览器，允许更快地以编程方式自动化和测试网页，无需图形用户界面。
• PhantomJS 提供强大的功能，例如通过 JavaScript 与页面交互的能力，从而可以轻松地自动化诸如单击按钮、提交表单，甚至使用标准 DOM API 或 jQuery 等库加载和操作网页的任务。
• PhantomJS 提供广泛的文件系统 API，使应用程序能够将源代码存储到文件系统、拍摄网页屏幕截图，甚至将外部脚本文件包含到页面中。
• 尽管 PhantomJS 功能强大，但它与 Node.js 的集成度并不高，现有项目通常使用子进程模块来生成 PhantomJS 实例，并通过 WebSockets 与 Node.js 通信。

如果您正在阅读本文，您很可能知道什么是浏览器。现在去掉 GUI，您就得到了所谓的 无头浏览器。无头浏览器可以执行与普通浏览器相同的所有操作，但速度更快。它们非常适合以编程方式自动化和测试网页。目前存在许多无头浏览器，而 PhantomJS 是其中最好的。PhantomJS 基于 Chrome 和 Safari 背后的引擎 WebKit 构建，它为您提供了强大的浏览器功能，而无需笨重的 GUI。开始使用 PhantomJS 很容易——只需下载可执行文件即可。接下来，创建一个名为 hello.js 的文件并添加以下几行代码：

console.log("Hello World!");
phantom.exit();

要执行脚本，请运行以下命令。请注意，phantomjs 可执行文件必须位于当前目录中，或者位于环境的 PATH 中的某个位置。如果一切配置正确，PhantomJS 将把“Hello World！”打印到控制台，然后在调用 phantom.exit() 时终止。

phantomjs hello.js

使用网页

PhantomJS 运行后，您可以开始自动化 Web。以下示例加载 Google 首页，然后将屏幕截图保存到文件中。第 1 行创建网页的新实例。第 4 行加载 google.com。页面加载完成后，将执行 onLoadFinished() 回调函数。回调函数接收单个参数 status，该参数指示页面是否成功加载。加载页面的 URL 在 page.url 中可用。当页面包含重定向时，此属性特别有用，并且您希望确切知道您到达的位置。第 8 行使用页面的 render() 方法拍摄屏幕截图。render() 可以创建 PNG、GIF、JPEG 和 PDF 文件。

console.log("Hello World!");
phantom.exit();

页面设置

可以根据应用程序的需求自定义页面对象的许多设置。例如，如果您只对下载源代码感兴趣，则可以通过忽略图像文件并关闭 JavaScript 来加快应用程序的速度。下面的重写示例反映了这些更改。更改的设置显示在第 3 行和第 4 行。请注意，任何设置更改都必须在调用 open() 之前进行。如果您查看此示例的屏幕截图，您会注意到 Google 徽标图像丢失了，但页面的其余部分保持不变。

phantomjs hello.js

访问文件系统

到目前为止，我们的示例已加载页面并将屏幕截图保存为图像文件。虽然这无疑很酷，但许多应用程序更愿意将源代码存储到文件系统中。PhantomJS 通过提供广泛的文件系统 API 来实现这一点。以下示例使用 FileSystem 模块将 google.com 源代码写入文件。首先，在第 2 行导入 FileSystem 模块。在第 6 行，打开输出文件以进行写入。在第 7 行，使用 write() 方法将数据写入文件。实际源代码可通过页面的 content 属性获得。最后，关闭文件并终止 PhantomJS。

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

执行 JavaScript

PhantomJS 最强大的功能之一是能够通过 JavaScript 与页面交互。这使得自动化诸如单击按钮和提交表单之类的任务变得极其容易。我们的下一个示例通过加载 Google 首页、输入查询然后提交搜索表单来执行 Web 搜索。示例的开头应该看起来很熟悉。新的内容从第 8 行开始，我们确定已加载哪个页面。如果这是首页，则调用页面的 evaluate() 方法。evaluate() 在页面的上下文中执行您提供的代码。这实际上为您提供了与页面原始开发人员相同的权限。这有多酷？

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

在 evaluate() 内部，我们找到搜索框和表单。我们将搜索框的值设置为“JSPro”，然后提交表单。这将导致页面的 onLoadFinished() 方法再次被触发。但是，这次会拍摄搜索结果的屏幕截图，然后 PhantomJS 退出。PhantomJS 还提供两种方法 includeJs() 和 injectJs()，它们允许您将外部脚本文件添加到页面中。includeJs() 用于包含页面可访问的任何脚本文件。例如，您可以使用以下代码在之前的示例中包含 jQuery。请注意第 9 行对 includeJs() 的调用，以及 evaluate() 内部的 jQuery 语法。

var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};

injectJs() 方法类似于 includeJs()。不同之处在于，注入的脚本文件不需要从页面对象访问。例如，这允许您从本地文件系统注入脚本。

PhantomJS 和 Node.js

遗憾的是，PhantomJS 与 Node.js 的集成度并不高。已经创建了一些项目试图从 Node.js 控制 PhantomJS，但它们都有些笨拙。现有项目使用子进程模块来生成 PhantomJS 实例。接下来，PhantomJS 加载一个特殊的网页，该网页使用 WebSockets 与 Node.js 通信。它可能并不理想，但它有效。两个更流行的 PhantomJS Node 模块是 node-phantom 和 phantomjs-node。我最近开始开发我自己的 PhantomJS Node 模块，名为 ghostbuster。Ghostbuster 类似于 node-phantom，但试图通过提供更强大的命令来减少回调嵌套。对 PhantomJS 的调用越少，浪费在 WebSockets 上通信的时间就越少。另一种选择是 zombie.js，这是一个基于 jsdom 构建的轻量级无头浏览器。Zombie 不像 PhantomJS 那样强大，但它是真正的 Node.js 模块。

结论

阅读本文后，您应该对 PhantomJS 有了基本的了解。PhantomJS 最好的功能之一是它易于使用。如果您已经熟悉 JavaScript，那么学习曲线很小。PhantomJS 还支持本文未介绍的各种其他功能。与往常一样，我鼓励您查看文档。还有一些示例展示了 PhantomJS 的全部功能！

关于无头 WebKit 和 PhantomJS 的常见问题

无头 WebKit 和 PhantomJS 的主要区别是什么？

无头 WebKit 和 PhantomJS 都是用于自动化 Web 浏览器的工具。但是，主要区别在于它们的功能。无头 WebKit 是一个没有图形用户界面的浏览器，可以以编程方式控制它进行自动化、测试和服务器端渲染。另一方面，PhantomJS 是一个可脚本化的无头浏览器，用于自动化网页交互，提供 JavaScript API，支持自动化导航、屏幕截图、用户行为和断言。

PhantomJS 是否仍在维护？

截至 2018 年 3 月，PhantomJS 已不再积极维护。其主要原因是出现了 Chrome 无头浏览器和 Firefox 无头浏览器等现代无头浏览器，它们提供了更多功能和更好的支持。

PhantomJS 的一些替代方案是什么？

由于 PhantomJS 已不再维护，因此出现了一些替代方案。这些包括 Puppeteer，一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium，以及 Selenium WebDriver，一个用于自动化 Web 应用程序测试的开源 API 集合。

PhantomJS 如何工作？

PhantomJS 通过提供一个 JavaScript API 来工作，该 API 支持自动化导航、屏幕截图、用户行为和断言。它是一个使用 JavaScript API 的可脚本化的无头 WebKit。它对各种 Web 标准具有快速且本机支持：DOM 处理、CSS 选择器、JSON、Canvas 和 SVG。

我可以使用 PhantomJS 进行 Web 抓取吗？

是的，PhantomJS 可用于 Web 抓取。它允许您使用标准 DOM API 或 jQuery 等常用库来加载和操作网页。

如何安装 PhantomJS？

PhantomJS 可以通过 npm（Node 包管理器）安装。您可以在终端或命令提示符中使用命令“npm install phantomjs”。

无头 WebKit 在服务器端渲染中的作用是什么？

无头 WebKit 在服务器端渲染中起着至关重要的作用，因为它允许服务器预渲染 JavaScript 渲染的页面，将其转换为 HTML，然后将其发送给客户端。这提高了 Web 应用程序的性能和 SEO。

我可以使用无头 WebKit 进行自动化测试吗？

是的，无头 WebKit 是进行自动化测试的绝佳工具。它允许您在真实的浏览器环境中运行测试，而无需可见的 UI。

如何安装无头 WebKit？

无头 WebKit 的安装过程取决于您使用的特定工具。例如，如果您使用的是 Puppeteer，则可以使用命令“npm install puppeteer”通过 npm 安装它。

与传统的自动化浏览器相比，使用无头 WebKit 的优势是什么？

无头 WebKit 在自动化方面比传统浏览器具有多个优势。它更快，因为它不需要花费时间渲染视觉效果。它还允许进行自动化、可脚本化的浏览，这对于测试和 Web 抓取非常有用。

以上是无头Webkit和Phantomjs的详细内容。更多信息请关注PHP中文网其他相关文章！