<titledata-rh="true">ElementHandle class | 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/next/api/puppeteer.elementhandle"><metadata-rh="true"property="og:locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docsearch:counter"content="3"><metadata-rh="true"property="og:title"content="ElementHandle class | Puppeteer"><metadata-rh="true"name="description"content="ElementHandle represents an in-page DOM element."><metadata-rh="true"property="og:description"content="ElementHandle represents an in-page DOM element."><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://pptr.dev/next/api/puppeteer.elementhandle"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/next/api/puppeteer.elementhandle"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/next/api/puppeteer.elementhandle"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>ElementHandle represents an in-page DOM element.</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="remarks">Remarks<ahref="#remarks"class="hash-link"aria-label="Direct link to Remarks"title="Direct link to Remarks"></a></h2>
<p>ElementHandles can be created with the <ahref="/next/api/puppeteer.page._">Page.$()</a> method.</p>
<p>ElementHandle prevents the DOM element from being garbage-collected unless the handle is <ahref="/next/api/puppeteer.jshandle.dispose">disposed</a>. ElementHandles are auto-disposed when their origin frame gets navigated.</p>
<p>ElementHandle instances can be used as arguments in <ahref="/next/api/puppeteer.page._eval">Page.$eval()</a> and <ahref="/next/api/puppeteer.page.evaluate">Page.evaluate()</a> methods.</p>
<p>If you're using TypeScript, ElementHandle takes a generic argument that denotes the type of element the handle is holding within. For example, if you have a handle to a <code><select></code> element, you can type it as <code>ElementHandle<HTMLSelectElement></code> and you get some nicer type checks.</p>
<p>The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the <code>ElementHandle</code> class.</p>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="properties">Properties<ahref="#properties"class="hash-link"aria-label="Direct link to Properties"title="Direct link to Properties"></a></h2>
<table><thead><tr><th>Property</th><th>Modifiers</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>frame</td><td><code>readonly</code></td><td><ahref="/next/api/puppeteer.frame">Frame</a></td><td>Frame corresponding to the current handle.</td></tr></tbody></table>
<h2class="anchor anchorWithStickyNavbar_LWe7"id="methods">Methods<ahref="#methods"class="hash-link"aria-label="Direct link to Methods"title="Direct link to Methods"></a></h2>
<table><thead><tr><th>Method</th><th>Modifiers</th><th>Description</th></tr></thead><tbody><tr><td><ahref="/next/api/puppeteer.elementhandle._">$</a></td><td></td><td>Queries the current element for an element matching the given selector.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.__">$$</a></td><td></td><td>Queries the current element for all elements matching the given selector.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.__eval">$$eval</a></td><td></td><td><p>Runs the given function on an array of elements matching the given selector in the current element.</p><p>If the given function returns a promise, then this method will wait till the promise resolves.</p></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle._eval">$eval</a></td><td></td><td><p>Runs the given function on the first element matching the given selector in the current element.</p><p>If the given function returns a promise, then this method will wait till the promise resolves.</p></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle._x">$x</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.autofill">autofill</a></td><td></td><td>If the element is a form input, you can use <ahref="/next/api/puppeteer.elementhandle.autofill">ElementHandle.autofill()</a> to test if the form is compatible with the browser's autofill implementation. Throws an error if the form cannot be autofilled.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.boundingbox">boundingBox</a></td><td></td><td>This method returns the bounding box of the element (relative to the main frame), or <code>null</code> if the element is <ahref="https://drafts.csswg.org/css-display-4/#box-generation"target="_blank"rel="noopener noreferrer">not part of the layout</a> (example: <code>display: none</code>).</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.boxmodel">boxModel</a></td><td></td><td>This method returns boxes of the element, or <code>null</code> if the element is <ahref="https://drafts.csswg.org/css-display-4/#box-generation"target="_blank"rel="noopener noreferrer">not part of the layout</a> (example: <code>display: none</code>).</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.click">click</a></td><td></td><td>This method scrolls element into view if needed, and then uses <ahref="/next/api/puppeteer.page">Page.mouse</a> to click in the center of the element. If the element is detached from DOM, the method throws an error.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.clickablepoint">clickablePoint</a></td><td></td><td>Returns the middle point within an element unless a specific offset is provided.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.contentframe">contentFrame</a></td><td></td><td>Resolves the frame associated with the element, if any. Always exists for HTMLIFrameElements.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.contentframe_1">contentFrame</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.drag">drag</a></td><td></td><td>Drags an element over the given element or point.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.draganddrop">dragAndDrop</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.dragenter">dragEnter</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.dragover">dragOver</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.drop">drop</a></td><td></td><td>Drops the given element onto the current one.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.drop_1">drop</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.focus">focus</a></td><td></td><td>Calls <ahref="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus"target="_blank"rel="noopener noreferrer">focus</a> on the element.</td></tr><tr><td><ahref="/next/api/puppeteer.elementhandle.hover">hover</a></td><td></td><td>This method scrolls element into view if neede
