Phantomjsの理解

コアポイント

• Phantomjsは、JavaScript APIを備えたヘッドレスWebKitブラウザーであり、DOM処理、CSSセレクター、JSON、Canvas、SVGなど、さまざまなWeb標準をネイティブにサポートしています。これは、基本的にGUIのない​​Webブラウザであり、JavaScriptを使用してさまざまなプロセスを自動化できます。
• Phantomjsは、ページオートメーション、スクリーンショット、テスト、ネットワーク監視などの機能を提供する開発者にとって強力なツールです。ブラウザを開くことなくWebページとのやり取りを可能にし、Webページのスクリーンショットをキャプチャし、GUIなしでテストを実行し、ネットワークの動作とパフォーマンスを監視できます。
• Phantomjsはより複雑ですが、専門家の開発者に適しているだけではありません。継続的な統合システムで使用し、Karmaなどのテストフレームワークと統合でき、Webページのパフォーマンスに関するデータを収集するようにプログラムできます。問題が発生したときにすぐにコードの問題を検出し、エラーコードがプロジェクトにプッシュされないようにするのに特に適しています。

そのリリース以来、Phantomjsは多くのJavaScriptエンジニアのワークフローの重要な部分になりました。 「Headless WebKit and Phantomjs」というタイトルの記事で、Colin Ihrigは「Headless WebKit」の概念を紹介し、Phantomjsを簡単に紹介します。 Githubに11,000を超える星があるPhantomjsは、特にコードをテストする場合、開発者にとって選択ツールになりました。ただし、その真の使用についての理解が不足しているため、多くの開発者は依然としてプロジェクトにこのツールの実装を避けなければなりません。このギャップを埋めるために、この記事では、Phantomjsの核となる概念を説明し、開発者をしばしば混乱させる複雑さの一部を削除しようとします。この記事を読んだ後、Phantomjsとは何か、そしてそれがそのような強力なツールと見なされる理由を掘り下げます。 「ヘッドレスブラウザとは？」

PhantomjsのWebサイトでは、次のようにテクノロジーが説明されています。 DOM処理、CSSセレクター、JSON、Canvas、およびSVGのさまざまなWeb標準の高速でネイティブサポートがあります。

明らかに、Phantomjsに新しいものは、いくつかの用語を理解するのが難しいと感じるかもしれません。この説明は、意欲的な開発者を圧倒し、これらのテクノロジーに不慣れな人々に、非常にプロフェッショナルな開発者のみが機能すると考えています。ただし、これらの概念は理解しやすいことを保証できます。 Phantomjsは、スクリプトにのみ存在するWebブラウザーです。 GUIはありませんが、JavaScriptを使用してさまざまなプロセスを自動化できるヘッドレスブラウザーです。このツールの利点を箱から出してみましょう。トピックを説明する前に、PhantomJSをインストールしていない場合は、コンピューターにインストールすることをお勧めします。次のコマンドを実行することにより、CLIのNPM経由でインストールできます。 NPMインストール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はWebページに何かをレンダリングし、画像として保存することができます。したがって、開発者が分析できるWebページのスクリーンショットをキャプチャするプロセスを自動化して、すべてが良く見えることを確認できるようにするために使用できます。これらの画像は、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ランナーQunitプラグインなどの外部テストランナーを介してアクセスできるフレームワークのリストを確認できます。 Phantomjsは、継続的な統合システムにも使用されます。継続的な統合プロセスに精通していない人のために、監視アプリケーションを処理します。開発者は、PhantomjsをTravis CIなどのCIシステムと統合して、実際にコードをプッシュする前にプロジェクトに追加された新しいコードでテストを実行できます。その結果、開発者は問題が発生したときにすぐにコードの問題を検出して修正することができ、エラーコードがプロジェクトにプッシュされないようにします。ネットワーク監視 Phantomjsのもう1つのコア機能は、ネットワーク接続を監視できることです。ドキュメントで定義されているように：＆gt;

これは、Phantomjsをプログラムして、Webページのパフォーマンスに関するさまざまなデータを収集できることを意味します。 Phantomjsとペアになると、Yslowは、さまざまな形式（TAPなど）を使用してこれらのテストの結果を出力できます。実装後、TAPはユニットテストとテストツール（この場合はPhantomJS）間の通信を許可します。さらに、PhantomJSとYSLOWは、連続統合システムでTAPプロトコルを使用し、プロジェクトに追加された新しいコードのパフォーマンスを監視します。このようにして、コードをプッシュする前に、開発者にパフォーマンスの回帰を通知することができます。結論

うまくいけば、あなたはPhantomjsとは何か、それがどのように機能し、どれほど強力であるかを明確に理解しています。 Phantomjsや一般的なテストに精通しておらず、これらのトピックについて詳しく知りたい場合は、非常に便利なリソースをご紹介します。

• 自動化にPhantomjsを使用します
• phantomjsとcasperjsを使用したWebクロールと自動化
JQuery、Phantomjs、およびNode
• を使用した
自動化

この記事を楽しんだことを願っています。質問や質問がある場合は、以下のセクションでお気軽にコメントしてください。 Phantomjs（FAQ）

に関するよくある質問

Phantomjsの主な目的は何ですか？

Phantomjsは、Webインタラクションの自動化に使用されるスクリプト可能なヘッドレスブラウザです。自動ナビゲーション、スクリーンショット、ユーザーの動作、アサーションを有効にするJavaScript APIを提供し、Webサイトテストに適したツールになります。また、サーバー側でWebページを操作およびレンダリングすることもできます。これは、Webクロール、ページレンダリング、Webページセマンティクスの理解に非常に役立ちます。

Phantomjsは他のヘッドレスブラウザーとどう違うのですか？

他のヘッドレスブラウザーとは異なり、PhantomJはDOM処理、CSSセレクター、JSON、キャンバス、SVGなどのさまざまなWeb標準のネイティブサポートを許可します。また、Web Captureもサポートしています。これは、WebサイトのスクリーンショットやPDFを生成するのに非常に役立ちます。 Phantomjsは、さまざまなWeb標準に対する高速かつネイティブサポートでも知られています。

phantomjsはWebクロールに適していますか？

はい、PhantomjsはWebクロールのための優れたツールです。人間のユーザーのようなWebページをレンダリングして理解できますが、プロセスを自動化できるという利点があります。これにより、Webサイト、特にJavaScriptに大きく依存しているウェブサイトから情報を抽出するための強力なツールになります。

Phantomjsを使用してモバイルWebサイトをテストできますか？

はい、PhantomjsはモバイルWebサイトのテストに使用できる汎用性の高いツールです。開発者は、さまざまな画面サイズと解像度をシミュレートできるようになり、さまざまなデバイスでWebサイトの外観と機能をテストできます。

phantomjsはJavaScriptをどのように処理しますか？

Phantomjsには、優れたJavaScript処理機能があります。複雑なJavaScript関数を実行したり、JavaScriptに大きく依存しているWebページをレンダリングすることもできます。これにより、動的なWebページをテストするための強力なツールになります。

phantomjsはWebページのスクリーンショットをキャプチャできますか？

はい、Phantomjsの重要な機能の1つは、Webページのスクリーンショットをキャプチャできることです。これは、レイアウト、デザイン、レスポンシブな動作など、ウェブサイトの視覚的側面をテストするのに特に役立ちます。

PHANTOMJSは継続的な統合システムに適していますか？

はい、Phantomjsは継続的な統合システム用に設計されています。ヘッドレス機能により、他のプロセスを中断することなく、バックグラウンドでテストを実行するのに最適です。

PhantomjsはWeb標準をどのようにサポートしていますか？

Phantomjsは、DOM処理、CSSセレクター、JSON、キャンバス、SVGなど、さまざまなWeb標準をネイティブにサポートしています。これは、人間のユーザーと同じように正確にWebページをレンダリングおよび対話できることを意味します。

phantomjsはpdfをレンダリングできますか？

はい、PhantomjsはPDFをレンダリングできます。これは、Webページの印刷可能なバージョンを生成したり、ドキュメントを作成したりするのに役立ちます。

phantomjsはオープンソースですか？

はい、Phantomjsはオープンソースプロジェクトです。これは、ソースコードが自由に表示、変更、配布できることを意味します。これはまた、ソフトウェアを改善し、新しい機能を追加するために協力している開発者の膨大なコミュニティの貢献からも利益を得ることを意味します。

以上がPhantomjsの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。