次の方法で共有


Puppeteer の概要

Puppeteer ライブラリには、DevTools プロトコルを使用して、Microsoft Edge を含むChromiumベースのブラウザーを制御する高レベルの API が用意されています。

Puppeteer は、既定で ヘッドレス ブラウザー を起動します。 ヘッドレス ブラウザーではユーザー インターフェイス (UI) が表示されないため、コマンド ラインを使用する必要があります。 また、完全 (ヘッドレスではない) Microsoft Edge を実行するように Puppeteer を構成することもできます。

既定では、Puppeteer をインストールすると、インストーラーは、Microsoft Edge も構築されているオープンソース ブラウザーである最新バージョンのChromiumをダウンロードします。

Microsoft Edge がインストールされている場合は、 puppeteer-core を使用できます。 puppeteer-core は、Microsoft Edge などの既存のブラウザー インストールを起動する Puppeteer の軽量バージョンです。 Microsoft Edge をダウンロードするには、[ Microsoft Edge Insider Channels のダウンロード] に移動します。

Puppeteer は ノード ライブラリです。

puppeteer-core のインストール

次のいずれかのコマンドを使用して、Web サイトまたはアプリに追加 puppeteer-core できます。

npm i puppeteer-core
yarn add puppeteer-core

Puppeteer-core を使用して Microsoft Edge を起動する

puppeteer-core は、 WebDriver などの他のブラウザー テスト フレームワークに似ています。 ブラウザーのインスタンスを作成し、Web ページを開き、Puppeteer API を使用して Web ページを操作します。

を使用 puppeteer-core して Microsoft Edge を起動するには:

  1. puppeteer-core ノード v8.9.0 以降が必要です。 互換性のあるバージョンの Node.js があることを確認します。 これを行うには、コマンド ラインから を実行 node -v します。 また、次の例では、 を使用 async/awaitします。これは、Node v7.6.0 以降でのみサポートされています。

  2. 次のコード サンプルでは、 puppeteer-core Microsoft Edge を起動し、 に https://www.microsoft.com/edge/download/insider移動し、 として example.pngスクリーンショットを保存します。 次のコード スニペットをコピーし、 として example.js保存します。

    const puppeteer = require('puppeteer-core');
    
    (async () => {
      const browser = await puppeteer.launch({
        executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge Dev\\Application\\msedge.exe'
      });
      const page = await browser.newPage();
      await page.goto('https://www.microsoft.com/edge/download/insider');
      await page.screenshot({path: 'example.png'});
    
      await browser.close();
    })();
    
  3. 次の手順に従って実行可能パスを見つけ、Microsoft Edge のインストールをポイントするように変更 executablePath します。 たとえば、macOS の場合、 executablePath Microsoft Edge Canary の は に設定する /Applications/Microsoft\ Edge\ Canary.app/必要があります。

  4. を見つけるには、executablePathそのページの実行可能ファイル パスedge://version移動してコピーします。

  5. または、プログラムによって実行可能パスを見つけるには、まず次のいずれかのコマンドを実行して エッジ パス パッケージをインストールします。

    npm i edge-paths
    
    yarn add edge-paths
    
  6. 次に、 を使用 edge-paths して実行可能パスを見つける場合は、次のサンプルのようなコードを実行します。 エッジ パス パッケージを使用して、プログラムによって OS 上の Microsoft Edge のインストールへのパスを検索します。

    const edgePaths = require("edge-paths");
    
    const EDGE_PATH = edgePaths.getEdgePath();
    
  7. これで、 の実行可能パス (手動またはプログラムによる) が見つかったので、 を example.js設定します executablePath: EDGE_PATH。 変更内容を保存するには、[保存] をクリックします。

  8. コマンド ラインからを実行 example.js します。

    node example.js
    

    puppeteer-core は Microsoft Edge を起動し、 に https://www.microsoft.com/edge/download/insider移動し、Web ページのスクリーンショットを保存します。 page.setViewport()を呼び出すことで、スクリーンショットのサイズをカスタマイズできます。

    example.png のファイルは、 によって example.js生成されます。

    example.jsによって生成された example.png ファイル

前の例では、Puppeteer と を使用してカバーできる基本的な自動化と puppeteer-coreテストのシナリオを示します。 Puppeteer とそのしくみについて詳しくは、Puppeteer をチェックしてください。

関連項目

ローカル記事

アーカイブ

ブログ記事

ツール

プロトコル

Info