How to Automate Browser Tasks with JavaScript
Вставка
- Опубліковано 24 лип 2018
- In this JavaScript tutorial we'll walk through how to automate browser tasks, specifically we'll see how you can automatically follow and unfollow on LinkedIn as a case study.
The JavaScript code that we'll be writing can be used for the majority of browser automation tasks. Remember there are two key steps to building a script:
1. Selecting the page elements that you want to work with.
2. Looping over the elements and performing whatever task you want to run. In our example we clicked on each button.
For more tutorials, make sure to subscribe to this channel, new coding tutorials are published each week. You can also follow me on:
Twitter: / jordanhudgens
Instagram: / jordanhudgens
GitHub: github.com/jordanhudgens - Наука та технологія
Ran with an issue about the spaces in between the class name, fixed them by adding points instead of spaces to separate each one of them. Great video man.
How can I automate the selection with mouse and past it on other file.
Thank you sir, is it possible to make this an extension
Great video! I'd like to learn hown to move items from my Amazon Save for later items to a wish list. Do you have a video that might help?
I have one script that does everthing but select the correct list from the pop up options.
Got it sometime in December! Found it, edited and it worked! Cleared Amazon Save For Later, and YT Watch Later for the new year.
Pls share the script link
Hi is there a way we can make this script as google extension? how can the google extension read the elements of the active tab?
You can definitely integrate it into a Google extension, but building an extension is quite a bit more complex.
My office account login page auto reload insted login, after filling username and password in tag . Can anyone please help.
trying to use this to automate drop down menu options where all of the drop downs are the same option is there a way to 1. narrow down to just the drop downs i need as a selector and 2. make each of these select " pass" instead of making all selected elements "click"
Is this possible
I want to make a bot that generates a random 4 letters and search for it in (yopmail) and then it searches for a specific word in the email and if it found something it should send that 4 letters to me and if the mail is empty the bot will generates a new word of 4 letters and search again until i turn it off
Can u pls make addtocart button script for me for shopping sites like amazon
Now how can I store my automation code in a separate javascript file and run it when the website opens?
you can use Tampermonkey, Chrome extensiton, to do that easily.
Hi i need some suggestion i want to make a function, problem i am facing is after click a new small pop up windows open i want to click on another button and then close that and then run same process on other with in one div, so can you please temm me click ==> click Yes ==> Cross and repeat for all.
If it changes windows, you wouldn't use something like this. This is for a contained window/document. If you have to work with multiple windows, you'd need to use more of an automation tool
Hey! I'd like to do that too. Did you find a way to do it ?
how can I do this if I have a link of a page?
Hello... How to do copy task using javascript ? for eg. I have table data which contains 100 rows and I want to print that rows data on the console.
You would just need to find the selector that would grab that data. So you'd select the table and then all of the rows inside of it and then you can store that data in a variable and run the copy() method with the variable passed inside of it.
Can you please tell me how to click the Enter button or keyboard event using javascript
This is so helpful. Quick question...how do I create a JavaScript for a stopwatch/timer website to click on the timer option, type in 60 seconds, then click on "Set" and then "Start"?
is violentmonkey better than tampermonkey?
nice vid...
Thank you for the tutorial. This was very informative and now I can automate a project.
Thanks! Is there any way to run a script file? This will need to use the debug console every single time. Is building a chrome extension the only way?
So I am clicking all these links to open up trade tabs in my browsers for a game and when I am clicking my items I have to click there items but if they have a lot then I have to find them by clicking the arrow button so Is there something I can do with find this specific item but if it can’t find it go to the next page?
For that you'd want to have a conditional that checks to see if the link exists, and if not, to click on the pagination link.
I have issues initializing variables in the chrome console, any work around?
The console is slightly different than javascript, you don't technically need to use variable type names such as const, let, or var. You can just provide the variable name.
how can I add time breaks in btn click action?
You can wrap the whole process in a setInterval function
Is it possible to do this with a script? So I can automate that and do this whenever I want with the push of a button. Thank you
You can store it in a function and call that anytime
@@edutechional how to storage the function on the browser?
I make automation solutions but after seeing this ability with javascript i am very surprised. Really love this and the way you explained. Thanks.
How can I click in just a single button without "id", using class to select it?
Not able to work with Class Name on a website. Please suggest a method for clicking buttons using their IDs..
For that you just use "#" ID selector instead of the "." class selector.
@@edutechional Thanks for replying. I will try doing this. Might need your help with writing an HTML code for auto-login..!
@@edutechional Looking forward to learning more from your videos..
Sir what if the class names change , for the next update of the linkedin website, then again we need to see the class name and do right?, instead of that can we use other way, which is consistent?
Correct, if you're using the class name as the selector you'd need to update the script.
is it possible to make auto reply?
That would be a bit extensive for a stand alone script. For something like that I'd use a full automation tool.
Damn it man, I was looking for this for a very long time, it's a very powerful tool thanks a bunch
I'm glad that you found it helpful!
I was looking solution like for whole last week and found the solution, now youtube suggested me this video. Why youtube?? Anyways always there is something more to learn here, thanks.
Glad I could help
Excellent....But what if the document requires a field to be filled and keyUp event to start??? How do u simulate it?
use ui vision or automa extension of chrome
i tried it for liking all comments of this video,but not worked
can anyone fix it and replay
>let d = document.querySelectorAll('.style-scope ytd-toggle- button-renderer style-text size-default')
d.forEach(butn => butn.click())
also i tried to do subscribe as it is a unique element, but failed
It looks like you're trying to select too many classes, the value you pass to querySelectorAll needs to actually select the item or you won't have any node to work with.
I got you homie
let allike = document.querySelectorAll('#like-button')
allike.forEach(btn => btn.children[0].children[0].children[0].click())
it works, Thank you so much!
You're welcome!
what if they aren't considered buttons? What do you do when they are links?
You can call the click function on buttons and links pretty much the same way in JavaScript, you just need to select the link via an id, class, selector, etc
how can i run a JS code everytime the page reloads?? in console the script vanishes everytime the page is reloaded.
Selenium JavaScriptExecuter can prolly help
Use Tampermonkey or Greasemonkey extensions
i want to create a macro so that when i press a specific button on my keyboard to activate the macro it will click on a specific button in the website that im in how can i do that?
maybe selenium?
Just subscribed to you using this method!
Awesome!
@@edutechional Hi ive got a question, if there is no unique class tag for the specific element you want to access what can you do? For example, the button to subscribe shares a class with other html elements which I do not want to click. I would have to getElementById() right? But what if there is no ID?
If there is no id, you can go the other direction, and try to find a unique parent class or ID and then traverse the nodes back to the one that you want.
Hi, thanks, useful video..
i hav a q - it's possible to access it from outside program?
i want do a script that go to specipic url, find element and do some clicks..
i know about selenium and so,
but i search for somthing that dont need reload new tab in any run..
Yes, for that you'd want to use either a tool like selenium, or more of a scripting language, such as Python or Ruby.
Use selenium with python, in python you can call the URL, save it in driver, you can write javascript code and execute it in python with the driver. It works fine.
Please let M know the script for otp verification
Thanks very much for the tutorial. I have really learned a lot but a question remains, how can I make it work at intervals even when I'm not working on my PC, or when I'm offline?
YES PLEASE I NEED THAT TOO
did exatcly that and nothing happened, also many things in the page's code is now changed 2022
Very clear, easy to understand and easy to apply to real life. Thanks a ton!
looking to invite users who have liked a Facebook post to like my page, but it looks like the class is unique for each user. Is it possible to use this code to automate?
Facebook is pretty good at guarding against those types of automated actions, I'd start by seeing if there is a wrapper div with the elements you want and then iterating through the child nodes.
Great tutorial. I've just started to study javascript to help with a hobby and I think this is the first time I've full understood a tutorial.
Do you think I might be able to adapt this to select those buttons already selected and call them to repeat? Basically, to just re-run over the list of selections.
I have an application where the user can select from a group of buttons to build up a group in sequence. Once they have chosen the sequence, I would like them to be able to click on another button to run that sequence again with out further clicks except for the RUN button.
I'm glad that you found it helpful! And absolutely, you can do that, just be careful, many sites will view that type of behavior as spam and block it or even block the account.
Hello & Thanks; Is it possible to use .js to reject (no go to) a website showing in the address bar ? Perhaps have a list of allowable sites . If not in the list , then can't go there . THANKS
Not with a simple JS script, going to URLs is managed by the browser itself.
How to copy from one website to another automated?...i have to copy latitude and longitude from one website to another site's predesigned boxes.
How would you add this to tampermonkey? It works inside the console when the popup is already there. But when I add it to tampermonkey as a script, and reload the page, the popup doesn't close. Any thoughts?
It's going to be unique for each site, but reloading the page will cause the console session to refresh. For something like that, you would want to use a tool that can work between pages, there are quite a few Chrome extension that can do that: www.maketecheasier.com/extensions-automating-repetitive-browsing-tasks/
You should refresh the page right after to get other things to add and automate it with Tampermonkey or Puppetteer.
Those are great options!
Awsome..... Crucial information which other courses or tutorials doesn't give importance to. 😉
so how would you put this into ann application or programm?
Hello !
Can you help me please with a similar code for facebook: auto click all Like Buttons from a page ?
Thank you very much !
Doing that for Facebook Like buttons will be challenging, they dynamically change the like button class name to prevent automated behavior. Sites like that want devs to use their API.
@@edutechional challenging, but not impossible
How would u scroll down in javascript?
You would need to find a specific element on the page, store it in a variable and then call the scrollToView function on it, like this:
const el = document.getElementById("some-id-on-page");
el.scrollIntoView();
dude, You are the man !!!! Thanks a lot :)
I'm glad that you found it helpful!
hi robert can i use for facebook
@@nobledandyson2890 Hi Noble. I think so, but quite frankly I am not sure. I am newbie, ( 4 months playing around) having that said I am not in position to give you definite answer. I think you should address this question to "edutechional", He definitely know what's up.. Let me know if you figure it out. I would be happy to see how is done. Happy coding buddy :)
amazing content, can we get more automation tutorials
Hi how to type in message textbox using javascript
Element.innerHTML="Hi"
Button.click()
But click button doesnt work
(in textbox of Linkedin)
That typically means that there's an issue with the selector
@@edutechional statically also this button not works
So im trying to automate a task at work, and im wondering if theres anyway to send data from the console of one webpage to the console of another web page.
The task i am trying to automate consists of a website that has a prefilled form. I need to get elements from this form, and then copy them into another totally different website. Ive already written a script that pulls the data i need from the form and displays them in the console. Now i need to find a way to send them to the other page’s console. Is this possible?
That's not something that javascript would be able to do, for something like that I'd start with trying a tool such as selenium or building a scraper
I don't understand how you know what portion of the string to use in the query. I've used every possibility and the array returns empty every time.
make sure you have a dot before the class name. If the class is "btn" you have to write document.querySelectorAll(".btn")
That's great advice, thanks!
Hi Edutechional
Plz I want to unsave all posts on facebook at once, what should I do ?
You've follow a very similar process to what I showed with LinkedIn, you'll need to find the elements that you want to click (typically using a class name based query) and then have the script run through all of them.
Great video thank you
never imagined we could do that direct in Chrome!! thanks
It can really help automate a number of processes!
Would this still work with bing and not just google?
Yes, you would just have to update the selectors
But, if I want an applicattion to do this, how do I use a Document form another website?
For that you'd need to use a different type of cool such as Selenium or a tool specific to the language if you're building it for an app.
Is it possible to bypass bot protection and emulating a real User using only requests and Posts in Node ja?
Great tutorial.
Thank you for such an amazing, straightforward content :)
Is there a way to slow down the process? Some sites, but especially apps get suspicious of things like that. Can we set a timer between follows?
You can always set up an interval function to delay it: www.w3schools.com/jsref/met_win_setinterval.asp
I have an excel list of video titles. How can I automatically search them all in youtube and add the first result in each case to a UA-cam Playlist
How we can make apply thes kinds of condition in website to follow my instagram telegrams account...
There are bunch of softwares to do this,
example- RoboTask
Hi, where can I reach you?
how can i follow this script for each links, like i want to open a link first and then inside the link(after clicking on link i have another webpage), i have some data and i want to make a list of those data for every link i open(using this script).
Please ans me if possible
how i make that into a bookmarklet??
This works out real good!
what if the class has lot of spaces in it. I copied it but it didnt work
I'd see if I could select a parent or child element that is more consistent if that's the case.
Hello sir, can u pls tell me about VP macro Javascript ?
Does this work the same with other websites?
Yes just you have to change the class of element
Can i get js codes for click "Add friend" on Facebook???
But how do u "pack" the codes to make them reusable without writing them every single time?
By extension like automa or ui vision
Will this work with links on a page? Say that I have several clickable text elements on a page; Is there a way to use something like this to find all of the ones that have certain text within the url and select those? Currently, I keep getting "thing I typed is not a valid selector" error. If I search for the class; Will it be able to select the text without a button element?
Great tutorial!
I was wondering, what if I had to enter text into a webform, can that be achieved using the developer console?
What if that data is coming from a csv file?
You can definitely fill out a web form, it would be trickier interacting with a csv file though
@@edutechional I also came to this video looking to do exactly this. Would you be willing to do a video on that topic as well?
Hiya mate, really effective video! I'm currently stuck looking for a button and feel like this is really simple to resolve but struggling to find answers, i've found the location of the button but i think its been grouped by
I'd start by inspecting the element using the browser tools. That will show you if the button has a class/id, and if it doesn't, it will show the closest parent element that you can select.
If i get it right:
document.querySelectorAll - mainly been used for static objects
document.getElementsByTagName - can be used for dinamick objects like divs
also it`s easier to use something like document.getElementsByClassName to find what you want
But it`s creating another problem, you can`t use method "forEach" it`s simply not working with divs
can other tools be used besides the chrome dev tool?
Yes, firefox and safari also have the same ability.
Nice. I liked it
Tip for anyone new to scripting in the browser debugger: don't use 'const' unless you really mean to never use that symbol without refreshing the page. More often than not, you'll want to redefine a variable as you try different things.
No
@@Syffx. Is "No" a question?
How do i automate clicking a button before the page loads completely? I want to be fast and not wait for while page to load.
I was using Windows.addeventlistener(load) but it's too slow. Any way to refresh the page and instant click on button?
And this will only work if I have Java Script installed right?
no
I used this to suscribe ;)
Ha, very nice!
can you share the code, please
@@asoyoyukii3902 I don't remember sorry
@@asoyoyukii3902 I used this code to subscribe to the channel: document.querySelector('#subscribe-button > ytd-subscribe-button-renderer > tp-yt-paper-button').click()
thanks bro
You're welcome!
great video. Is it possible to click on an exact time? let's say I want to initiate click event on 09:00:00:00. the milliseconds are important
You could use a setTimeout function.
Can this be automated?
Did you saved the code after going to new page of function button.click after leaving the page of all button ? if yes how ?
The code isn't lost when you run the script, even when it switches between pages.
This is sorcery. Thank you for this video
You're very welcome
How to run the script outside of the browser
good
Can automate this using locally saved js file and run/click in the front-end webpage
would appreciate if you will help me to do so
Did u found out how to do?
use this for clicking the are you still watching button on yt
I made this whole js (with JQuery sprinkled) script and everything, with conditions and all, and my intention is that to make the script run as long as the conditions aren't met. [Detail-wise; I want to automate clicking and have it load the next page and start continue the clicking. Until certain criteria is met, will the script stop]
But reality is that once the script ran and the next page is loaded, the whole script had to be copy-pasted and the to run again.
Is there a way (I think someone mention using chrome plugin) to continue the same script even after the website loads a new page?
For something that needs to maintain state after a page refresh, the best option is to use a software based tool. If you're on mac you can follow this guide: www.makeuseof.com/tag/6-ways-use-mac-automator-browser/ if you're on a PC, here is a helpful list of tools and browser extensions: www.maketecheasier.com/extensions-automating-repetitive-browsing-tasks/
Had a question: I have client who wants to add a job board page in squarespace.
More details: The thing is when a job recruiter fills out and submits a job, she then wants to approve it, and upon approval she wants the job submission to auto populate on the job board page. I know I’ll have to implement code, but lines of code do you suggest? I’ll implement code with the squarespace platform. I just need a point of attack. I’m stuck. I’m looking for the fastest way using squarespace?
I have never worked with Squarespace. I'm pretty sure you could use a plugin such as Powr.io or TypeForm for that type of functionality.
Cool. But i was looking for something in the lines of selenium
me too :(
How would you make a button click every let's say 10 minutes
while(true){
buttonClickCode();
Sleep(600000);
}
i know very little javascript "Sleep" may not be correct
@@okay8454 thanks I'll try!
and now do it for drop down menues
Please make a tutorial how to automate system tasks in JavaScript
JavaScript isn't really ideal for automating system tasks, for that you'd want to use tools such as bash scripts
@@edutechional thank you very much I just a beginner 😀
Hi, before I watched this video, I actually created a script to automate sending invitations, but I've done too much and LinkedIn detected my account's unusual behavior. As a result, my account temporarily locked. I used random intervals to avoid that, but increasing too many connections can be detected. Everybody, be careful about that!
Thanks for sharing!
Did you get your account back?
How do you introduce intervals in conjunction with this tutorial? I want to automate clicking a button(every 4 hours) on my webpage.
@@myerwerl This is propbably hella late but you'd probably use a setInterval for this part. Turning the milliseconds into sec, then min, then hours, then the amount of hours you'd want.