Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。
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を簡単に操作できるようにしたフレームワークです。
GitHub上のPuppeteerのページのReadme.mdSPAなど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も手軽な自動化ツールとして使われていました。
しかし現在、開発リソース不足などの理由によりどちらも事実上開発が停止もしくは終了している状態です。
一方、Pupeteerの開発はGoogleでChromeの開発ツールを担当しているDevToolsチームが担当しています。おそらく開発リソース不足で開発が停滞するといった心配は当面のあいだ不要でしょう。そして今回バージョン1.0に到達したことなどを合わせて考えれば、Puppeteerは安心して採用できるフレームワークだと言えそうです。
カテゴリ Web技術 / JavaScript
タグ Chrome , Puppeteer
あわせてお読みください
- Headless Chrome、イメージキャプチャAPIなどの新機能を搭載した「Chrome 59」正式版がリリース
- オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に
- Webアプリケーションのテスト自動化ツール「Selenium 3.0」登場、5年ぶりのメジャーバージョンアップ。Selenium Coreのサポートは終了し、WebDriverへ移行
- マテリアルデザインに対応したAngularJS用UIフレームワーク「Angular Material 1.0」正式リリース
- ChromeへのDartVM統合を断念、Dart開発チームが発表。今後はJavaScriptへのコンパイルにフォーカス
Kubernetesに分散ストレージのCephを統合する「Rook」がCNCFの正式プロジェクトに。ファイル、ブロック、S3互換オブジェクトストレージやマルチリージョン対応も
Junichi Niino（jniino）
