Help us understand the problem. What is going on with this article?

ヘッドレス Chrome Node API 「Puppeteer」

More than 1 year has passed since last update.

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({ 1280, 800 });
  await page.goto('https://www.example.com');
})();

API

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

ブラウザの起動 puppeteer.launch

puppeteer.launch();
パラメータ 説明
headless ブラウザをヘッドレスモードで実行するかどうか。 devtools オプションが true でない限りデフォルトは true
slowMo Puppeteer の動作を指定されたミリ秒単位で遅らせる。何が起こっているかを見ることができて役に立つ。
devtools 各タブに DevTools パネルを自動的に開くかどうか。このオプションが true だと headless オプションは false に設定される。
dumpio ブラウザの process stdout と stderr を process.stdoutprocess.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 一時廃止された 1 が復活した 2
--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');

optionvaluered のものを選択する。
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個以下であればナビゲーション完了と見なす。

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options

waitFor

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforselectororfunctionortimeout-options-args

waitForNavigation

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

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions

waitForSelector

await page.waitForSelector('#contents');

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforselectorselector-options

waitForXPath

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforxpathxpath-options

waitForFunction

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args

スタイルシート操作

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした