Coding A Bot That Beats the World Record Typing Speed - NodeJS Scraping with Puppeteer Tutorial #5

hey guys how's it going i'm back here with another video and this is the next video of a series where i teach you guys puppeteer and web scraping using javascript and i decided that in this video i'm going to teach you guys how to make a really interesting bot which i had i haven't seen it before probably there there's other bots to do the same thing but basically there's this really cool website that i've always used to test my typing speed so basically just come here and type like here bring you type the words and basically at the end if you get something wrong it also like accounts for that and at the end will give you a score for a cpm which basically will tell you how fast you're writing right so that that's important and basically we're going to write a bot that is going to cheat the system so i like i don't like treating systems however this is like harmless in my opinion because uh they're like i looked at the high scores and there were there were already a bunch of bots like a bunch of people getting perfect scores so i wouldn't affect it like no way whatsoever in my opinion so i'm just going to show you guys because it's a really interesting learning experience and i'll show you guys exactly how to create a bot that is just going to write everything immediately super fast and like write all the words in less than like five seconds so basically the first thing we need is to grab the link here for this website so we're gonna grab this we're gonna go here to our puppets here uh our application right and we're gonna change the go to from the page to become this i already did this but you gotta paste it over here so we know that we're telling the bot to go to this page so now that we did this we can start analyzing the page right so i'm gonna come here to the page i'm gonna start analyzing what i want so what i'm thinking is i first need to come over here and i need to grab the list of all the words that exist over here as you can see if i if i inspect element and i hate this ads but basically if i inspect element you can see clearly that there's a div called words which contains all the different words inside of it so there's like a bunch of words as you can see and these are all the words that the body like the the website is testing us so these are all the possible words we can write and this is extremely important because now we can just come over here and we can grab this value for this over here this is the div which we actually need to keep in track right so we're going to tell our bots to before doing anything we're going to tell it to wait for the next word an element with next word as the class to be rendered why because the website is going to render all the words at the same time however it is important to acknowledge that uh we have to tell the bot to wait because they might not appear so we we might be trying to reach for something that doesn't exist so what we're going to tell it is to basically just come over here and page actually await page dot wait for selector like we did in the last videos we're going to tell it to wait for basically the dot next word item so basically we're telling you to wait for an element in the screen to appear having the class next word which means the words have been rendered and we can get them and turn them into a list so as i mentioned we we've did something very similar to this in the last videos we know how to uh especially in the last video we know how to evaluate the page and get a list of all the items that we want specifically so what we want is actually to get a list containing all of the items with the id next word however there's also something important that you can see that the first like element the one that initializes so this one right here which is the first element in the the first word it doesn't have a class of next word it has a class of current word and we're gonna account for that and i'm gonna show you guys exactly how to account for that so basically what we're going to do is we're going to evaluate the page so page dot evaluate and we're going to actually create a variable so const let's call it words it's going to be a a variable this over here is going to be equal to a function which is going to return all the different like the list of words and now and after this we can just use this to to create the bot right so we're going to evaluate the page and we can pass a function inside of this and this function can take all the javascript that we want to query all the elements so the first element we want is the words so we're going to query every single word actually just i would just say word elements so it's all the different next word element so we're going to grab all of this and put it into a list so to do that we're going to say document dot query selector all and we're going to pass the dot next word selector right because we want to grab all the elements with next word this will return an array of spans because each next word is a span as you can see right here but it's not exactly what we want but we're going to filter through that at later and in order to do that we have to come over here and basically just loop through every one of those elements so word elements and we want to use a forage loop which means we're going to look through each one of them and we want to only grab the inner text of them so basically you can see it's a span and the inner text is actually the word we want so we don't want to grab the class the id the style nothing of that we just want to grab the inner text because it's actually representing the word so how do we do this we actually need to create a separate array so separate list i'm going to call it word list it's going to start as empty and we have to for each element so for each word we want to basically just push to the word list so word list we want to push the element so no it's not element is word it's word dot inner text so this is the only thing we want grab the inner text from the word so this word over here represents each iteration of the word elements and each element in the word elements is a different span which has a class of next word so for if if we are in the first iteration of the for each loop we're basically pushing into the word list array we're pushing find then draw then oh then people we're just pushing all the words into that however as i mentioned before we have to account that the first word which is current word um like the first word which is might actually isn't being added because it is not it doesn't have a selector called the next word which isn't something good for us so we need to fix that so how do we do that well we see that word list initializes as empty and we can actually fix that we can grab the only element in the project that had in the page that has the current word class and we can just grab its inner html and initialize it inner text sorry and initialize the array already having the first element being the current word so that's what we're doing we initialize it having the might and then we basically just use a forge loop to add all the different elements you having a next word class so that's perfect now that we have our our array we can just return this a word list and what that means is basically now we have an exterior element called words which contains the values for all the word lists so so it's basically this is the array and we can test that by coming over here and let's try await and console.log and let's try console.logging words and let's run this let's run node index.js and you can see that it's going to open up the website it's going to wait a bit because it actually takes a bit to load this website because of all the ads and everything and let's see if it works it's supposed to console out the list of all the different words let's see um it's gonna it's loading as you can see the the ads and as you can see it loaded all the words there's about 300 words i know that for sure and you can see clearly it worked however i just i just realized uh if we actually did this wrong a bit the first the the first element the current word we it's it's no currently and the reason for that is because we're using correspond selector all which gets an array we don't want that we just want query selector and that will work i'm sure this will become the first element which is last but you can see the second one is boy which is the same word over here and the third one is tap so that means we are actually grabbing and creating this list so what do we actually do now we want to write we want to type on the on this input right here every time we and like do it really fast right for each element in the list so how do we do that well we have the list over here so what we can do is we can just use a for loop so we can say 4 let i let i equal 0 i is less than words words dot length so basically looping through the words list and i plus plus we're just looping through it and for each iteration of that loop we can await to ty we can basically type on the input so we're going to use the await and the type function that we learned in the last videos so we're going to say a weight page so page dot type and we got to find a selector for this input so let's check to see if we can find anything if we come over here you can see that the input has an idea of input and i'm guessing that this is the only input in this page it's the only one i can see so we can just try to reach inquiry a selector that has this id right here so the idea of input let's try that we're going to use this to type in this input so we're going to try to reach for the element with the input id and then what do we actually what word do we want to type in that input well we want to work we want to type the current iteration of the words list so we can just say words i which means that we're currently typing the word and like we're going through each word and typing on it and basically we're just doing this however there's another thing that we need to account for it doesn't like we just we it isn't just that we need to type the word we need to press space for example if i write might over here i have to press space to go to the next word as you can see so what do we actually do well we have to basically tell our keyboard to press space after it typed this so what we can do is we can come over here and as i mentioned in the last video we can say page.keyboard.press and over here we have to pass a function which will get the key code from space and what i like to do is actually like to come over here and say javascript um key codes something like this and there's a yeah this right here keycode.info this is a website you can just click press on any uh keyboard like any button in the keyboard and it will tell you that the the key code so space is 32. we can just copy this and we can paste it over here and actually just say string dot from charcoal this is a method which will convert it to basically it was 32 right yeah 32. it will convert it into an acceptable format to basically tell the page to press that keyboard button so now what we're doing is we're looking through every element in the list we're telling it to type the word so we type the element and then we're telling it to press space so literally i think this is it let's try running our bot to see what happens so i'm going to run node.index.js and let's see what happens it's going to open up and as before like it's going to take a bit because of all the ads that are loading and we're told it to to wait till all the elements has loaded so that we don't we don't waste time and we actually have time to grab all the elements so as you can see it's loading everything and when it starts typing i'll come back okay guys actually there was an error in our code i wrote here word for some reason we are supposed to write words which is the array so if you guys and if you guys catch this then i caught this then uh props to you i accidentally did this so i need to restart my butt and i'm gonna run it and it's gonna load everything again and i will come back when it starts typing okay guys so as you can see the bot started it's literally just typing uh super fast in the in the input i'm not touching my keyboard or anything it's typing every single word and when it reaches 300 words um you'll see that it'll basically say that we're we're like the fastest type typers in the world so basically here's the bot working you can see that it actually depends a bit on your internet because it took a bit to load my page so that's important to understand so let's see how fast it will actually go i have i as you can see right here it's a it broke some records it said congratulations you typed all the words correctly i advise you to take two minutes break now because he knows that we like apparently we we tie we typed super fast and we got a record-breaking cpm you can see that the normal one like all the recent ones are 143 or uh i don't know 53 words per minute we got 625 words per minute which is inhumanly impossible you can you can get that right so we can run this how many times we want sometimes it will be faster than others because uh it waits a bit to load everything and that's something that is important to understand so yeah that's basically it um i like to make this project because basically i believe it is a cool thing and it incorporates everything that we learned so far also teaches you guys some more important topics about how to structure your application all that kind of stuff so i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting every single day and i would really appreciate it so yeah hope you guys enjoyed it and i'll see you guys next time

Channel: PedroTech

Views: 1,718

Rating: 5 out of 5

Keywords: javascript, nodejs, reactjs, typescript, node js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, puppeteer, web scraping, puppeteer javascript, puppeteer tutorial, puppeteer course, web scraping in javascript, javascript web scraping, headless browsers, selenium, javascript puppeteer, web scraping tutorial, javascript web scraping tutorial, puppeteerjs, javascript automation, automation, web scraping node, node, web automation, nodejs scraping

Id: ItZXd1hT4IY

Length: 13min 49sec (829 seconds)

Published: Sat Dec 05 2020