要約
ヘッドレス Chrome は Chrome 59 で提供されています。この方法では、ヘッドレス環境で Chrome ブラウザを実行します。 基本的には、Chrome を使わずに Chrome を実行するということですこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能をすべてコマンドラインで利用できます。
これはなぜ便利なのでしょうか。
ヘッドレス ブラウザは、UI シェルを目に見える必要がない自動テストやサーバー環境に適したツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をどのようにレンダリングするかを調べたりできます。
ヘッドレス(CLI)の開始
ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降をインストールしている場合は、--headless
フラグを使用して Chrome を起動します。
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed if running on Windows.
--remote-debugging-port=9222 \
https://www.chromestatus.com # URL to open. Defaults to about:blank.
chrome
は、インストールした Chrome の場所を指します。正確な場所はプラットフォームによって異なります。私は Mac なので、インストールした Chrome のバージョンごとに
便利なエイリアスを作成しました。
Chrome の Stable チャンネルでベータ版を入手できない場合は、chrome-canary
を使用することをおすすめします。
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
Chrome Canary はこちらからダウンロードします。
コマンドラインの機能
場合によっては、ヘッドレス Chrome をプログラマティックにスクリプトを作成する必要はありません。一般的なタスクを実行するのに便利なコマンドライン フラグがいくつか用意されています。
DOM の出力
--dump-dom
フラグは、document.body.innerHTML
を stdout に出力します。
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
PDF を作成
--print-to-pdf
フラグを指定すると、ページの PDF が作成されます。
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
スクリーンショットを取得する
ページのスクリーンショットをキャプチャするには、--screenshot
フラグを使用します。
chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/
# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/
# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
--screenshot
を指定して実行すると、現在の作業ディレクトリに screenshot.png
という名前のファイルが生成されます。ページ全体のスクリーンショットが必要な場合は
もう少し複雑になりますDavid Schnurr さんによる自動スクリーンショット ツールとしてヘッドレス Chrome を使用する をご覧ください。
REPL モード(読み取り、評価、出力のループ)
--repl
フラグは、コマンドラインから直接、ブラウザで JS 式を評価できるモードでヘッドレスを実行します。
$ chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.chromestatus.com/
[0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit.
>>> location.href
{"result":{"type":"string","value":"https://www.chromestatus.com/features"}}
>>> quit
$
ブラウザの UI なしで Chrome をデバッグしますか?
--remote-debugging-port=9222
を使用して Chrome を実行すると、DevTools プロトコルが有効になっているインスタンスを起動します。このプロトコルは Chrome と通信し、ヘッドレス ブラウザ インスタンスを起動するために使用されます。また、Sublime、VS Code、Node などのツールがアプリケーションのリモート デバッグに使用しています。#synergy
ページを表示するためのブラウザ UI がないため、別のブラウザで http://localhost:9222
に移動して、すべてが正常に動作していることを確認します。検査可能なページのリストが表示されます。クリックして、ヘッドレス モードでのレンダリング内容を確認できます。
ここから、使い慣れた DevTools の機能を使用して、通常どおりページの検査、デバッグ、調整を行うことができます。ヘッドレスをプログラムで使用している場合、このページは、ネットワークを介して実行されるすべての未加工の DevTools プロトコル コマンドを確認してブラウザと通信するための強力なデバッグツールにもなります。
プログラムを使用する場合(Node)
操り人形師
Puppeteer は Chrome チームが開発したノード ライブラリです。ヘッドレス(またはフル)Chrome を制御する高レベル API を提供します。Phantom や NightmareJS などの他の自動テスト ライブラリと似ていますが、Chrome の最新バージョンでのみ機能します。
特に、Puppeteer を使用すると、スクリーンショットの撮影、PDF の作成、ページの移動、ページに関する情報の取得などを簡単に行うことができます。ブラウザのテストを手早く自動化したい場合は このライブラリをおすすめしますDevTools プロトコルの複雑さを取り除き、Chrome のデバッグ インスタンスの起動のような冗長なタスクに対処します。
インストール:
npm i --save puppeteer
例 - ユーザー エージェントを出力する
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
例 - ページのスクリーンショットを撮影する
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.chromestatus.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'page.pdf', format: 'A4'});
await browser.close();
})();
完全な API について詳しくは、Puppeteer のドキュメントをご覧ください。
CRI ライブラリ
chrome-remote-interface は Puppeteer の API よりも下位レベルのライブラリです。メタルに近く、DevTools プロトコルを直接使用する場合におすすめします。
Chrome の起動
chrome-remote-interface は Chrome を自動的に起動しないため、自分で管理する必要があります。
CLI セクションでは、--headless --remote-debugging-port=9222
を使用して Chrome を手動で起動しています。しかし、テストを完全に自動化するには、アプリケーションから Chrome を発生させたほうがよい場合があります。
その方法の一つは、child_process
を使用することです。
const execFile = require('child_process').execFile;
function launchHeadlessChrome(url, callback) {
// Assuming MacOSx.
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
execFile(CHROME, ['--headless', '--disable-gpu', '--remote-debugging-port=9222', url], callback);
}
launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => {
...
});
しかし、複数のプラットフォームで動作するポータブルなソリューションを必要とする場合、事態は厄介です。Chrome へのハードコードされたパスをご覧ください。
ChromeLauncher の使用
Lighthouse は、ウェブアプリの品質をテストするための優れたツールです。Chrome を起動するための堅牢なモジュールが Lighthouse で開発され、抽出されて単独での使用が可能になっています。chrome-launcher
NPM モジュールは、Chrome がインストールされている場所を確認し、デバッグ インスタンスをセットアップして、ブラウザを起動し、プログラムが完了したら強制終了します。最大のメリットは、Node のおかげでクロスプラットフォームで動作する点です。
デフォルトでは、chrome-launcher
は Chrome Canary を起動しようとします(Chrome Canary がインストールされている場合)。が、使用する Chrome を手動で選択するように変更することもできます。使用するには、まず npm からインストールします。
npm i --save chrome-launcher
例 - chrome-launcher
を使用してヘッドレスを起動する
const chromeLauncher = require('chrome-launcher');
// Optional: set logging level of launcher to see its output.
// Install it using: npm i --save lighthouse-logger
// const log = require('lighthouse-logger');
// log.setLevel('info');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
* False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
// port: 9222, // Uncomment to force a specific port of your choice.
chromeFlags: [
'--window-size=412,732',
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
launchChrome().then(chrome => {
console.log(`Chrome debuggable on port: ${chrome.port}`);
...
// chrome.kill();
});
このスクリプトを実行しても大きなことはありませんが、about:blank
を読み込んだタスク マネージャーでは、Chrome のインスタンスが起動します。ブラウザの UI はありません頭がいないわ。
ブラウザを制御するには DevTools プロトコルが必要です。
ページに関する情報の取得
では、ライブラリをインストールしましょう。
npm i --save chrome-remote-interface
例
例 - ユーザー エージェントを出力する
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
結果は HeadlessChrome/60.0.3082.0
のようになります。
例 - サイトにウェブアプリ マニフェストがあるかどうかを確認する
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page} = protocol;
await Page.enable();
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const manifest = await Page.getAppManifest();
if (manifest.url) {
console.log('Manifest: ' + manifest.url);
console.log(manifest.data);
} else {
console.log('Site has no app manifest');
}
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
例 - DOM API を使用してページの <title>
を抽出します。
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const js = "document.querySelector('title').textContent";
// Evaluate the JS expression in the page.
const result = await Runtime.evaluate({expression: js});
console.log('Title of page: ' + result.result.value);
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
Selenium、WebDriver、ChromeDriver の使用
現在、Selenium は Chrome のフル インスタンスを開きます。つまりこれは自動化されたソリューションであり 完全にヘッドレスではありませんただし、Selenium では、簡単な作業でヘッドレス Chrome を実行するよう設定できます。自分でセットアップする方法の詳細な手順については、ヘッドレス Chrome での Selenium の実行をおすすめしますが、参考のために以下に例をいくつか示します。
ChromeDriver の使用
ChromeDriver 2.32 は Chrome 61 を使用しており、ヘッドレス Chrome で適切に動作します。
インストール:
npm i --save-dev selenium-webdriver chromedriver
例:
const fs = require('fs');
const webdriver = require('selenium-webdriver');
const chromedriver = require('chromedriver');
const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {args: ['--headless']});
const driver = new webdriver.Builder()
.forBrowser('chrome')
.withCapabilities(chromeCapabilities)
.build();
// Navigate to google.com, enter a search.
driver.get('https://www.google.com/');
driver.findElement({name: 'q'}).sendKeys('webdriver');
driver.findElement({name: 'btnG'}).click();
driver.wait(webdriver.until.titleIs('webdriver - Google Search'), 1000);
// Take screenshot of results page. Save to disk.
driver.takeScreenshot().then(base64png => {
fs.writeFileSync('screenshot.png', new Buffer(base64png, 'base64'));
});
driver.quit();
WebDriverIO の使用
WebDriverIO は、Selenium WebDriver 上の上位レベルの API です。
インストール:
npm i --save-dev webdriverio chromedriver
例: chromestatus.com で CSS 機能をフィルタリングする
const webdriverio = require('webdriverio');
const chromedriver = require('chromedriver');
const PORT = 9515;
chromedriver.start([
'--url-base=wd/hub',
`--port=${PORT}`,
'--verbose'
]);
(async () => {
const opts = {
port: PORT,
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {args: ['--headless']}
}
};
const browser = webdriverio.remote(opts).init();
await browser.url('https://www.chromestatus.com/features');
const title = await browser.getTitle();
console.log(`Title: ${title}`);
await browser.waitForText('.num-features', 3000);
let numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} total features`);
await browser.setValue('input[type="search"]', 'CSS');
console.log('Filtering features...');
await browser.pause(1000);
numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} CSS features`);
const buffer = await browser.saveScreenshot('screenshot.png');
console.log('Saved screenshot...');
chromedriver.stop();
browser.end();
})();
その他のリソース
開始にあたって役立つリソースをいくつかご紹介します。
ドキュメント
- DevTools プロトコル閲覧者 - API リファレンス ドキュメント
ツール
- chrome-remote-interface - DevTools プロトコルをラップするノード モジュール
- Lighthouse - ウェブアプリの品質をテストするための自動化ツールで、プロトコルを多用します。
- chrome-launcher - Chrome を起動するためのノード モジュール、自動化の準備完了
デモ
- 「The Headless Web」- api.ai でのヘッドレスの使用に関する Paul Kinlan 氏の素晴らしいブログ投稿。
よくある質問
--disable-gpu
フラグは必要ですか?
Windows だけでご利用いただけます。他のプラットフォームでは不要です。--disable-gpu
フラグは、いくつかのバグに対する一時的な回避策です。Chrome の今後のバージョンでは、このフラグは必要なくなります。詳しくは、crbug.com/737678 をご覧ください。
それでも Xvfb は必要ですか?
いいえ。ヘッドレス Chrome はウィンドウを使用しないため、Xvfb などのディスプレイ サーバーは必要ありません。これがなくても自動テストは問題なく実行できます。
Xvfb とはXvfb は、Unix 系システム用のインメモリ ディスプレイ サーバーです。物理ディスプレイを接続せずに、グラフィカル アプリケーション(Chrome など)を実行できます。多くの人が Xvfb を使用して以前のバージョンの Chrome を実行し、「ヘッドレス」テストを行っています。
ヘッドレス Chrome を実行する Docker コンテナを作成するにはどうすればよいですか?
lighthouse-ci を確認します。サンプル Dockerfile があり、node:8-slim
をベースイメージとして使用し、App Engine Flex に Lighthouse をインストールして実行します。
Selenium / WebDriver / ChromeDriver と併用できますか?
はい。Selenium、WebDriver、ChromeDriver の使用をご覧ください。
これは PhantomJS とどのように関係していますか?
ヘッドレス Chrome は PhantomJS などのツールに類似しています。どちらもヘッドレス環境での自動テストに使用できます。この 2 つの主な違いは、Pantom はレンダリング エンジンとして古いバージョンの WebKit を使用するのに対し、ヘッドレス Chrome は Blink の最新バージョンを使用している点です。
現時点では、Phantom は DevTools プロトコルよりも上位の API も提供しています。
バグを報告するにはどうすればよいですか?
ヘッドレス Chrome に関するバグについては、crbug.com で報告してください。
DevTools プロトコルのバグについては、github.com/ChromeDevTools/devtools-protocol で報告してください。