Download as pdf or txt
Download as pdf or txt
You are on page 1of 6

25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

Open in app Sign up Sign In

Faça login em Medium com o Google

Sonoplastia IASDBV
bvsonoplastia@gmail.com
Published in The Startup

Iasd Boa Viagem


informebv@gmail.com
You have 2 free member-only stories left this month.
Sign up for Medium and get an extra one

Thomas Molnar-Brock Follow

Mar 17, 2020 · 3 min read · · Listen

Save

How to Automate Clicks Using JavaScript


Because using the mouse is so last year

Image Credit: @shagal_sajid on Unsplash

112 3

https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 1/6
25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

If you are like me, you probably use a computer at least once a day. Maybe even
several. Of the time you spend on your computer, I’m willing to wager that a large
portion is spent online. Of that time, quite a lot might be spent clicking on stuff.
This guide will show you how to click in an easier, less repetitive way, which can be
easily customized to your precise clicking needs.

Step One: Fire Up Google Chrome


I will demonstrate this by creating a simple function to click a button on this
website I built, but you should be able to use the idea we are working on for a wide-
variety of custom-clicking tasks.

The first thing to do is to open your Chrome browser. Then, navigate to a website on
which you want to click the same button multiple times.

Step Two: Gain Access to The Mainframe (Well Actually Just The JS Console)
Open the console by right-clicking the element you wish to automate clicks for and
selecting the inspect option. You should see a lot of highlighted lines of HyperText
Markup Language (HTML).

https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 2/6
25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

Inspect the element you wish to click

Now the button should be visible in code on the side of your browser. Find it’s
identification tag by looking at the button element’s properties. We need this id to
write the code that will click it. It should look like the bold part below.

<button id="clickMe" onclick="clicked()">Click Here</button>

Next navigate over to the console tab. It should be on the right of the Elements tab
you were just in.

https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 3/6
25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

The console is to the right of the Elements tab

Step Three: Code It Once


The actual line to enter is very simple. We just need to call JavaScript’s existing
click() function on our chosen element. To do this simply type the following line
into the console and press enter.

document.getElementById("clickMe").click();

Note that if you are using this on your own application then “clickMe” should be
replaced by the element id you found in step two.

If you have followed along on my webpage, you should now see that the line below
the button reads: “You have clicked: 1 times”. Fantastic! But, sadly this took
substantially more work than just clicking the button with your mouse. The next
step will remedy this flaw.

Step Four: Automate, Iterate


The key to making our code useful is to implement a loop, which will allow us to
perform the task of clicking thousands of times at incredible speed. To do this we
can use a simple for-loop, a basic structure of almost any programming language.

To do this, type the following code into your console, being sure to replace
“clickMe” with the id of your chosen button. Press enter when it is all typed out.

for ( let i = 0; i < 1000; i++ ) {


document.getElementById("clickMe").click();
https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 4/6
25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

Now, if all went well, you should rapidly see the counter resting at a healthy 1001.
Congratulations! You have single-handedly automated a common and boring task.
Play around with the 1000 in the loop to make it iterate more or less, and think
about any modifications you might make.

Step Five: Celebrate and Share


Give yourself a break! Let the computer do the work that you previously had to slog
through. Be sure to comment the different applications you applied this to and any
suggestions you have for how I can improve this tutorial. Also, if you want to see
other concepts explained, leave a comment or send me a message requesting help.
Thanks for reading and good luck!

Automation JavaScript Learning To Code Tutorial Chrome

Sign up for Top 5 Stories


By The Startup

Get smarter at building your thing. Join 176,621+ others who receive The Startup's top 5 stories, tools, ideas, books —
delivered straight into your inbox, once a week. Take a look.

Your email

Get this newsletter

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our
privacy practices.

About Help Terms Privacy


https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 5/6
25/03/2023, 14:38 How to Automate Clicks Using JavaScript | by Thomas Molnar-Brock | The Startup | Medium

Get the Medium app

https://medium.com/swlh/how-to-automate-clicks-using-javascript-4855f0f42b60 6/6

You might also like