<titledata-rh="true">Frame 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.frame"><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="Frame class | Puppeteer"><metadata-rh="true"name="description"content="Represents a DOM frame."><metadata-rh="true"property="og:description"content="Represents a DOM frame."><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://pptr.dev/next/api/puppeteer.frame"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/next/api/puppeteer.frame"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/next/api/puppeteer.frame"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>To understand frames, you can think of frames as <code><iframe></code> elements. Just like iframes, frames can be nested, and when JavaScript is executed in a frame, the JavaScript does not effect frames inside the ambient frame the JavaScript executes in.</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>Frame lifecycles are controlled by three events that are all dispatched on the parent <ahref="/next/api/puppeteer.frame.page">page</a>:</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>Frame</code> class.</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>
<p>At any point in time, <ahref="/next/api/puppeteer.page">pages</a> expose their current frame tree via the <ahref="/next/api/puppeteer.page.mainframe">Page.mainFrame()</a> and <ahref="/next/api/puppeteer.frame.childframes">Frame.childFrames()</a> methods.</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>
<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>
<p>An example of getting text from an iframe element:</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>
<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="/next/api/puppeteer.frame._">$(selector)</a></p></td><td></td><td><p>Queries the frame for an element matching the given selector.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.__">$$(selector)</a></p></td><td></td><td><p>Queries the frame for all elements matching the given selector.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.__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 frame.</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="/next/api/puppeteer.frame._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 frame.</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="/next/api/puppeteer.frame.addscripttag">addScriptTag(options)</a></p></td><td></td><td><p>Adds a <code><script></code> tag into the page with the desired url or content.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.addstyletag">addStyleTag(options)</a></p></td><td></td><td><p>Adds a <code>HTMLStyleElement</code> into the frame with the desired URL</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.addstyletag_1">addStyleTag(options)</a></p></td><td></td><td><p>Adds a <code>HTMLLinkElement</code> into the frame with the desired URL</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.childframes">childFrames()</a></p></td><td></td><td><p>An array of child frames.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.click">click(selector, options)</a></p></td><td></td><td><p>Clicks the first element found that matches <code>selector</code>.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.content">content()</a></p></td><td></td><td><p>The full HTML contents of the frame, including the DOCTYPE.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.evaluate">evaluate(pageFunction, args)</a></p></td><td></td><td><p>Behaves identically to <ahref="/next/api/puppeteer.page.evaluate">Page.evaluate()</a> except it's run within the context of this frame.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.evaluatehandle">evaluateHandle(pageFunction, args)</a></p></td><td></td><td><p>Behaves identically to <ahref="/next/api/puppeteer.page.evaluatehandle">Page.evaluateHandle()</a> except it's run within the context of this frame.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.focus">focus(selector)</a></p></td><td></td><td><p>Focuses the first element that matches the <code>selector</code>.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.frameelement">frameElement()</a></p></td><td></td><td></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.goto">goto(url, options)</a></p></td><td></td><td><p>Navigates the frame to the given <code>url</code>.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.hover">hover(selector)</a></p></td><td></td><td><p>Hovers the pointer over the center of the first element that matches the <code>selector</code>.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.isdetached">isDetached()</a></p></td><td><p><code>deprecated</code></p></td><td><p>Is<code>true</code> if the frame has been detached. Otherwise, <code>false</code>.</p><p><strong>Deprecated:</strong></p><p>Use the <code>detached</code> getter.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.isoopframe">isOOPFrame()</a></p></td><td></td><td><p>Is <code>true</code> if the frame is an out-of-process (OOP) frame. Otherwise, <code>false</code>.</p></td></tr><tr><td><p><ahref="/next/api/puppeteer.frame.locator">locator(selector)</a></p></td><td></td><td><p>Creates a locator for the provided selector. See <ahref="/next/api/puppeteer.locator">Lo
