Skip to content

Latest commit

 

History

History
123 lines (80 loc) · 3.11 KB

puppeteer.page.__eval.md

File metadata and controls

123 lines (80 loc) · 3.11 KB
Raw
sidebar_label
Page.$$eval

Page.$$eval() method

This method returns all elements matching the selector and passes the resulting array as the first argument to the pageFunction.

Signature:

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

Parameters

Parameter

Type

Description

selector

Selector

selector to query page for. CSS selectors can be passed as-is and a Puppeteer-specific seletor syntax allows quering by text, a11y role and name, and xpath and combining these queries across shadow roots. Alternatively, you can specify a selector type using a prefix prefix.

pageFunction

Func | string

the function to be evaluated in the page context. Will be passed an array of matching elements as its first argument.

args

Params

any additional arguments to pass through to pageFunction.

**Returns:**

Promise<Awaited<ReturnType<Func>>>

The result of calling pageFunction. If it returns an element it is wrapped in an ElementHandle, else the raw value itself is returned.

Remarks

If pageFunction returns a promise $$eval will wait for the promise to resolve and then return its value.

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

If you are using TypeScript, you may have to provide an explicit type to the first argument of the pageFunction. By default it is typed as Element[], but you may need to provide a more specific sub-type:

Example 2

await page.$$eval('input', elements => {
  return elements.map(e => e.value);
});

The compiler should be able to infer the return type from the pageFunction you provide. If it is unable to, you can use the generic type to tell the compiler what return type you expect from $$eval:

Example 3

const allInputValues = await page.$$eval('input', elements =>
  elements.map(e => e.textContent)
);