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

Page.$eval() メソッド

このメソッドは、ページ内で `document.querySelector` を実行し、その結果を `pageFunction` の最初の引数として渡します。

シグネチャ:​

class Page {
  $eval<
    Selector extends string,
    Params extends unknown[],
    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
      NodeFor<Selector>,
      Params
    >,
  >(
    selector: Selector,
    pageFunction: Func | string,
    ...args: Params
  ): Promise<Awaited<ReturnType<Func>>>;
}

パラメータ​

パラメータ型説明
selectorセレクタクエリ対象のセレクタ
pageFunctionFunc | stringページコンテキストで評価される関数。`document.querySelector(selector)` の結果が最初の引数として渡されます。
argsParams`pageFunction` に渡す追加の引数。

戻り値

Promise<Awaited<ReturnType<Func>>>

`pageFunction` の呼び出し結果。要素を返す場合は ElementHandle でラップされ、それ以外の場合は生の値が返されます。

備考​

`selector` に一致する要素が見つからない場合、メソッドはエラーをスローします。

`pageFunction` がPromiseを返す場合、`$eval`はPromiseが解決するまで待ち、その後その値を返します。

例1​

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', el => el.outerHTML);

TypeScriptを使用している場合は、`pageFunction`の最初の引数に明示的な型を指定する必要がある場合があります。デフォルトでは`Element`型ですが、より具体的なサブタイプを指定する必要があるかもしれません。

例2​

// if you don't provide HTMLInputElement here, TS will error
// as `value` is not on `Element`
const searchValue = await page.$eval(
  '#search',
  (el: HTMLInputElement) => el.value
);

コンパイラは、提供する`pageFunction`から戻り値の型を推論できるはずです。推論できない場合は、ジェネリック型を使用して、`$eval`から期待する戻り値の型をコンパイラに伝えることができます。

例3​

// The compiler can infer the return type in this case, but if it can't
// or if you want to be more explicit, provide it as the generic type.
const searchValue = await page.$eval<string>(
  '#search',
  (el: HTMLInputElement) => el.value
);