<titledata-rh="true">Query Selectors | 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/guides/query-selectors"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docsearch:counter"content="2"><metadata-rh="true"property="og:title"content="Query Selectors | Puppeteer"><metadata-rh="true"name="description"content="Queries are the primary mechanism for interacting with the DOM on your site. For example, a typical workflow goes like:"><metadata-rh="true"property="og:description"content="Queries are the primary mechanism for interacting with the DOM on your site. For example, a typical workflow goes like:"><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://pptr.dev/guides/query-selectors"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/guides/query-selectors"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://pptr.dev/guides/query-selectors"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">
You can read more about it <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#attributes"target="_blank"rel="noopener noreferrer">here</a>.</p></blockquote><p>Then <code>custom-element >>> h2</code> will return <code>h2</code>, but <code>custom-element >>>> h2</code> will return nothing since the inner <code>h2</code> is in a deeper shadow root.</p><h3class="anchor anchorWithStickyNavbar_LWe7"id="p-elements"><code>P</code>-elements<ahref="#p-elements"class="hash-link"aria-label="Direct link to p-elements"title="Direct link to p-elements"></a></h3><p><code>P</code> elements are <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements"target="_blank"rel="noopener noreferrer">pseudo-elements</a> with a <code>-p</code> vendor prefix. It allows you to enhance your selectors with Puppeteer-specific query engines such as XPath, text queries, and ARIA.</p><h4class="anchor anchorWithStickyNavbar_LWe7"id="text-selectors--p-text">Text selectors (<code>-p-text</code>)<ahref="#text-selectors--p-text"class="hash-link"aria-label="Direct link to text-selectors--p-text"title="Direct link to text-selectors--p-text"></a></h4><p>Text selectors will select "minimal" elements containing the given text, even within (open) shadow roots. Here, "minimum" means the deepest elements that contain a given text, but not their parents (which technically will also contain the given text).</p><h5class="anchor anchorWithStickyNavbar_LWe7"id="example-1">Example<ahref="#example-1"class="hash-link"aria-label="Direct link to Example"title="Direct link to Example"></a></h5><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> element </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">waitForSelector</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'div ::-p-text(My name is Jun)'</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"></span><spanclass="token comment"style="color:#999988;font-style:italic">// You can also use escapes.</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> element </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">waitForSelector</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token string"style="color:#e3116c">':scope >>> ::-p-text(My name is Jun \\(pronounced like "June"\\))'</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass
