<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/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="2"><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/api/puppeteer.elementhandle"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/api/puppeteer.elementhandle"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/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="/api/puppeteer.page._">Page.$()</a> method.</p>
<p>ElementHandle prevents the DOM element from being garbage-collected unless the handle is <ahref="/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="/api/puppeteer.page._eval">Page.$eval()</a> and <ahref="/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><p>Property</p></th><th><p>Modifiers</p></th><th><p>Type</p></th><th><p>Description</p></th></tr></thead><tbody><tr><td><p>frame</p></td><td><p><code>readonly</code></p></td><td><p><ahref="/api/puppeteer.frame">Frame</a></p></td><td><p>Frame corresponding to the current handle.</p></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><p>Method</p></th><th><p>Modifiers</p></th><th><p>Description</p></th></tr></thead><tbody><tr><td><p><ahref="/api/puppeteer.elementhandle._">$(selector)</a></p></td><td></td><td><p>Queries the current element for an element matching the given selector.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.__">$$(selector)</a></p></td><td></td><td><p>Queries the current element for all elements matching the given selector.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.__eval">$$eval(selector, pageFunction, args)</a></p></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><p><ahref="/api/puppeteer.elementhandle._eval">$eval(selector, pageFunction, args)</a></p></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><p><ahref="/api/puppeteer.elementhandle.autofill">autofill(data)</a></p></td><td></td><td><p>If the element is a form input, you can use <ahref="/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.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.boundingbox">boundingBox()</a></p></td><td></td><td><p>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>).</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.boxmodel">boxModel()</a></p></td><td></td><td><p>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>).</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.click">click(this, options)</a></p></td><td></td><td><p>This method scrolls element into view if needed, and then uses <ahref="/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.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.clickablepoint">clickablePoint(offset)</a></p></td><td></td><td><p>Returns the middle point within an element unless a specific offset is provided.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.contentframe">contentFrame(this)</a></p></td><td></td><td><p>Resolves the frame associated with the element, if any. Always exists for HTMLIFrameElements.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.contentframe_1">contentFrame()</a></p></td><td></td><td></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.drag">drag(this, target)</a></p></td><td></td><td><p>Drags an element over the given element or point.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.draganddrop">dragAndDrop(this, target, options)</a></p></td><td><p><code>deprecated</code></p></td><td><p><strong>Deprecated:</strong></p><p>Use <code>ElementHandle.drop</code> instead.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.dragenter">dragEnter(this, data)</a></p></td><td><p><code>deprecated</code></p></td><td><p><strong>Deprecated:</strong></p><p>Do not use. <code>dragenter</code> will automatically be performed during dragging.</p></td></tr><tr><td><p><ahref="/api/puppeteer.elementhandle.dragover">dragOver(this, data)</a></p></td><td><p><code>deprecated</code></p></td><td><p><strong>Deprecated:</strong></p><p>Do not use. <code>dragover</code> will automatically be performed during dragging.<
