JavaScript in Bookmarks

This is old knowledge, that I stumbled over back when I started my first consultancy as a QA.

I was faced with the task to verify functionality in a web application. The idea was that page A gave you the information that there were more options behind a link. Once you clicked on this link, you were presented with page B and it was supposed to display all the options.

This was okay at the start. Having 4 or maybe 10 options. After I had tried a couple of these I started seeing links with 80 to 120 options. Now, counting that, manually, in a scrollable list. Not fun. The opportunities for losing count, or just screwing up altogether was grand.

I discovered that JavaScript could help me. All the countable’s were on a row. These rows had classes attached to them, and they were unique for the rows I were looking for. I could open the developer tools console and write JavaScipt in there, and then execute this on the website!

let elements = document.getElementsByClassName('some_identifyer')

Now I had all the elements saved to a variable, called elements.

console.log(elements.length)

Told me how many of these that ware found during in search. Like 2 or 150!

But using the console to type this every time I wanted to know how many elements there were on a given page was cumbersome. A kind developer pointed out that you could use the bookmarks in Chrome to execute code rather than take you to a given URL.

“This has to be black-magic”, I thought to myself. “Behold! The blueprint!”

javascript: (() => {})();

So, this is the blueprint for a lot of fun stuff. You can put whatever vanilla JavaScript code you like within the curly brackets. As long as it executes in the console. So sadly, no npm packages. At least as not as far as I know.

So if we take the example I used earlier, we could create a nice snippet as follows.

javascript: (() => {
  let elements = document.getElementsByClassName('paragraph-image');
  console.log('Number of images found: ' + elements.length);
})();

If you right-click on an element and select inspect, the console should open for you and you can find the locators yourself. For more information about this search for css-selectors on google or look up the document.getElementsByClassName on the w3c web.

Now, this is nice, we can take our awesome code snippet, right-click on a bookmark and select edit, in the URL part of the edit interface, replace the URL with the code snippet. Hit save. Now click it.

If you open the console again, you should see the text printed out ‘Number of images found: 1’. Now that’s all nice, but you still need to open (or keep open) the console all the time too see the result.

Let’s do a slight modification.

javascript: (() => {
  let elements = document.getElementsByClassName('paragraph-image');
  alert('Number of images found: ' + elements.length);
})();

Et voila, we have a warning telling us the number of images on the page. Awesome sauce!

However useful this may be for a person in my position, as a QA mind-numbingly counting HTML elements on a product site. What else can we do with it? Well, I watch quite a lot of twitch.tv, usually, it’s on in the background while I’m working and I tend to glance over when something interesting is happening.

On twitch, there is this currency, channel points. You get these periodically while watching, you gain 10 per every couple of minutes. Every now and then, you have the opportunity to click a box and get 50 (!!!) extra points. But since I’m vaguely aware of what’s happening I tend to click these very seldom. Enter JavaScript!

javascript: (() => { 
  const buttonClicker = () => { 
    let clickyButton = document.getElementsByClassName('tw-button tw-button--success tw-interactive'); 
    if (clickyButton.length > 0) { 
      clickyButton[0].click(); 
      console.log('I haz clickidy clicked the button!'); 
    }; 
  }; 
  setInterval(() => { 
    buttonClicker(); 
  }, 1000); 
})();

So what’s going on here?

First, we’re declaring a function that we call buttonClicker.
In this function, we first look for a clickyButton, we try to find a specific one using getElementsByClassName.
If we find an element (length is greater than zero) we try to click on the first element in our array, there should be only one! After that, we print a message to the console. Mainly for testing purposes.

Second, we specify an interval, we call the function we created in it and set it to a 1000ms delay. This will execute the button click function once every second until we reload or leave the page. EZ channel points!

These are just some easy example you could use this feature for. It’s fairly easy to make small snippets and executing them in an easy manner.