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 the page for. CSS selectors can be passed as-is and a Puppeteer-specific selector syntax allows quering by text, a11y role and name, and xpath and combining these queries across shadow roots. Alternatively, you can specify the selector type using a 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 |
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)
);