作成日:  (更新日: )

Puppeteer のスニペット集

このページは、Puppeteer のスニペットをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • バージョン 1.17.0 時点のものです。将来のバージョンで仕様が変更されている場合は使用できない可能性があります。

スニペット

ブラウザを起動する

ブラウザを表示せずに起動する

const browser = await puppeteer.launch();
// or
const browser = await puppeteer.launch({
    headless: true,
});

ブラウザを表示して起動する

const browser = await puppeteer.launch({
    headless: false,
});

新規ページを開く

const page = await browser.newPage();

ページの幅と高さを決める

await page.setViewport({ width: 1440, height: 900 }); // ビューポート (ウィンドウサイズ)
// or
// ブラウザを起動する時点で指定しておく
const browser = await puppeteer.launch({
    defaultViewport: {
        width: 1440,
        height: 900,
    }
});

HTTP リクエストヘッダを追加する

await page.setExtraHTTPHeaders({
    'Accept-Language': 'ja'
});

ページを移動する

await page.goto('http://example.com/', { waitUntil: 'domcontentloaded' });
  • 'http://example.com/' の箇所に、移動したい URL を指定します。
  • waitUntil は下記のいずれかです。
    • load: ページ遷移後、ページの load イベントが発生する時まで待つ
    • domcontentloaded: ページ遷移後、ページの DOMContentLoaded イベントが発生する時まで待つ
    • networkidle0: ページ遷移後、500ms の間ネットワーク接続数が 0 になる時まで待つ
    • networkidle2: ページ遷移後、500ms の間ネットワーク接続数が 2 になる時まで待つ
    • 参考: page.goto

入力欄にテキストを入力する

await page.type('[name="username"]', 'taro');
  • [name="username"] の箇所に入力したい入力欄を特定するための CSS セレクタ、taro の箇所に入力したいテキストを指定します。
  • 参考: page.type

リンクやボタンをクリックする

await Promise.all([
    page.waitForNavigation({ waitUntil: 'domcontentloaded' }), // クリック後ページ遷移後通信が完了するまで待つ
    page.click('#link1'),
]);
  • #link1 の箇所にクリックしたいリンクやボタンを特定するための CSS セレクタを指定します。
  • 参考: page.click

スクリーンショットを撮影する

スクリーンショットを撮影する (通常)

await page.screenshot({ path: 'test.png' });
  • test.png の箇所に保存先のファイル名 (ファイルパス) を指定します。
  • 参考: page.screenshot

スクリーンショットを撮影する (フルページ)

await page.screenshot({ path: 'test.png', fullPage: true });

スクリーンショットを撮影する (矩形)

await page.screenshot({ path: 'test.png', clip: { x: 10, y: 10, width: 400, height: 400 } });
  • clip で座標を指定します。

スクリーンショットを撮影する (要素)

const el = await page.$('.some-class');
await el.screenshot({ path: 'test.png' });

PDF を保存する

await page.pdf({ path: 'test.pdf' });
  • test.pdf の箇所に保存先のファイル名 (ファイルパス) を指定します。
  • headless: true で ブラウザを起動していた時はエラーになるようです。(UnhandledPromiseRejectionWarning: Error: Protocol error (Page.printToPDF): PrintToPDF is not implemented)
  • 参考: page.pdf

ページの HTML を設定する

const html = `<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<h1>test</h1>
</body>
</html>`;
await page.setContent(html);

ページの HTML を取得する

const html = await page.content();

ページ内の画像の URL を取得する

const srcAll = await page.$$eval('img', list => list.map(el => el.src)); // URL の配列
  • $$eval(CSSセレクタ, 要素リストからデータを取得する関数) のような形で特定の DOM Element をもとにテキスト (textContent) や属性値 (getAttribute() やプロパティ) を取得することができます。
  • 参考: page.$$eval

ページ内の画像等のリソースを保存する

// const fs = require('fs').promises;

page.on('response', async (response) => {
    const url = new URL(response.url());
    const filename = url.pathname.split('/').pop();
    if (/\.(?:png|jpe?g|gif)$/.test(filename)) {
        await fs.writeFile(filename, await response.buffer());
    }
});
  • 読み込んだ画像などは response イベントで検知できます。
  • 参考: page.response

ブラウザを閉じる

await browser.close();