Page.$$eval() 方法

此方法在页面内运行 Array.from(document.querySelectorAll(selector)) 并将结果作为第一个参数传递给 pageFunction。

签名:

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

参数

参数	类型	描述
selector	选择器	要查询的 选择器
pageFunction	Func | string	要在页面上下文中执行的函数。将传递 Array.from(document.querySelectorAll(selector)) 的结果作为其第一个参数。
args	参数	要传递给 pageFunction 的任何其他参数。

返回值

Promise<Awaited<ReturnType<Func>>>

调用 pageFunction 的结果。如果它返回一个元素，它将被包装在一个 ElementHandle 中，否则将返回原始值本身。

备注

如果 pageFunction 返回一个 promise，$$eval 将等待 promise 解析，然后返回其值。

示例 1

// get the amount of divs on the page
const divCount = await page.$$eval('div', divs => divs.length);

// get the text content of all the `.options` elements:
const options = await page.$$eval('div > span.options', options => {
  return options.map(option => option.textContent);
});

如果您使用的是 TypeScript，您可能需要为 pageFunction 的第一个参数提供一个显式类型。默认情况下，它的类型为 Element[]，但您可能需要提供更具体的子类型

示例 2

// if you don't provide HTMLInputElement here, TS will error
// as `value` is not on `Element`
await page.$$eval('input', (elements: HTMLInputElement[]) => {
  return elements.map(e => e.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 allInputValues = await page.$$eval<string[]>(
  'input',
  (elements: HTMLInputElement[]) => elements.map(e => e.textContent)
);