<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>Method</th><th>Modifiers</th><th>Description</th></tr></thead><tbody><tr><td><ahref="/next/api/puppeteer.frame._">$</a></td><td></td><td>Queries the frame for an element matching the given selector.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.__">$$</a></td><td></td><td>Queries the frame for all elements matching the given selector.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.__eval">$$eval</a></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><ahref="/next/api/puppeteer.frame._eval">$eval</a></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><ahref="/next/api/puppeteer.frame._x">$x</a></td><td></td><td></td></tr><tr><td><ahref="/next/api/puppeteer.frame.addscripttag">addScriptTag</a></td><td></td><td>Adds a <code><script></code> tag into the page with the desired url or content.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.addstyletag">addStyleTag</a></td><td></td><td>Adds a <code>HTMLStyleElement</code> into the frame with the desired URL</td></tr><tr><td><ahref="/next/api/puppeteer.frame.addstyletag_1">addStyleTag</a></td><td></td><td>Adds a <code>HTMLLinkElement</code> into the frame with the desired URL</td></tr><tr><td><ahref="/next/api/puppeteer.frame.childframes">childFrames</a></td><td></td><td>An array of child frames.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.click">click</a></td><td></td><td>Clicks the first element found that matches <code>selector</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.content">content</a></td><td></td><td>The full HTML contents of the frame, including the DOCTYPE.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.evaluate">evaluate</a></td><td></td><td>Behaves identically to <ahref="/next/api/puppeteer.page.evaluate">Page.evaluate()</a> except it's run within the the context of this frame.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.evaluatehandle">evaluateHandle</a></td><td></td><td>Behaves identically to <ahref="/next/api/puppeteer.page.evaluatehandle">Page.evaluateHandle()</a> except it's run within the context of this frame.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.focus">focus</a></td><td></td><td>Focuses the first element that matches the <code>selector</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.goto">goto</a></td><td></td><td>Navigates the frame to the given <code>url</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.hover">hover</a></td><td></td><td>Hovers the pointer over the center of the first element that matches the <code>selector</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.isdetached">isDetached</a></td><td></td><td>Is<code>true</code> if the frame has been detached. Otherwise, <code>false</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.isoopframe">isOOPFrame</a></td><td></td><td>Is <code>true</code> if the frame is an out-of-process (OOP) frame. Otherwise, <code>false</code>.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.locator">locator</a></td><td></td><td>Creates a locator for the provided selector. See <ahref="/next/api/puppeteer.locator">Locator</a> for details and supported actions.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.locator_1">locator</a></td><td></td><td>Creates a locator for the provided function. See <ahref="/next/api/puppeteer.locator">Locator</a> for details and supported actions.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.name">name</a></td><td></td><td>The frame's <code>name</code> attribute as specified in the tag.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.page">page</a></td><td></td><td>The page associated with the frame.</td></tr><tr><td><ahref="/next/api/puppeteer.frame.parentfram
