2022-06-28 11:21:17 +00:00
<!doctype html>
2024-05-06 08:01:08 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-22.8.0 docs-doc-page docs-doc-id-api/puppeteer.page.waitforselector" data-has-hydrated = "false" >
2022-06-28 11:21:17 +00:00
< head >
< meta charset = "UTF-8" >
2024-05-06 08:01:08 +00:00
< meta name = "generator" content = "Docusaurus v3.3.2" >
2023-11-29 13:34:30 +00:00
< title data-rh = "true" > Page.waitForSelector() method | Puppeteer< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://pptr.dev/api/puppeteer.page.waitforselector" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docsearch:counter" content = "2" > < meta data-rh = "true" property = "og:title" content = "Page.waitForSelector() method | Puppeteer" > < meta data-rh = "true" name = "description" content = "Wait for the selector to appear in page. If at the moment of calling the method the selector already exists, the method will return immediately. If the selector doesn't appear after the timeout milliseconds of waiting, the function will throw." > < meta data-rh = "true" property = "og:description" content = "Wait for the selector to appear in page. If at the moment of calling the method the selector already exists, the method will return immediately. If the selector doesn't appear after the timeout milliseconds of waiting, the function will throw." > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://pptr.dev/api/puppeteer.page.waitforselector" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/api/puppeteer.page.waitforselector" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/api/puppeteer.page.waitforselector" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://DVKY664LG7-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "search" type = "application/opensearchdescription+xml" title = "Puppeteer" href = "/opensearch.xml" >
2023-01-11 15:09:01 +00:00
2024-05-06 08:01:08 +00:00
< script src = "/fix-location.js" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.67634aff.css" >
2024-05-07 07:35:28 +00:00
< script src = "/assets/js/runtime~main.2e615ea3.js" defer = "defer" > < / script >
2024-05-06 08:01:08 +00:00
< script src = "/assets/js/main.7c4b2da5.js" defer = "defer" > < / script >
2022-06-28 11:21:17 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2024-05-06 08:01:08 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; t ( null !== e ? e : "light" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_gu5v" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedComponent_mlkZ themedComponent--light_NVdE" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedComponent_mlkZ themedComponent--dark_xIcU" > < / div > < b class = "navbar__title text--truncate" > Puppeteer< / b > < / a > < a class = "navbar__item navbar__link" href = "/category/introduction" > Docs< / a > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/api/puppeteer.puppeteernode" > Puppeteer API< / a > < a class = "navbar__item navbar__link" href = "/browsers-api/" > @puppeteer/browsers API< / a > < / div > < div class = "navbar__items navbar__items--right" > < div class = "navbar__item dropdown dropdown--hoverable dropdown--right" > < a class = "navbar__link" aria-haspopup = "true" aria-expanded = "false" role = "button" href = "/" > 22.8.0< / a > < ul class = "dropdown__menu" > < li > < a class = "dropdown__link" href = "/next/api/puppeteer.page.waitforselector" > Next< / a > < / li > < li > < a aria-current = "page" class = "dropdown__link dropdown__link--active" href = "/api/puppeteer.page.waitforselector" > 22.8.0< / a > < / li > < li > < hr class = "dropdown-separator" > < / li > < li class = "dropdown-archived-versions" > < b > Archived versions< / b > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v22.7.1/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.7.1< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_T11m" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v22.7.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.7.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_T11m" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v22.6.5/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.6.5< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_T11m" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v22.6.4/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.6.4< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_T11m" > < path fill = "currentColor" d = "M21 13v10h-2
2023-11-29 13:34:30 +00:00
< p > Wait for the < code > selector< / code > to appear in page. If at the moment of calling the method the < code > selector< / code > already exists, the method will return immediately. If the < code > selector< / code > doesn' t appear after the < code > timeout< / code > milliseconds of waiting, the function will throw.< / p >
2024-05-06 08:01:08 +00:00
< h4 class = "anchor anchorWithStickyNavbar_FNw8" id = "signature" > Signature:< a href = "#signature" class = "hash-link" aria-label = "Direct link to Signature:" title = "Direct link to Signature:" > < / a > < / h4 >
< div class = "language-typescript codeBlockContainer_aalF theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_MHx8" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_zHgq thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_RjmQ" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > class< / span > < span class = "token plain" > < / span > < span class = "token class-name" > Page< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token generic-function function" style = "color:#d73a49" > waitForSelector< / span > < span class = "token generic-function generic class-name operator" style = "color:#393A34" > < < / span > < span class = "token generic-function generic class-name" > Selector < / span > < span class = "token generic-function generic class-name keyword" style = "color:#00009f" > extends< / span > < span class = "token generic-function generic class-name" > < / span > < span class = "token generic-function generic class-name builtin" > string< / span > < span class = "token generic-function generic class-name operator" style = "color:#393A34" > > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > selector< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > Selector< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > options< / span > < span class = "token operator" style = "color:#393A34" > ?< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > WaitForSelectorOptions< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" > Promise< / span > < span class = "token operator" style = "color:#393A34" > < < / span > < span class = "token plain" > ElementHandle< / span > < span class = "token operator" style = "color:#393A34" > < < / span > < span class = "token plain" > NodeFor< / span > < span class = "token operator" style = "color:#393A34" > < < / span > < span class = "token plain" > Selector< / span > < span class = "token operator" style = "color:#393A34" > > > < / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > |< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > null< / span > < span class = "token operator" style = "color:#393A34" > > < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_Sd8_" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_LnQD" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_t3l1" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_IiZV" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< h2 class = "anchor anchorWithStickyNavbar_FNw8" id = "parameters" > Parameters< a href = "#parameters" class = "hash-link" aria-label = "Direct link to Parameters" title = "Direct link to Parameters" > < / a > < / h2 >
2024-03-25 13:06:32 +00:00
< table > < thead > < tr > < th > < p > Parameter< / p > < / th > < th > < p > Type< / p > < / th > < th > < p > Description< / p > < / th > < / tr > < / thead > < tbody > < tr > < td > < p > selector< / p > < / td > < td > < p > Selector< / p > < / td > < td > < p > A < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target = "_blank" rel = "noopener noreferrer" > selector< / a > of an element to wait for< / p > < / td > < / tr > < tr > < td > < p > options< / p > < / td > < td > < p > < a href = "/api/puppeteer.waitforselectoroptions" > WaitForSelectorOptions< / a > < / p > < / td > < td > < p > < em > (Optional)< / em > Optional waiting parameters< / p > < / td > < / tr > < / tbody > < / table >
2023-11-29 13:34:30 +00:00
< p > < strong > Returns:< / strong > < / p >
< p > Promise< < a href = "/api/puppeteer.elementhandle" > ElementHandle< / a > < < a href = "/api/puppeteer.nodefor" > NodeFor< / a > < Selector> > | null> < / p >
< p > Promise which resolves when element specified by selector string is added to DOM. Resolves to < code > null< / code > if waiting for hidden: < code > true< / code > and selector is not found in DOM.< / p >
2024-05-06 08:01:08 +00:00
< h2 class = "anchor anchorWithStickyNavbar_FNw8" id = "remarks" > Remarks< a href = "#remarks" class = "hash-link" aria-label = "Direct link to Remarks" title = "Direct link to Remarks" > < / a > < / h2 >
2023-11-29 13:34:30 +00:00
< p > The optional Parameter in Arguments < code > options< / code > are:< / p >
< ul >
< li >
< p > < code > visible< / code > : A boolean wait for element to be present in DOM and to be visible, i.e. to not have < code > display: none< / code > or < code > visibility: hidden< / code > CSS properties. Defaults to < code > false< / code > .< / p >
< / li >
< li >
< p > < code > hidden< / code > : Wait for element to not be found in the DOM or to be hidden, i.e. have < code > display: none< / code > or < code > visibility: hidden< / code > CSS properties. Defaults to < code > false< / code > .< / p >
< / li >
< li >
< p > < code > timeout< / code > : maximum time to wait for in milliseconds. Defaults to < code > 30000< / code > (30 seconds). Pass < code > 0< / code > to disable timeout. The default value can be changed by using the < a href = "/api/puppeteer.page.setdefaulttimeout" > Page.setDefaultTimeout()< / a > method.< / p >
< / li >
< / ul >
2024-05-06 08:01:08 +00:00
< h2 class = "anchor anchorWithStickyNavbar_FNw8" id = "example" > Example< a href = "#example" class = "hash-link" aria-label = "Direct link to Example" title = "Direct link to Example" > < / a > < / h2 >
2023-11-29 13:34:30 +00:00
< p > This method works across navigations:< / p >
2024-05-06 08:01:08 +00:00
< div class = "language-ts codeBlockContainer_aalF theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_MHx8" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_zHgq thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_RjmQ" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > import< / span > < span class = "token plain" > puppeteer < / span > < span class = "token keyword" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' puppeteer' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token keyword" style = "color:#00009f" > async< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > browser < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > puppeteer< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > launch< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > page < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > browser< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > newPage< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > let< / span > < span class = "token plain" > currentURL< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > page< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > waitForSelector< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' img' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > then< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plai
2022-06-28 11:21:17 +00:00
< / body >
< / html >
