了解phantomjs

核心要点

• PhantomJS是一个无头WebKit浏览器，具有JavaScript API，原生支持各种Web标准，包括DOM处理、CSS选择器、JSON、Canvas和SVG。它本质上是一个没有GUI的网页浏览器，能够使用JavaScript自动化各种流程。
• PhantomJS是开发人员的强大工具，提供页面自动化、屏幕截图、测试和网络监控等功能。它允许与网页交互而无需打开浏览器，可以捕获网页截图，无需GUI即可运行测试，并可以监控网络行为和性能。
• 尽管PhantomJS比较复杂，但它并不仅仅适用于专家级开发者。它可以用于持续集成系统，可以与Karma等测试框架集成，并且可以编程以收集有关网页性能的数据。它尤其适用于在问题出现时立即检测代码问题，并确保不会将错误代码推送到项目中。

自发布以来，PhantomJS已成为许多JavaScript工程师工作流程中的重要组成部分。在题为“无头WebKit和PhantomJS”的文章中，Colin Ihrig介绍了“无头WebKit”的概念，并对PhantomJS进行了简要介绍。在GitHub上拥有超过11,000颗星，PhantomJS已成为开发人员的首选工具，尤其是在测试代码时。但是，由于缺乏对其真正用途的了解，许多开发人员仍然不得不避免在其项目中实现此工具。为了弥补这一差距，本文将解释PhantomJS的核心概念，并尝试消除经常让开发人员感到困惑的一些复杂性。阅读本文后，您将深入了解PhantomJS是什么，以及为什么它被认为是一个如此强大的工具。“什么是无头浏览器？”

在PhantomJS的网站上，该技术解释如下：> PhantomJS是一个无头WebKit浏览器，具有JavaScript API。它对各种Web标准具有快速且原生的支持：DOM处理、CSS选择器、JSON、Canvas和SVG。

显然，那些刚接触PhantomJS的人可能会发现一些术语难以理解。此描述可能会让有抱负的开发人员不知所措，并使那些不熟悉这些技术的人认为它只适用于非常专业的开发人员。但是，我可以向您保证，这些概念很容易理解。PhantomJS是一个只存在于脚本中的网页浏览器。它没有GUI，而是一个无头浏览器，可以使用JavaScript自动化不同的流程。让我们来看看这个工具开箱即用的好处。在解释主题之前，如果您尚未安装PhantomJS，建议您在计算机上安装它。可以通过运行以下命令在CLI中通过npm安装它：``` npm install phantomjs -g

<code>
安装完成后，您就可以访问phantomjs命令。PhantomJS核心概念
-----------------------

让我们深入了解其核心概念。### 页面自动化

PhantomJS允许开发人员访问浏览器的DOM API。毕竟，即使PhantomJS没有GUI，它仍然是一个浏览器。开发人员可以编写将在指定页面上评估的JavaScript代码。虽然这似乎并不重要，但这允许我们自动化与网页的任何类型的交互，而无需打开浏览器（这将节省您大量时间）。这在使用PhantomJS运行测试时尤其有用，我们很快就会看到更多相关内容。现在，让我们看一下项目网站中的以下示例。它显示了如何使用evaluate()函数从页面返回不同的对象。在本例中，evaluate()用于返回ID为myagent的元素的textContext属性。要启动此示例，我们只需在命令行中运行名为phantomjs userAgent.js的文件，我们将在控制台中收到结果。```
//userAgent.js
var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function(status) {
  if (status !== 'success') {
    console.log('Unable to access network');
  } else {
    var ua = page.evaluate(function() {
      return document.getElementById('myagent').textContent;
    });
    console.log(ua);
  }
  phantom.exit();
});</code>

屏幕截图

通过利用WebKit，PhantomJS能够渲染网页上的任何内容并将其保存为图像。因此，它可以用于自动化捕获网页截图的过程，开发人员可以分析这些截图以确保一切看起来都很好。这些图像可以保存为多种格式，例如PNG、JPEG、PDF和GIF。以下代码取自PhantomJS关于屏幕截图的文档。通过在命令行中运行phantomjs github.js，以下代码将渲染GitHub主页的PNG图像。``` //github.js var page = require('webpage').create(); page.open('https://www.php.cn/link/b93df0dce7fb0fcf484c0eceda9b816c', function() { page.render('github.png'); phantom.exit(); });

<code>
PhantomJS还允许开发人员调整这些截图的大小，并指定我们想要捕获的确切区域。下面，我们可以看到一个示例，它只是上面显示的github.js脚本的修改版本。```
var page = require('webpage').create();
//viewportSize是无头浏览器的实际大小
page.viewportSize = { width: 1024, height: 768 };
//clipRect是您正在截图的页面部分
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//其余代码与之前的示例相同
page.open('http://example.com/', function() {
  page.render('github.png');
  phantom.exit();
});</code>

测试

PhantomJS帮助开发人员自动化运行测试的过程，无需任何GUI。PhantomJS使用其无头浏览器来处理不同的单元测试，并使用命令行来告诉开发人员他们在哪里遇到错误。毫无疑问，PhantomJS主要以其在测试中的用途而闻名；但是，值得注意的是，它不是测试框架。在开发中，PhantomJS用于启动不同的测试框架，例如Karma。通过访问关于无头测试的文档页面，您可以看到哪些框架已构建为支持PhantomJS，以及可以通过外部测试运行程序（例如PhantomJS Runner QUnit插件）访问的框架列表。PhantomJS还用于持续集成系统。对于那些不熟悉持续集成过程的人来说，它处理监控应用程序的方式。开发人员可以将PhantomJS与CI系统（例如Travis CI）集成，以便在实际推送代码之前对添加到项目中的任何新代码运行测试。结果，开发人员能够在问题出现时立即检测到代码问题并修复它们，从而确保不会将错误代码推送到项目中。网络监控

PhantomJS的另一个核心功能是其监控网络连接的能力。如文档中所定义：> 因为PhantomJS允许检查网络流量，所以它适合构建对网络行为和性能的各种分析。

这意味着PhantomJS可以编程为收集有关网页性能的不同数据。当与PhantomJS配对时，YSlow可以使用不同的格式（例如TAP）输出这些测试的结果。实施后，TAP允许单元测试和测试工具（在本例中为PhantomJS）之间进行通信。此外，PhantomJS和YSlow在持续集成系统中使用TAP协议，并监控添加到项目中的新代码的性能。通过这种方式，可以在推送代码之前通知开发人员性能的任何回归。结论

希望到目前为止，您已经对PhantomJS是什么、它是如何工作的以及它有多强大有了清晰的了解。如果您不熟悉PhantomJS和一般的测试，并且想了解有关这些主题的更多信息，这里列出了一些您可能会发现非常有用的资源：- PhantomJS和CasperJS简介

• 使用PhantomJS进行自动化
• 使用PhantomJS和CasperJS进行Web抓取和自动化
• 使用jQuery、PhantomJS和Node进行自动化

我希望您喜欢这篇文章。如果您有任何问题或疑问，请随时在下面的部分发表评论。关于PhantomJS的常见问题解答 (FAQ)

PhantomJS的主要用途是什么？

PhantomJS是一个可脚本化的无头浏览器，用于自动化网页交互。它提供了一个JavaScript API，可以实现自动导航、屏幕截图、用户行为和断言，使其成为网站测试的合适工具。它还允许在服务器端操作和渲染网页，这对于网页抓取、页面渲染和理解网页语义非常有用。

PhantomJS与其他无头浏览器有何不同？

与其他无头浏览器不同，PhantomJS允许原生支持各种Web标准，例如DOM处理、CSS选择器、JSON、Canvas和SVG。它还支持网页捕获，这对于生成网站屏幕截图或PDF非常有用。PhantomJS还以其对各种Web标准的快速和原生支持而闻名。

PhantomJS是否适合网页抓取？

是的，PhantomJS是进行网页抓取的绝佳工具。它可以像人类用户一样渲染和理解网页，但具有能够自动化该过程的优势。这使其成为从网站（尤其是那些严重依赖JavaScript的网站）提取信息的强大工具。

PhantomJS可以用于测试移动网站吗？

是的，PhantomJS是一个多功能工具，可用于测试移动网站。它允许开发人员模拟各种屏幕尺寸和分辨率，从而可以测试网站在不同设备上的外观和功能。

PhantomJS如何处理JavaScript？

PhantomJS具有出色的JavaScript处理能力。它可以执行复杂的JavaScript函数，甚至可以渲染严重依赖JavaScript的网页。这使其成为测试动态网页的强大工具。

PhantomJS可以捕获网页截图吗？

是的，PhantomJS的关键功能之一是能够捕获网页的屏幕截图。这对于测试网站的视觉方面（例如布局、设计和响应行为）尤其有用。

PhantomJS是否适合持续集成系统？

是的，PhantomJS旨在用于持续集成系统。其无头特性使其非常适合在后台运行测试，而不会中断其他进程。

PhantomJS如何支持Web标准？

PhantomJS原生支持各种Web标准，包括DOM处理、CSS选择器、JSON、Canvas和SVG。这意味着它可以像人类用户一样准确地渲染和与网页交互。

PhantomJS可以渲染PDF吗？

是的，PhantomJS能够渲染PDF。这对于生成网页的可打印版本或创建文档非常有用。

PhantomJS是开源的吗？

是的，PhantomJS是一个开源项目。这意味着其源代码可供任何人自由查看、修改和分发。这也意味着它受益于庞大的开发人员社区的贡献，他们共同努力改进软件并添加新功能。

以上是了解phantomjs的详细内容。更多信息请关注PHP中文网其他相关文章！