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 は ノード ライブラリです。
次のいずれかのコマンドを使用して、Web サイトまたはアプリに追加 puppeteer-core
できます。
npm i puppeteer-core
yarn add puppeteer-core
puppeteer-core
は、 WebDriver などの他のブラウザー テスト フレームワークに似ています。 ブラウザーのインスタンスを作成し、Web ページを開き、Puppeteer API を使用して Web ページを操作します。
を使用 puppeteer-core
して Microsoft Edge を起動するには:
puppeteer-core
ノード v8.9.0 以降が必要です。 互換性のあるバージョンの Node.js があることを確認します。 これを行うには、コマンド ラインから を実行node -v
します。 また、次の例では、 を使用async
/await
します。これは、Node v7.6.0 以降でのみサポートされています。次のコード サンプルでは、
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(); })();
次の手順に従って実行可能パスを見つけ、Microsoft Edge のインストールをポイントするように変更
executablePath
します。 たとえば、macOS の場合、executablePath
Microsoft Edge Canary の は に設定する/Applications/Microsoft\ Edge\ Canary.app/
必要があります。を見つけるには、
executablePath
そのページの実行可能ファイル パスにedge://version
移動してコピーします。または、プログラムによって実行可能パスを見つけるには、まず次のいずれかのコマンドを実行して エッジ パス パッケージをインストールします。
npm i edge-paths
yarn add edge-paths
次に、 を使用
edge-paths
して実行可能パスを見つける場合は、次のサンプルのようなコードを実行します。 エッジ パス パッケージを使用して、プログラムによって OS 上の Microsoft Edge のインストールへのパスを検索します。const edgePaths = require("edge-paths"); const EDGE_PATH = edgePaths.getEdgePath();
これで、 の実行可能パス (手動またはプログラムによる) が見つかったので、 を
example.js
設定しますexecutablePath: EDGE_PATH
。 変更内容を保存するには、[保存] をクリックします。コマンド ラインからを実行
example.js
します。node example.js
puppeteer-core
は Microsoft Edge を起動し、 にhttps://www.microsoft.com/edge/download/insider
移動し、Web ページのスクリーンショットを保存します。 page.setViewport()を呼び出すことで、スクリーンショットのサイズをカスタマイズできます。次
example.png
のファイルは、 によってexample.js
生成されます。
前の例では、Puppeteer と を使用してカバーできる基本的な自動化と puppeteer-core
テストのシナリオを示します。 Puppeteer とそのしくみについて詳しくは、Puppeteer をチェックしてください。
- WebDriver
- Puppeteer、puppeteer-core、Microsoft Edge の使用に関するフィードバックを送信するには、Microsoft Edge DevTools チームにお問い合わせください。
- WebView2 の機能と API の概要に関するページの Chrome DevTools プロトコル (CDP)
- WebView2 アプリで Chrome DevTools Protocol (CDP) を使用する