ヘッドレスクロームを簡単に制御するためのPuppeteerの使用

投稿日: 2022-04-20 2022-04-20

プログラムでさまざまなページに移動したり、スクリーンショットを撮ったり、Webサイトのコンテンツをスクレイプしたり、PDFを作成したり、テストを実行したりする簡単な方法はどうでしょうか。 Chromeチームによる新しいライブラリPuppeteer、Chrome DevToolsプロトコルを抽象化するNode.jsライブラリを使用して、非常に簡単に実行できるようになりました。

入門

開始する最も速い方法は、 Try Puppeteer を使用することです。これは、ブラウザーでPuppeteerを直接操作できるツールです。

ただ遊んでいるだけではなく、もっと深刻なことでPuppeteerを探索したい場合は、Yarnまたはnpmを使用して実際にライブラリをNodeプロジェクトに追加する必要があります。

$ yarn add puppeteer

# or, using npm:
$ npm install puppeteer

次に、 puppeteer を要求するだけで、ビジネスに取り掛かることができます。

index.js

'use strict';

使用法

要素の評価

これは、Puppeteerを使用して Hello World に関するWikipediaの記事に移動し、記事の最初の段落を抽出して結果をコンソールに出力する簡単なHelloWorldの例です。

'use strict';

const puppeteer = require('puppeteer');

async function helloWorld() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://en.wikipedia.org/wiki/%22Hello,_World!%22_program');

  const firstPar = await page.$eval('#mw-content-text p', el => el.innerText);

  console.log(firstPar); // A "Hello, World!" program is a computer program that outputs ...

  await browser.close();
}

helloWorld();

PuppeteerがpromiseベースのAPIを公開していることを考えると、非同期関数を使用して、従うべき一連の手順を定義するのは簡単です。

上記では、ページインスタンスで $ eval を使用して、セレクターに一致する最初の要素を取得し、その内部テキストを抽出しました。ページには、セレクターに一致するすべての要素を選択するための $$evalメソッドもあります。

$メソッドと$$メソッドもあります。これらは類似していますが、代わりにelementHandleを返します。要素のハンドルはクリックまたはタップできます。

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

Puppeteerを使用してページまたは要素のスクリーンショットを撮るのも同じくらい簡単です。 Alligator.io のホームページのスクリーンショットを撮り、それをディスクに保存する簡単な例を次に示します。

async function takeScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://alligator.io/');

  await page.screenshot({ path: 'hello-alligator.png' });

  await browser.close();
}

takeScreenshot();

🎩あなたが私に尋ねればかなり魔法です！ここで、そのスクリーンショットに満足していないと言います。代わりに、低品質のJpeg画像が必要であり、ビューポートの正確なサイズも制御する必要があります。これは、さらにいくつかのオプションを使用して簡単に実行できます。

async function takeScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://alligator.io/');

  await page.setViewport({
    width: 1440,
    height: 900
  });

  await page.screenshot({
    path: 'hello-alligator.jpg',
    type: 'jpeg',
    quality: 20
  });

  await browser.close();
}

takeScreenshot();

PDFの生成も同様に簡単です。

async function pdf() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://alligator.io/');

  await page.pdf({
    path: 'hello-alligator.pdf'
  });

  await browser.close();
}

pdf();

ページとの対話

内部で実際のChromeブラウザインスタンスを効果的に制御していることを考えると、たとえば、フォームフィールドに入力したり、要素をクリックしたりして、ページを操作することもできます。

次の手順を実行する例を次に示します。

Alligator.ioのホームページにアクセスします
検索入力にフォーカスを置きます
1秒待ちます
ファンシー幅という単語を入力すると、キーストローク間の遅延が150ミリ秒になります
ページにalgolia__resultsのクラスを持つ要素が含まれるのを待ちます
スクリーンショットを撮る

'use strict';

const puppeteer = require('puppeteer');

async function performSearch() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://alligator.io/');

  await page.focus('.algolia__input');
  await page.waitFor(1000);
  await page.type('.algolia__input', 'Fancy', { delay: 150 });

  await page.waitForSelector('.algolia__results');

  await page.screenshot({ path: 'search.png' });
  await browser.close();
}

performSearch();

結果のスクリーンショットは次のとおりです…

🤖この投稿は、ヘッドレスChromeとPuppeteerで可能なことで表面をかろうじて傷つけました。詳細については、広範なAPIドキュメントを参照してください。

getdocs

13036