クイックヒント：node.jsのヘッドレスクロムを開始します

ヘッドレスクロム：自動化されたWebテストとクロールのための強力なツール

コアポイント

• Chromeバージョン59（Windowsユーザー向けのバージョン60）から始めて、ヘッドレスChromeを使用すると、Webサイトとのユーザーインタラクションをプログラム的にシミュレートし、テストの結果をキャプチャできます。 ChromiumとBlink Enginesを使用して、Chromeのユーザーエクスペリエンスをシミュレートします。
Node.jsでヘッドレスクロムを実行するには、モジュール（コマンドと通知の抽象化を簡素化するため）および
• モジュール（複数のプラットフォームにわたってnode.jsからChromeを起動するため）が必要です。 chrome-remote-interface chrome-launcherセッションの初期化とテストドメインを定義した後、Webサイトをナビゲートし、ユーザーの旅をコピーして結果をキャプチャできます。また、
関数を使用して、Webサイトをナビゲートしながらページスクリーンショットをキャプチャすることもできます。
• captureScreenshotヘッドレスクロムは、JavaScriptをレンダリングする機能により、Seleniumなどのツールに完全に統合されていませんが、ユーザーエクスペリエンスを完全に自動化した方法で再現する最良の方法であり、大規模な自動クローリングタスクに最適です。
• 私たちの仕事では、ウェブサイトを変更するときにページが一貫したエクスペリエンスを提供することを保証するために、ユーザーの旅を繰り返し複製する必要があることがよくあります。これを達成するための鍵は、これらのテストスクリプトのライブラリを作成できるようにすることです。そうすれば、アサーションを実行して結果ドキュメントを維持できるようにします。これは、ヘッドレスブラウザが行うことです。これにより、ウェブサイトとのユーザーの相互作用をプログラム的にシミュレートし、テストの結果をキャプチャできるコマンドラインツールです。

長年、多くの人々がこれを行うためにPhantomjs、Casperjs、その他のツールを使用しています。しかし、愛と同じように、私たちの心は他の場所に移されるかもしれません。 Chromeバージョン59（Windowsユーザー向けのバージョン60）から始めて、Chromeには独自のヘッドレスブラウザーが付属しています。現時点ではSeleniumをサポートしていませんが、ChromiumとBlink Enginesを使用しています。つまり、Chromeでの実際のユーザーエクスペリエンスをシミュレートします。

この記事のコードは、githubリポジトリにあります。

コマンドラインからヘッドレスクロムを実行します

コマンドラインからヘッドレスクロムを実行するのは比較的簡単です。 Macでは、Chromeのエイリアスを設定して、コマンドラインパラメーターで実行できます。

Linuxでは、さらに簡単です：

--headless：実行中のサーバーの依存関係が必要であるか、表示されていない

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

：GPUハードウェアアクセラレーションを無効にします。このパラメーターは現在必要です。

google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

：指定されたポートのHTTPを介してリモートデバッグを有効にします。
• --headless
要求されたページと対話することもできます。たとえば、
• を標準出力に印刷するには、次のことを行うことができます。 --disable-gpu
可能性に興味がある場合は、ここでパラメーターの完全なリストを見つけることができます。
• --remote-debugging-port
node.js

でヘッドレスクロムを実行しますただし、この記事の焦点はコマンドラインではなく、node.jsでヘッドレスクロムを実行する方法にあります。これを行うには、次のモジュールが必要です

：JavaScript APIは、コマンドと通知の簡単な抽象化を提供します。
• chrome-remote-interface
：複数のプラットフォームでnode.jsでChromeを起動できるようにします。
• chrome-launcher
その後、環境をセットアップできます。これは、node.jsとnpmがマシンにインストールされていることを前提としています。そうでない場合は、チュートリアルをご覧ください。

その後、ヘッドレスクロームを使用してセッションをインスタンス化したいと思います。プロジェクトフォルダーで

ファイルを作成することから始めましょう：

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

index.js最初に、依存関係を導入し、次にChromeセッションをインスタンス化するセルフコール関数を作成します。執筆時点では

フラグは必要ですが、これを読むときは必要ない場合があります。次のステップを実行する前に、アプリケーションがヘッドレスブラウザが起動するのを待機するように

google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

を使用します。

--disable-gpu次に、テストに必要なドメインを公開する必要があります。 async/await

ここで最も重要なページオブジェクト - これを使用して、UIにレンダリングされたコンテンツにアクセスします。これは、ナビゲーションの場所、インタラクティブな要素、およびスクリプトを実行する場所でもあります。

google-chrome --headless --disable-gpu --dump-dom http://endless.horse/

ページを探索します

セッションの初期化とドメインを定義した後、Webサイトのナビゲートを開始できます。開始点を選択したいので、上記の有効なページドメインを使用してナビゲートします。 これにより、ページが読み込まれます。次に、

メソッドを使用して、アプリケーションを実行する手順を定義してコードを実行してユーザージャーニーをコピーできます。この例では、最初の段落のコンテンツを取得するだけです。

mkdir headless
cd headless
npm init -y
npm install chrome-remote-interface --save
npm install chrome-launcher --save

を使用してスクリプトを実行する場合、次の出力と同様の結果が表示されます。

loadEventFiredさらに一歩進んでください - スクリーンショットをつかみます

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  // 所有后续代码片段都位于此处

})();

これは良いことですが、任意のコードをnode index.js値に簡単に置き換えて、クエリセレクターを使用してリンクをクリックし、フォームフィールドに入力し、一連のインタラクションを実行できます。各ステップはJSON構成ファイルに保存し、node.jsスクリプトにロードして、順番に実行することができます。これらのスクリプトの結果は、Mochaなどのテストプラットフォームを使用して検証でき、キャプチャされた値がUI/UX要件を満たしているかどうかを相互参照することができます。

テストスクリプトのサプリメントとして、Webサイトをナビゲートしながらページのスクリーンショットをキャプチャすることができます。幸いなことに、提供されたドメインには、これを正確に行う関数があります。

script1ロゴは、執筆時点でプラットフォーム間でサポートする必要があるもう1つのロゴであり、将来の反復では必要ない場合があります。

captureScreenshotでスクリプトを実行すると、次の出力と同様の結果が表示されます。

結論

自動化スクリプトを作成している場合は、Chromeのヘッドレスブラウザの使用を開始する必要があります。まだセレンなどのツールに完全に統合されていませんが、Chromeレンダリングエンジンをシミュレートする利点を過小評価することはできません。これは、完全に自動化された方法でユーザーエクスペリエンスを再現する最良の方法です。

私はあなたにいくつかのさらなる読書資料を提供します：

• APIドキュメント：https：//www.php.cn/link/fc56459a18776e2a100854c16a1fd78b
• ヘッドレスクロムの初心者： https://www.php.cn/link/ada77e9fac537039c9adb2787b9af7da

以下のコメントで、ヘッドレスクロムでの経験を教えてください。

（FAQの部分は、元のテキストで繰り返され、長すぎるため、ここでは省略されています。PAQコンテンツは、必要に応じてオプションで保持または再編成できます。

以上がクイックヒント：node.jsのヘッドレスクロムを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。