本文へスキップ
バージョン: 22.5.0

Puppeteer

Build status npm puppeteer package

ガイド | API | FAQ | コントリビューション | トラブルシューティング​

Puppeteer は、DevTools プロトコル を介して Chrome/Chromium を制御するための高レベル API を提供する Node.js ライブラリです。Puppeteer はデフォルトでヘッドレスモードで実行されますが、フル（「ヘッドフル」）Chrome/Chromium で実行するように設定することもできます。

何ができるか​

ブラウザで手動で行えるほとんどの操作は、Puppeteer を使用して実行できます！ 始め方の一例をいくつか示します。

  • ページのスクリーンショットと PDF を生成します。
  • SPA（シングルページアプリケーション）をクロールし、事前にレンダリングされたコンテンツ（つまり、「SSR」（サーバーサイドレンダリング））を生成します。
  • フォームの送信、UI テスト、キーボード入力などを自動化します。
  • 最新の JavaScript とブラウザ機能を使用して自動化されたテスト環境を作成します。
  • パフォーマンスの問題を診断するために、サイトのタイムライントレースをキャプチャします。
  • Chrome 拡張機能をテストします。.

はじめに​

インストール​

プロジェクトで Puppeteer を使用するには、以下を実行します。

npm i puppeteer
# or using yarn
yarn add puppeteer
# or using pnpm
pnpm i puppeteer

Puppeteer をインストールすると、最新のChrome for Testing（macOS 約 170MB、Linux 約 282MB、Windows 約 280MB）と、Puppeteer と確実に動作することが保証されているchrome-headless-shellバイナリ（Puppeteer v21.6.0 以降）が自動的にダウンロードされます。ブラウザはデフォルトで$HOME/.cache/puppeteerフォルダにダウンロードされます（Puppeteer v19.0.0 以降）。ダウンロードの動作を制御するための設定オプションと環境変数については、設定を参照してください。

Render や Heroku などのホスティングプロバイダーに Puppeteer を使用したプロジェクトをデプロイする場合は、すべてのホスティングプロバイダーが$HOME/.cacheをプロジェクトのデプロイメントに含めるわけではないため、キャッシュの場所をプロジェクトフォルダ内に再構成する必要がある場合があります（以下の例を参照）。

ブラウザのインストールを含まない Puppeteer のバージョンについては、puppeteer-coreを参照してください。

TypeScript と共に使用する場合、サポートされている最小の TypeScript バージョンは4.7.4です。

設定​

Puppeteer は、設定ファイルを使用してカスタマイズできるいくつかのデフォルトを使用します。

たとえば、Puppeteer がブラウザのインストールに使用するデフォルトのキャッシュディレクトリを変更するには、アプリケーションのルートに、以下のような内容の.puppeteerrc.cjs（またはpuppeteer.config.cjs）を追加します。

const {join} = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

設定ファイルを追加した後、有効にするにはpuppeteerを削除して再インストールする必要があります。

詳細については、設定ガイドを参照してください。

puppeteer-core​

v1.7.0 以降のすべてのリリースでは、2 つのパッケージを公開しています。

puppeteerはブラウザ自動化のための製品です。インストールされると、Chrome のバージョンをダウンロードし、puppeteer-coreを使用して駆動します。エンドユーザー製品であるため、puppeteerはカスタマイズ可能な適切なデフォルトを使用して、いくつかのワークフローを自動化します。

puppeteer-coreは、DevTools プロトコルをサポートするものを駆動するのに役立つライブラリです。ライブラリであるため、puppeteer-coreはプログラムインターフェースを介して完全に駆動され、デフォルトは想定されず、puppeteer-coreはインストール時に Chrome をダウンロードしません。

リモートブラウザに接続している場合、または自分でブラウザを管理している場合は、puppeteer-coreを使用する必要があります。自分でブラウザを管理している場合は、明示的なexecutablePath（または標準の場所にインストールされている場合はchannel）を使用してpuppeteer.launchを呼び出す必要があります。

puppeteer-coreを使用する場合は、インポートを変更することを忘れないでください。

import puppeteer from 'puppeteer-core';

使用方法​

Puppeteer は、Node の最新のメンテナンス LTSバージョンに従います。

Puppeteer は、他のブラウザテストフレームワークを使用しているユーザーにも馴染みがあります。起動/接続するブラウザ、いくつかのページを作成し、Puppeteer の APIを使用して操作します。

詳細な使用方法については、ガイドと例を確認してください。

例​

次の例では、developer.chrome.comでテキスト「automate beyond recorder」を含むブログ記事を検索し、最初の結果をクリックして、ブログ記事の完全なタイトルを出力します。

import puppeteer from 'puppeteer';

(async () => {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate the page to a URL
  await page.goto('https://developer.chrome.com/');

  // Set screen size
  await page.setViewport({width: 1080, height: 1024});

  // Type into search box
  await page.type('.devsite-search-field', 'automate beyond recorder');

  // Wait and click on first result
  const searchResultSelector = '.devsite-result-item-link';
  await page.waitForSelector(searchResultSelector);
  await page.click(searchResultSelector);

  // Locate the full title with a unique string
  const textSelector = await page.waitForSelector(
    'text/Customize and automate'
  );
  const fullTitle = await textSelector?.evaluate(el => el.textContent);

  // Print the full title
  console.log('The title of this blog post is "%s".', fullTitle);

  await browser.close();
})();

デフォルトのランタイム設定​

1. ヘッドレスモードを使用

デフォルトでは、Puppeteer はヘッドレスモードで Chrome を起動します。

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

v22 より前は、Puppeteer はデフォルトで古いヘッドレスモードを起動していました。古いヘッドレスモードは現在chrome-headless-shellとして知られており、個別のバイナリとして提供されています。chrome-headless-shellは通常の Chrome の動作と完全に一致しませんが、完全な Chrome の機能セットが必要ない自動化タスクでは現在、より高性能です。パフォーマンスがユースケースでより重要である場合は、次のようにchrome-headless-shellに切り替えます。

const browser = await puppeteer.launch({headless: 'shell'});

Chrome の「ヘッドフル」バージョンを起動するには、ブラウザの起動時にheadlessオプションをfalseに設定します。

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

2. Chrome のバンドルバージョンを実行

デフォルトでは、Puppeteer は特定のバージョンの Chrome をダウンロードして使用するため、その API はすぐに動作することが保証されています。異なるバージョンの Chrome または Chromium で Puppeteer を使用するには、Browserインスタンスを作成する際に実行可能ファイルのパスを渡します。

const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});

Firefox でも Puppeteer を使用できます。詳細については、クロスブラウザサポートの状況を参照してください。

Chromium と Chrome の違いについては、この記事を参照してください。この記事では、Linux ユーザー向けの違いについて説明しています。

3. 新しいユーザープロファイルを作成

Puppeteer は独自のブラウザユーザープロファイルを作成し、毎回実行時にクリーンアップします。

Docker の使用​

Docker ガイドを参照してください。

Chrome 拡張機能の使用​

Chrome 拡張機能ガイドを参照してください。

リソース​

コントリビューション​

Puppeteer の開発の概要については、コントリビューションガイドをご覧ください。

FAQ​

当社のFAQは当社のサイトに移行しました。