<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_FNw8"id="signature">Signature:<aclass="hash-link"aria-label="Direct link to Signature:"title="Direct link to Signature:"href="/next/api/puppeteer.frame#signature"></a></h4>
<h2class="anchor anchorWithStickyNavbar_FNw8"id="remarks">Remarks<aclass="hash-link"aria-label="Direct link to Remarks"title="Direct link to Remarks"href="/next/api/puppeteer.frame#remarks"></a></h2>
<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_FNw8"id="example-1">Example 1<aclass="hash-link"aria-label="Direct link to Example 1"title="Direct link to Example 1"href="/next/api/puppeteer.frame#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_FNw8"id="example-2">Example 2<aclass="hash-link"aria-label="Direct link to Example 2"title="Direct link to Example 2"href="/next/api/puppeteer.frame#example-2"></a></h2>
<h2class="anchor anchorWithStickyNavbar_FNw8"id="example-3">Example 3<aclass="hash-link"aria-label="Direct link to Example 3"title="Direct link to Example 3"href="/next/api/puppeteer.frame#example-3"></a></h2>
<h2class="anchor anchorWithStickyNavbar_FNw8"id="properties">Properties<aclass="hash-link"aria-label="Direct link to Properties"title="Direct link to Properties"href="/next/api/puppeteer.frame#properties"></a></h2>
<h2class="anchor anchorWithStickyNavbar_FNw8"id="methods">Methods<aclass="hash-link"aria-label="Direct link to Methods"title="Direct link to Methods"href="/next/api/puppeteer.frame#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><spanid="_"><ahref="/next/api/puppeteer.frame._">$(selector)</a></span></td><td></td><td><p>Queries the frame for an element matching the given selector.</p></td></tr><tr><td><spanid="__"><ahref="/next/api/puppeteer.frame.__">$$(selector)</a></span></td><td></td><td><p>Queries the frame for all elements matching the given selector.</p></td></tr><tr><td><spanid="__eval"><ahref="/next/api/puppeteer.frame.__eval">$$eval(selector, pageFunction, args)</a></span></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><spanid="_eval"><ahref="/next/api/puppeteer.frame._eval">$eval(selector, pageFunction, args)</a></span></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><spanid="addscripttag"><ahref="/next/api/puppeteer.frame.addscripttag">addScriptTag(options)</a></span></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><spanid="addstyletag"><ahref="/next/api/puppeteer.frame.addstyletag">addStyleTag(options)</a></span></td><td></td><td><p>Adds a <code>HTMLStyleElement</code> into the frame with the desired URL</p></td></tr><tr><td><spanid="addstyletag"><ahref="/next/api/puppeteer.frame.addstyletag_1">addStyleTag(options)</a></span></td><td></td><td><p>Adds a <code>HTMLLinkElement</code> into the frame with the desired URL</p></td></tr><tr><td><spanid="childframes"><ahref="/next/api/puppeteer.frame.childframes">childFrames()</a></span></td><td></td><td><p>An array of child frames.</p></td></tr><tr><td><spanid="click"><ahref="/next/api/puppeteer.frame.click">click(selector, options)</a></span></td><td></td><td><p>Clicks the first element found that matches <code>selector</code>.</p><p><strong>Remarks:</strong></p><p>If <code>click()</code> triggers a navigation event and there's a separate <code>page.waitForNavigation()</code> promise to be resolved, you may end up with a race condition that yields unexpected results. The correct pattern for click and wait for navigation is the following:</p><divclass="language-ts codeBlockContainer_aalF theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_MHx8"><pretabindex="0"class="prism-code language-ts codeBlock_zHgq thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_RjmQ"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">[</span><spanclass="token plain">response</span><spanclass="token punctuation"style="color:#393A34">]</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"></span><spanclass="token builtin">Promise</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">all</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"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">waitForNavigation</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain">waitOptions</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="tokenpunct
