I have some friends who are fast typers. That being said, I want to show them that I can type faster than them if I wanted to, and by that I mean I can make something that can type faster than them. Here's my step by step process.

Step 1: Strategizing

After some thought, there are two possible routes to go down. I can either take a screenshot and read the text on the screen, or I can try to web scrape the text and do my typing through an input. I'm going to try web scraping first because I think it'll work better when new words appear because, in theory, they would just be in the HTML.

Step 2: Inspecting Elements

Since I'm going to be doing web scraping, I'll need to be able to see and manipulate the HTML code on the website. So, after opening Monkey Type, a popular typing test website that I've seen my friends use, I began right-clicking stuff and hitting inspect element.

Getting the current word

After right-clicking around, I'm finding a bunch of divs in a word class and a bunch of letter elements inside of it. With further inspection, it seems that the current word that you should type also has the "active" class which I think will be very helpful in the future. Lastly, I want to make sure that this pattern holds true as you type words, which it does.

Finding the input

The next thing I need to find is the place to type out the words. My assumption for how the website works, is that it uses an input element that I can find in HTML. Clicking around and randomly inspecting elements isn't working, so I plan B is doing a ctrl+f search on the HTML code for "input". With that, I see an element with an id of wordsInput which I'm gonna assume is the input that takes in the typing.

Step 3: Let's Get Coding

I'm gonna try to use Selenium to do the webscraping and inputting of information. Selenium should allow me to view and select HTML elements and input the words. So I wrote this to get started and just open the site.

Printing out the current word

To get the current word, I'm trying to get the element where class="word active". My initial thought is to use By.CLASS_NAME, but this won't work when an element has more than one class (and our element has the classes word and active). So I used By.CSS_SELECTOR and used the dot notation to get both classes.

Typing out a word

Now comes the typing. My guess for how the website works with input is indeed correct! So I'm typing everything into that input. I'm also seeing that the input isn't typed unless the cookies popup is answered, so I'm adding something to click on that before continuing.

Typing many words

Typing out one word is cool, but I want get this to type out more words. As you can see below, I'm opting for a forever loop that stops once an error occurs. I'm noticing that the page has a results element that has the class "hidden", which then gets removed once the test is over. I keep running the loop until our result element is no longer hidden because the test has ended. At that point an error occurs which then gets caught, and I break from the while loop.

Final Changes

Using a manual time delay is lame. Let's change things so we'll just wait until the cookies button is loaded, and then click it. I also want the final stats to be printed. I found the element that contains words per minute, right clicked it, and copied its (css) selector to print out the word count.

Here's the final code:
Github

Ending Thoughts

This was a chill project. I've done a couple of selenium projects in the past, so I know the main pitfalls and avoided them in this project. That being said, I'm surprised I didn't run into problems with the current active word. The program usually scores somewhere between 250-800 wpm depending on the wifi speed and how my computer is feeling. From my test-runs, it beats the human record of 216 wpm. It's a cute little program of just under 50 lines of code and took around an hour of coding with no chatGPT assistance. I can't wait to challenge my friends to typing tests and crush them!

- Marius