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

2018年2月7日

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を簡単に操作できるようにしたフレームワークです。

Puppeteer GitHub上のPuppeteerのページのReadme.md

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のDevToolsチーム

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

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

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

このエントリーをはてなブックマークに追加
follow us in feedly

カテゴリ Web技術 / JavaScript
タグ  Chrome , Puppeteer


次の記事
JavaScriptエンジン「V8 release v6.5」リリース。WebAssemblyバイナリをダウンロードと並行してコンパイル、ダウンロード完了とほぼ同時にコンパイルも完了

前の記事
Kubernetesに分散ストレージのCephを統合する「Rook」がCNCFの正式プロジェクトに。ファイル、ブロック、S3互換オブジェクトストレージやマルチリージョン対応も


カテゴリ



Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



新着記事 10本


PR - Books


fig

fig

fig