JavaScript の評価

Puppeteer は、Puppeteer によって制御されるページのコンテキストで JavaScript 関数を評価できます。

// Import puppeteer
import puppeteer from 'puppeteer';

(async () => {
  // Launch the browser
  const browser = await puppeteer.launch();

  // Create a page
  const page = await browser.newPage();

  // Go to your site
  await page.goto('YOUR_SITE');

  // Evaluate JavaScript
  const three = await page.evaluate(() => {
    return 1 + 2;
  });

  console.log(three);

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

注意

関数はスクリプトコンテキストで定義されますが、実際には Puppeteer によって文字列化され、Chrome DevTools プロトコルを介してターゲットページに送信され、そこで評価されます。つまり、関数はスクリプト内のスコープ変数にアクセスできません。

あるいは、関数本体を文字列として提供することもできます。

// Evaluate JavaScript
const three = await page.evaluate(`
    1 + 2
`);

注意

上記の例は同等の結果を生成しますが、評価された関数で使用可能な型とグローバル変数は不明であることを示しています。特に、TypeScript では、評価された関数によって参照されるオブジェクトが正しいことを確認する必要があります。

戻り値型

評価する関数は値を返すことができます。返された値がプリミティブ型の場合、前の例のように、Puppeteer によってスクリプトコンテキストのプリミティブ型に自動的に変換されます。

スクリプトがオブジェクトを返す場合、Puppeteer はそれを JSON にシリアル化し、スクリプト側で再構築します。このプロセスは、DOM ノードを返す場合など、常に正しい結果を生成するとは限りません。

const body = await page.evaluate(() => {
  return document.body;
});
console.log(body); // {}, unexpected!

返されたオブジェクトを操作するために、Puppeteer は参照によってオブジェクトを返す方法を提供します。

const body = await page.evaluateHandle(() => {
  return document.body;
});
console.log(body instanceof ElementHandle); // true

返されたオブジェクトは、JSHandle または ElementHandle のいずれかです。ElementHandle は JSHandle を拡張し、DOM 要素に対してのみ作成されます。

ハンドルで使用可能なメソッドの詳細については、API ドキュメント を参照してください。

evaluate 関数への引数の渡し

関数に引数を渡すことができます。

const three = await page.evaluate(
  (a, b) => {
    return 1 + 2;
  },
  1,
  2
);

引数は、プリミティブ値または JSHandle である場合があります。

ノート

Page、JSHandle、ElementHandle は、JavaScript を評価するためのいくつかの異なるヘルパーを提供しますが、それらはすべてこのガイドで概説されている基本原則に従います。