2022-06-28 11:21:17 +00:00
<!doctype html>
2024-04-05 13:15:22 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-22.6.3 docs-doc-page docs-doc-id-api/puppeteer.page.click" data-has-hydrated = "false" >
2022-06-28 11:21:17 +00:00
< head >
< meta charset = "UTF-8" >
2024-04-11 12:01:20 +00:00
< meta name = "generator" content = "Docusaurus v3.2.1" >
2023-11-29 13:34:30 +00:00
< title data-rh = "true" > Page.click() 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.click" > < 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.click() method | Puppeteer" > < meta data-rh = "true" name = "description" content = "This method fetches an element with selector, scrolls it into view if needed, and then uses Page.mouse to click in the center of the element. If there's no element matching selector, the method throws an error." > < meta data-rh = "true" property = "og:description" content = "This method fetches an element with selector, scrolls it into view if needed, and then uses Page.mouse to click in the center of the element. If there's no element matching selector, the method throws an error." > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://pptr.dev/api/puppeteer.page.click" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/api/puppeteer.page.click" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/api/puppeteer.page.click" 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-04-11 12:01:20 +00:00
< script src = "/fix-location.js" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.76d942d0.css" >
2024-04-11 15:49:43 +00:00
< script src = "/assets/js/runtime~main.620fd3db.js" defer = "defer" > < / script >
< script src = "/assets/js/main.eedc3260.js" defer = "defer" > < / script >
2022-06-28 11:21:17 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2024-04-11 12:01:20 +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_fXgn" 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 = "/" > 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.6.3< / a > < ul class = "dropdown__menu" > < li > < a class = "dropdown__link" href = "/next/api/puppeteer.page.click" > Next< / a > < / li > < li > < a aria-current = "page" class = "dropdown__link dropdown__link--active" href = "/api/puppeteer.page.click" > 22.6.3< / 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.6.2/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.6.2< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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.1/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.6.1< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.6.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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.5.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 22.5.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10 . 988l4
2023-11-29 13:34:30 +00:00
< p > This method fetches an element with < code > selector< / code > , scrolls it into view if needed, and then uses < a href = "/api/puppeteer.page" > Page.mouse< / a > to click in the center of the element. If there' s no element matching < code > selector< / code > , the method throws an error.< / p >
2024-04-11 12:01:20 +00:00
< h4 class = "anchor anchorWithStickyNavbar_LWe7" id = "signature" > Signature:< a href = "#signature" class = "hash-link" aria-label = "Direct link to Signature:" title = "Direct link to Signature:" > < / a > < / h4 >
2023-11-29 13:34:30 +00:00
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < 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 function" style = "color:#d73a49" > click< / span > < span class = "token punctuation" 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 builtin" > string< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < 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" > Readonly< / span > < span class = "token operator" style = "color:#393A34" > < < / span > < span class = "token plain" > ClickOptions< / span > < span class = "token operator" style = "color:#393A34" > > < / 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 keyword" style = "color:#00009f" > void< / 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__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < 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_LjdS" > < 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_LWe7" 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 > string< / p > < / td > < td > < p > A < code > selector< / code > to search for element to click. If there are multiple elements satisfying the < code > selector< / code > , the first will be clicked< / p > < / td > < / tr > < tr > < td > < p > options< / p > < / td > < td > < p > Readonly< < a href = "/api/puppeteer.clickoptions" > ClickOptions< / a > > < / p > < / td > < td > < p > < em > (Optional)< / em > < code > Object< / code > < / p > < / td > < / tr > < / tbody > < / table >
2023-11-29 13:34:30 +00:00
< p > < strong > Returns:< / strong > < / p >
< p > Promise< void> < / p >
< p > Promise which resolves when the element matching < code > selector< / code > is successfully clicked. The Promise will be rejected if there is no element matching < code > selector< / code > .< / p >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "remarks" > Remarks< a href = "#remarks" class = "hash-link" aria-label = "Direct link to Remarks" title = "Direct link to Remarks" > < / a > < / h2 >
< p > Bear in mind that 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 >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token plain" > response< / 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 keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > < / span > < span class = "token builtin" > Promise< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > all< / 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" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > waitForNavigation< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > waitOptions< / 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" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > click< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > selector< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > clickOptions< / 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 punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < 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_LjdS" > < 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 >
2024-01-02 10:04:58 +00:00
< p > Shortcut for < a href = "/api/puppeteer.frame.click" > page.mainFrame().click(selector[, options])< / a > .< / p > < / div > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/api/puppeteer.page.browsercontext" > < div class = "pagination-nav__sublabel" > Previous< / div > < div class = "pagination-nav__label" > Page.browserContext< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/api/puppeteer.page.close" > < div class = "pagination-nav__sublabel" > Next< / div > < div class = "pagination-nav__label" > Page.close< / div > < / a > < / nav > < / div > < / div > < div class = "col col--3" > < div class = "tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop" > < ul class = "table-of-contents table-of-contents__left-border" > < li > < a href = "#parameters" class = "table-of-contents__link toc-highlight" > Parameters< / a > < / li > < li > < a href = "#remarks" class = "table-of-contents__link toc-highlight" > Remarks< / a > < / li > < / ul > < / div > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer footer--dark" > < div class = "container container-fluid" > < div class = "row footer__links" > < div class = "col footer__col" > < div class = "footer__title" > Community< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a href = "https://stackoverflow.com/questions/tagged/puppeteer" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Stack Overflow< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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 class = "footer__item" > < a href = "https://twitter.com/chromedevtools" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Twitter< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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 class = "footer__item" > < a href = "https://goo.gle/devtools-youtube" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > YouTube< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < 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 > < / ul > < / div > < / div > < div class = "footer__bottom text--center" > < div class = "footer__copyright" > Copyright © 2024 Google, Inc.< / div > < / div > < / div > < / footer > < / div >
2022-06-28 11:21:17 +00:00
< / body >
< / html >
