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	选择器	要查询的 选择器
pageFunction	Func | string	要在页面上下文中执行的函数。将传递 document.querySelector(selector) 的结果作为其第一个参数。
args	Params	要传递给 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
);