ヘッドレス Chrome Node API 「Puppeteer」 #Node.js

Puppeteer

Puppeteer は DevTools プロトコルでヘッドレス Chrome または Chromium を制御するための高水準 API を提供する Node ライブラリです。
ヘッドレスではないフルの Chrome または Chromium を使用することもできます。

インストール

Yarn

Puppeteer をインストールするために、JavaScript パッケージマネージャーのひとつである Yarn をインストールします。

macOS

brew install yarn

nvm を利用している場合は --without-node オプションを付けて Node.js の依存インストールを除外します。

Windows

cinst -y yarn

CentOS

curl --silent --location https://rpm.nodesource.com/setup_8.x | bash - && \
yum -y install nodejs gcc-c++ make yum-utils && \
yum-config-manager --add-repo https://dl.yarnpkg.com/rpm/yarn.repo && \
yum -y install yarn

Puppeteer

yarn add puppeteer

yarn コマンドで Puppeteer をインストールします。最新版の 1.3.0 がインストールされました。

mkdir -p Workspace/puppeteer && cd $_

ブラウザの起動 puppeteer.launch()

通常の起動

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = (await browser.pages())[0];
  await page.setViewport({ width, height });
  await page.goto('https://www.example.com');
})();

情報バーの非表示、ウィンドウの最大化、シークレットモードでの起動

const puppeteer = require('puppeteer');
const headless = false;
const slowMo = 10;
const width = 1280, height = 800;
const args = [
  '--start-fullscreen',
  '--disable-infobars',
  '--incognito',
];

(async () => {
 const browser = await puppeteer.launch({ headless, slowMo, args });
  const page = (await browser.pages())[0];
  await page.setViewport({ width, height });
  await page.goto('https://www.example.com');
})();

API

ブラウザの起動 puppeteer.launch

puppeteer.launch();

パラメータ	説明
`headless`	ブラウザをヘッドレスモードで実行するかどうか。 `devtools` オプションが `true` でない限りデフォルトは `true` 。
`slowMo`	Puppeteer の動作を指定されたミリ秒単位で遅らせる。何が起こっているかを見ることができて役に立つ。
`devtools`	各タブに DevTools パネルを自動的に開くかどうか。このオプションが `true` だと `headless` オプションは `false` に設定される。
`dumpio`	ブラウザの process stdout と stderr を `process.stdout` と `process.stderr` にパイプするかどうか。デフォルトは `false` 。
`timeout`	ブラウザインスタンスの開始を待つ最大時間（ミリ秒単位）。デフォルトは `30000` （30秒）。タイムアウトを無効にするには `0` を渡す。
`args`	ブラウザインスタンスに渡す追加の引数。 Chromiumフラグの一覧はここで見られる。

List of Chromium Command Line Switches

オプション	説明
`--no-startup-window`	起動時にブラウザウィンドウを自動的に開かない（バックグラウンドアプリをホスティングする目的で Chrome を起動するときに使用される）
`--no-referrers`	HTTP-Referer ヘッダーを送信しない
`--incognito`	ブラウザをシークレットモードで直接起動する
`--no-default-browser-check`	デフォルトのブラウザチェックを無効にするデフォルトのブラウザ情報バーが表示されないようにするUI/ブラウザテストに役立つ
`--hide-scrollbars`	スクリーンショットのスクロールバーを非表示にする
`--disable-infobars`	一時廃止された ¹ が復活した ²
`--enable-automation`	ユーザーにブラウザが自動テストによって制御されていることを通知する

ブラウザの終了 browser.close()

browser.close()

Chromium と開かれている場合はそのページすべてを閉じます。 Browser オブジェクト自体は破棄されたものとみなされ、もう使用できない。

フォーム入力

await page.type('input[name="id"]', 'joe');

await page.type('input[name="id"]', 'joe', {delay: 100});

フォーカス

let button = await page.focus('#login_button');

クリック

await page.click('#login_button');

let button = page.$('#login_button');
await button.click();

let items = await page.$$('#list .item');
let item = await items[2].$('.name');

querySelectorAll

スクリーンショット

await page.screenshot({path: 'screenshot_all.png'});

await let side_nav = page.$('#side_nav');
await side_nav.screenshot({path: 'screenshot_side_nav.png'});

value 値の取得

let login_id = await page.$eval('input[name="login_id"]', el => el.value);

テキストの取得

let text = await page.$eval('.classname', item => {return item.textContent;});

遷移待機

page.click('a[href="index.php"]');
await page.waitForNavigation({timeout: 60000, waitUntil: "domcontentloaded"});

await page.click('a[href="login.php"]');
await page.waitFor('a[href="mypage.php"]', {timeout: 120000});

プルダウンの選択

await page.select('select[name="color"]', 'red');

await page.select('select#colors', 'red', 'green', 'blue');

option の value が red のものを選択する。
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageselectselector-values

const scrapingData = await page.evaluate(() => {
    const dataList = [];
    const nodeList = document.querySelectorAll("td.date");
    nodeList.forEach(_node => {
        dataList.push(_node.innerText);
    })
    return dataList;
});

BASIC 認証

const user = 'user';
const pass = 'P@ssw0rd';
await page.setExtraHTTPHeaders({Authorization: `Basic ${new Buffer(`${user}:${pass}`).toString('base64')}`});

ページ遷移

await page.goto('https://example.com/', {waitUntil: 'domcontentloaded'});

let waitUntil = 'domcontentloaded';
await page.goto('https://example.com/', {waitUntil});

waitUntil

オプション	内容
`load`	`load` イベントが発生するとナビゲーション完了と見なす。デフォルト値。
`domcontentloaded`	`DOMContentLoaded` イベントが発生するとナビゲーション完了と見なす。
`networkidle0`	500ミリ秒間にネットワーク接続が0個以下であればナビゲーション完了と見なす。
`networkidle2`	500ミリ秒間にネットワーク接続が2個以下であればナビゲーション完了と見なす。

waitFor

waitForNavigation

await page.waitForNavigation({waitUntil:'domcontentloaded'});

waitForSelector

await page.waitForSelector('#contents');

waitForXPath

waitForFunction

スタイルシート操作

await page.evaluate(({}) => {$('#slider').css('display', 'block');},{});

ユーザーエージェントの指定

const userAgent = '';
page.setUserAgent(userAgent);

デバイスの指定

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone X'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  // other actions...
});

使用可能なデバイスのリストは DeviceDescriptors.js で確認できる。

https://qiita.com/ukyo/items/287169de85576dfed608
https://qiita.com/tomi_shinwatec/items/a68cf7840c3da002c6e0