Page.$eval() 方法

此方法在页面中找到与选择器匹配的第一个元素，并将结果作为第一个参数传给 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>>>;
}

参数

返回值：

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,
);