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>>>;
}

参数

参数	类型	描述
selector	选择器	用于查询页面的选择器。可以直接传递CSS 选择器，并且Puppeteer 特定的选择器语法允许通过文本、a11y 角色和名称以及xpath 查询，并在阴影根之间组合这些查询。或者，您可以使用前缀指定选择器类型。
pageFunction	Func | string	要在页面上下文中求值的函数。会将匹配选择器的元素的结果作为其第一个参数传递。
args	参数	要传递给 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,
);