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	Selector	選擇器，用於查詢頁面。CSS 選擇器可以直接傳遞，而 Puppeteer 特定的選擇器語法允許透過文字、a11y 角色和名稱以及 xpath 和 在 shadow root 中組合這些查詢來進行查詢。或者，您可以使用前綴來指定選擇器類型。
pageFunction	Func | string	要在頁面上下文中評估的函式。將會把符合選擇器的元素結果作為第一個參數傳遞給它。
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,
);