とほほのPuppeteer入門
Puppeteerとは
- 「パペティア」と読みます。パペット・マペットのパペットが語源と思われます。
- Google が開発した ブラウザ操作テスト用の JavaScript ライブラリ。
- Chrome や Firefox を DevTools Protocol または WebDriver BiDi 経由で操作します。
- 類似のツールに Selenium や Microsoft の Playwright があります。
- Selenium に比べると 軽量、学習コストが低い、SPA対応、スクレイピングに強いなどのメリットがあります。
- ブラウザの開発者ツール(DevTools)の [Recode] で記録した情報を直接 Puppeteer スクリプトとして実行することができます。
- Selenium や Playwright は JavaScript, Python, Java, C# などに対応していますが、Puppeteer は JavaScript(Node.js) のみ。
- ただし、Puppeteer を Python に移植した pyppeteer というものもあります。
- Selenium や Playwright は Chrome, Firefox, Edge, Safari に対応していますが、Puppeteer は Chrome, Firefox, Edge のみ。
- 各ツールの人気度の動向は こちら。最近は Playwright が一番人気の様です。
本書の対象バージョン
OS : Windows 11 Node : 22.19.0 Puppeteer : 24.2.2 (2025年10月)
インストール
下記から [Windowsインストーラー(.msi)] をダウンロードして Node.js をインストールしてください。
[コマンドプロンプト] を起動し、下記を実行してください。
C:\Users\xxxx> mkdir PuppeteerTest C:\Users\xxxx> cd PuppeteerTest C:\Users\xxxx\PuppeteerTest> notepad package.json
下記の内容で package.json を作成・保存してください。
{
"name": "PuppeteerTest",
"version": "1.0",
"type": "module"
}
[コマンドプロンプト] から下記を実行してください。
C:\Users\xxxx\PuppeteerTest> npm install puppeteer
簡単なテスト
[コマンドプロンプト] で下記を実行してください。
C:\Users\xxxx\PuppeteerTest> notepad test.js
下記の内容で test.js を作成・保存してください。
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--window-size=960,1080'],
});
const page = await browser.newPage();
page.setDefaultTimeout(8000);
await page.goto('https://www.yahoo.com');
await page.type('#ybar-sbq', 'JavaScript');
await page.click('#ybar-search');
})();
[コマンドプロンプト] から下記を実行してください。
C:\Users\xxxx\PuppeteerTest> node test.js
ブラウザが起動し、Yahoo.com の画面が表示され、"JavaScript" が検索されれば成功です。
Puppeteer API
Puppeteer API の詳細は下記を参照してください。
- APIリファレンス (英語)
ページ・基本設定
指定した URL を開く
await page.goto(url);
ページを閉じる
await page.close();
タイムアウト値(ミリ秒)を設定する。
page.setDefaultTimeout(msec);
画面サイズ(ビューポート)を指定する。
await page.setViewport({ width: 960, height: 1080 })
複数のブラウザコンテキストを使用する。
const browser = await puppeteer.launch(); const context = await browser.createBrowserContext(); const page1 = await context.newPage(); const page2 = await context.newPage();
オレオレ証明書などの証明書のエラーを無視する。
const browser = await puppeteer.launch({
args: ['--ignore-certificate-errors'],
});
要素
selector で指定した要素が表示されるのを待つ
await page.waitForSelector(selector); // 古い書き方 await page.locator(selector).wait(); // 今ではこちらを推奨
selector で指定した要素にフォーカスをあてる
await page.focus(selector);
フォーカスのあたっている要素に text を入力する
await page.keyboard.type(text);
フォーカスの当たっている要素に key (例:'A', 'Enter') を入力する
await page.keyboard.press(key);
selector で指定した要素に text を入力する
await page.type(selector, text); await page.locator(selector).fill(text); await page.focus(selector); await page.keyboard.type(text);
selector で指定した要素をクリックする
await page.click(selector);
await page.locator(selector).click();
await page.focus(selector); await page.keyboard.type('Enter');
selector で指定した要素をスクロールする
await page.locator(selector).scroll({ scrollTop: 20, scrollLeft: 10 });
selector で指定した要素の HTML を得る
await page.$eval(selector, el => el.outerHTML);
selector で指定した要素の DOM を得る。page.evaluate() の引数である関数の中ではブラウザで動作する document オブジェクトを参照することができます。console.log() は DevTools の [Console] に書き込まれます。
await page.evaluate(() => {
const body = document.querySelector('body');
Array.from(body.children).forEach((el) => {
console.log(el);
});
});
また、下記の様にして要素の各情報を得ることもできます。
const btn1 = await page.$('button#btn1');
const outerHTML = await (await btn1.getProperty('outerHTML')).jsonValue();
const innerHTML = await (await btn1.getProperty('innerHTML')).jsonValue();
const textContent = await (await btn1.getProperty('textContent')).jsonValue();
const value = await (await btn1.getProperty('value')).jsonValue();
const id = await (await btn1.getProperty('id')).jsonValue();
const className = await (await btn1.getProperty('className')).jsonValue();
保存
画面のスクリーンショットを file (例:'test.png') に保存する。
await page.screenshot({ path: file });
画面のスクリーンショットを PDF (例:'test.pdf') に保存する。
await page.pdf({ path: file, format: 'a4' });
その他
msec ミリ秒待つ
const sleep = require("node:timers/promises").setTimeout;
await sleep(msec);
package.json に "type": "module" を指定しているため、Puppeteer スクリプトは ES Module として動作します。ES Module から ES Module 未対応の CommonJS ライブラリを呼び出すには下記の様に記述します。
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const someCommonJSLib = require('some-commonjs-lib');