<titledata-rh="true">Page.$$eval() method | Puppeteer</title><metadata-rh="true"name="viewport"content="width=device-width,initial-scale=1"><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:url"content="https://pptr.dev/api/puppeteer.page.__eval"><metadata-rh="true"property="og:locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docsearch:counter"content="2"><metadata-rh="true"property="og:title"content="Page.$$eval() method | Puppeteer"><metadata-rh="true"name="description"content="This method runs Array.from(document.querySelectorAll(selector)) within the page and passes the result as the first argument to the pageFunction."><metadata-rh="true"property="og:description"content="This method runs Array.from(document.querySelectorAll(selector)) within the page and passes the result as the first argument to the pageFunction."><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://pptr.dev/api/puppeteer.page.__eval"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/api/puppeteer.page.__eval"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/api/puppeteer.page.__eval"hreflang="x-default"><linkdata-rh="true"rel="preconnect"href="https://DVKY664LG7-dsn.algolia.net"crossorigin="anonymous"><linkrel="search"type="application/opensearchdescription+xml"title="Puppeteer"href="/opensearch.xml">
<p>This method runs <code>Array.from(document.querySelectorAll(selector))</code> within the page and passes the result as the first argument to the <code>pageFunction</code>.</p>
<h4class="anchor anchorWithStickyNavbar_LWe7"id="signature">Signature:<ahref="#signature"class="hash-link"aria-label="Direct link to Signature:"title="Direct link to Signature:"></a></h4>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="parameters">Parameters<ahref="#parameters"class="hash-link"aria-label="Direct link to Parameters"title="Direct link to Parameters"></a></h2>
<table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>selector</td><td>Selector</td><td>the <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors"target="_blank"rel="noopener noreferrer">selector</a> to query for</td></tr><tr><td>pageFunction</td><td>Func | string</td><td>the function to be evaluated in the page context. Will be passed the result of <code>Array.from(document.querySelectorAll(selector))</code> as its first argument.</td></tr><tr><td>args</td><td>Params</td><td>any additional arguments to pass through to <code>pageFunction</code>.</td></tr></tbody></table>
<p>The result of calling <code>pageFunction</code>. If it returns an element it is wrapped in an <ahref="/api/puppeteer.elementhandle">ElementHandle</a>, else the raw value itself is returned.</p>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="remarks">Remarks<ahref="#remarks"class="hash-link"aria-label="Direct link to Remarks"title="Direct link to Remarks"></a></h2>
<p>If <code>pageFunction</code> returns a promise <code>$$eval</code> will wait for the promise to resolve and then return its value.</p>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="example-1">Example 1<ahref="#example-1"class="hash-link"aria-label="Direct link to Example 1"title="Direct link to Example 1"></a></h2>
<divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic">// get the amount of divs on the page</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> divCount </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">$$eval</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'div'</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"> divs </span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"> divs</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token plain">length</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic">// get the text content of all the `.options` elements:</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> options </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">$$eval</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'div > span.options'</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"> options </span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">return</span><spanclass="token plain"> options</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">map</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain">option </span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"> option</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token plain">textContent</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="but
<p>If you are using TypeScript, you may have to provide an explicit type to the first argument of the <code>pageFunction</code>. By default it is typed as <code>Element[]</code>, but you may need to provide a more specific sub-type:</p>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="example-2">Example 2<ahref="#example-2"class="hash-link"aria-label="Direct link to Example 2"title="Direct link to Example 2"></a></h2>
<p>The compiler should be able to infer the return type from the <code>pageFunction</code> you provide. If it is unable to, you can use the generic type to tell the compiler what return type you expect from <code>$$eval</code>:</p>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="example-3">Example 3<ahref="#example-3"class="hash-link"aria-label="Direct link to Example 3"title="Direct link to Example 3"></a></h2>
<divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic">// The compiler can infer the return type in this case, but if it can't</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic">// or if you want to be more explicit, provide it as the generic type.</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> allInputValues </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token generic-function function"style="color:#d73a49">$$eval</span><spanclass="token generic-function generic class-name operator"style="color:#393A34"><</span><spanclass="token generic-function generic class-name builtin">string</span><spanclass="token generic-function generic class-name punctuation"style="color:#393A34">[</span><spanclass="token generic-function generic class-name punctuation"style="color:#393A34">]</span><spanclass="token generic-function generic class-name operator"style="color:#393A34">></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token string"style="color:#e3116c">'input'</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain">elements</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"> HTMLInputElement</span><spanclass="token punctuation"style="color:#393A34">[</span><spanclass="token punctuation"style="color:#393A34">]</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"> elements</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">map</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain">e </span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"> e</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token plain">textContent</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgviewBox="0 0 24 24"class="copyButtonIcon_y97N"><pathfill="currentColor"d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgviewBox="0 0 24 24"class="copyButtonSuccessIcon_LjdS"><pathfill="currentColor"d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L
