{"id":243,"date":"2018-03-09T14:10:19","date_gmt":"2018-03-09T14:10:19","guid":{"rendered":"http:\/\/loadfocus.com\/blog\/tech\/?p=243"},"modified":"2019-05-09T13:21:55","modified_gmt":"2019-05-09T13:21:55","slug":"how-to-click-on-element-with-puppeteer-and-chrome","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/tech\/2018\/03\/how-to-click-on-element-with-puppeteer-and-chrome","title":{"rendered":"How to Click on Element with Puppeteer and Chrome"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>Puppeteer&#x27;s click waits for the selector, but not for the element to be genuinely interactive.<\/li>\n<li>Wait for visibility explicitly when the page animates or loads content late.<\/li>\n<li>If a click does nothing, check for an overlay intercepting it before blaming the selector.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr --><a href=\"https:\/\/loadfocus.com\">LoadFocus<\/a> &#8211; is a easy to use <a href=\"https:\/\/loadfocus.com\/load-testing\">cloud testing tool<\/a>, and you don&#8217;t need any setup, it runs from the browser. It helps you understand better your Website&#8217;s and WebServices&#8217; performance and find potential bottleneck before your customers do. Run a <a href=\"https:\/\/loadfocus.com\/website-speed-testing\">free website speed test<\/a> today.<\/p>\n<p>Using Puppeteer to interact with the UI elements from web pages is quite simple. All you need to do is to open a new page with Puppeteer:<\/p>\n<pre class=\"lang-jsx\"><code class=\"lang-jsx\">\nconst page = await browser.newPage();\n<\/code><\/pre>\n<p>Then, all you have to do, is identifying the element you want to perform the action, click in our case:<br \/>\n[emaillocker]<\/p>\n<pre class=\"lang-jsx\"><code class=\"lang-jsx\">\nawait page.click('.clickButton');\n<\/code><\/pre>\n<p>Puppeteer comes with a set of options for the click action, all optional:<br \/>\nAccording to the documentation, you can have these options sent to the click action:<\/p>\n<ul>\n<li><strong>button<\/strong> left, right, or middle, defaults to left.<\/li>\n<li><strong>clickCount<\/strong> defaults to 1. See UIEvent.detail.<\/li>\n<li><strong>delay Time<\/strong> to wait between mouse down and mouse up in milliseconds. Defaults to 0.<\/li>\n<\/ul>\n<p>Click method will scroll into view the selected element (if it&#8217;s found, and if the element is not in the viewport) and click in the center of the element.<br \/>\nIf the element is not found, it will throw an error.<\/p>\n<p>More details can be found on the documentation page from Puppeteer: <a href=\"https:\/\/github.com\/GoogleChrome\/puppeteer\/blob\/master\/docs\/api.md\">https:\/\/github.com\/GoogleChrome\/puppeteer\/blob\/master\/docs\/api.md<\/a><\/p>\n<p>Check out more details of <a href=\"https:\/\/loadfocus.com\/blog\/tech\/2017\/12\/how-to-take-screenshots-with-puppeteer-using-headless-chrome-browser\/\">how to take screenshots with Puppeteer using Headless Chrome Browser.<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/loadfocus.com\">LoadFocus<\/a> &#8211; is a easy to use <a href=\"https:\/\/loadfocus.com\/load-testing\">cloud testing tool<\/a>, and you don&#8217;t need any setup, it runs from the browser. It helps you understand better your Website&#8217;s and WebServices&#8217; performance and find potential bottleneck before your customers do. Run a <a href=\"https:\/\/loadfocus.com\/website-speed-testing\">free website speed test<\/a> today.<br \/>\n[\/emaillocker]<!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>Does page.click wait for the element?<\/h3>\n<p>It waits for the selector to appear and it scrolls the element into view, but it does not wait for the element to become genuinely interactive. On animated or late loading pages, wait for visibility explicitly first.<\/p>\n<h3>What happens if the selector is not found?<\/h3>\n<p>Puppeteer throws. That is usually the outcome you want in a test, but it means a click on an optional element needs a guard rather than a bare call.<\/p>\n<h3>The click runs without error but nothing happens. Why?<\/h3>\n<p>Something is almost certainly intercepting it: a cookie banner, a modal backdrop or an invisible overlay sitting above your element. Puppeteer clicks the centre point of the element, so whatever occupies that point receives the event.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2024\/02\/what-is-puppeteer-a-tutorial-on-how-to-use-puppeteer\">What Is Puppeteer?, A Tutorial on How to Use Puppeteer<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/tech\/2017\/12\/how-to-take-screenshots-with-puppeteer-using-headless-chrome-browser\">Take Screenshots With Puppeteer and Headless Chrome<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2018\/02\/visual-ui-regression-testing-with-jest-puppeteer-and-headless-chrome\">UI Regression Testing With Puppeteer and Headless Chrome<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways Puppeteer&#x27;s click waits for the selector, but not for the element to be genuinely interactive. Wait for visibility explicitly when the page animates or loads content late. If a click does nothing, check for an overlay intercepting it before blaming the selector. LoadFocus &#8211; is a easy to use cloud testing tool, and&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/tech\/2018\/03\/how-to-click-on-element-with-puppeteer-and-chrome\" class=\"more-link\" title=\"Read How to Click on Element with Puppeteer and Chrome\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[41,42],"class_list":["post-243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-testing","tag-click-on-elements-with-puppeteer","tag-puppeteer-click"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":4,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/243\/revisions\/337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media\/497"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}