Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発

GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。

Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせることができるようになります。

1月12日付でバージョン1.0として正式版がリリースされた「Puppeteer」は、サーバサイドで実行されるNode.jsのJavaScriptからこのHeadless Chromeを簡単に操作できるようにしたフレームワークです。

SPAなどJavaScriptを用いたWebページもレンダリング可能

PuppeteerはJavaScriptエンジンを搭載したフルブラウザとしてのChrome（正確にはオープンソースのChromium）を内部的に呼び出してWebページをレンダリングしています。

そのため、SPA（Single Page Application）のような、WebページをロードしたあとでJavaScriptによって動的にHTMLが生成される場合でも問題なくレンダリングが行われ、画面キャプチャの作成やスクレイピングの実行、レンダリング後のWebページに対してフィールドの選択や入力、結果の取得などを行うことができます。

Webブラウザの操作を自動化できるため、例えば開発中のWebアプリケーションに対して特定の操作を行い、正常な値や結果の画面が表示されるかといった自動テストの作成や、テスト結果を毎回自動的に画面キャプチャし履歴を残しておくなどの用途に使うことができるでしょう。

下記は、example.comの画面キャプチャを取得するスクリプトの例です。Puppeteerを呼び出し、新しいページを開いてWebサイトを読み込み、キャプチャを取り、ブラウザを閉じる、という簡単な手順になっています。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Puppeteerの利用法については、下記の記事などが参考になります。

• PuppeteerでヘッドレスChromeを操ってみる - Qiita
• Puppeteerを使用したHeadless Chromeの操作 - VASILY DEVELOPERS BLOG
• Headless Chrome を操作する Puppeteer で E2E テストを CircleCI で動かしてみた | CYOKODOG

Puppeteerを開発しているのはChromeのDevToolsチーム

これまで、Webブラウザの操作を自動化できるヘッドレスブラウザのフレームワークとして「Phantom.js」がよく知られ、使われていました。また、Firefoxを用いたSelenium IDEも手軽な自動化ツールとして使われていました。

しかし現在、開発リソース不足などの理由によりどちらも事実上開発が停止もしくは終了している状態です。

• 8月にリリースされたFirefox 55以降ではSelenium IDEが動作せず、Seleniumオフィシャルブログで報告。今後の方向性は？ － Publickey

一方、Pupeteerの開発はGoogleでChromeの開発ツールを担当しているDevToolsチームが担当しています。おそらく開発リソース不足で開発が停滞するといった心配は当面のあいだ不要でしょう。そして今回バージョン1.0に到達したことなどを合わせて考えれば、Puppeteerは安心して採用できるフレームワークだと言えそうです。

参考記事

Googleは、Chromeに拡張機能を導入することで、組織内で使われているMacやPC、Chromebookの状態を集中的に把握できる軽量なMDM（Mobile Device Management）ソリューション「Endpoint Verification」を発表しました。

• Chromeの拡張機能で従業員のMacやPCを集中管理。Googleが軽量のMDMソリューション「Endpoint Verification」発表

Google、Mozilla、マイクロソフトが「WebAuthn」の実装を開始。これによって「FIDO2」の普及が期待され、Webブラウザから指紋認証や顔認証などで簡単にWebサイトへのログインや支払いの承認といった操作が実現されそうです。

• パスワードに依存しない認証「WebAuthn」をChrome/Firefox/Edgeが実装開始、W3Cが標準化。Webはパスワードに依存しないより安全で便利なものへ