AUTOMATION 14 - GUI 2, basic page manipulation with TamperMonkey

Technical level: ***

Previously I introduced you to web browser development tools and had you exploring sites to inspect elements and the code behind them.

In folklore there is a concept called a "true name", everything and everyone has one - something sacred which describes it's nature.  In magic, to know something's true name it to have great power over it.

Now automation isn't quite like a magic spell, but this concept applies, and why it was worth our previous entry exploring finding out true names with dev tools.  If you know a page element's name, there's a lot you can do with it in automation!

Today I want to introduce you to some very elementary automation through a tool a developer told me about Tamper Monkey.  Installations vary - so to install I suggest you Google "Tamper Monkey" with the name of the browser you use.  So far I know it works for Firefox and Chrome.

Once installed, you'll see the following icon in the top right corner of your browser,

There is quite a bit of support material out there, which always seems to be on the move and being updated, so rather than give you a static link, I'm again going to suggest you Google things like "Tampermonkey instructions", "Tampermonkey examples" etc.

What we're going to do is populate some fields in Facebook to register an account using this tool.

What you do is to go to Facebook and select the TamperMonkey icon and "Add New Script".  You're shown a page like this ...

You can see in brown what looks like a comment which reads @match - this is the website this script will apply to.

You'll also see a defined function() which is the core of the script.  Where it says "// Your code here", we're going to add some code

document.getElementById('XXX').value = 'YYY';

This is the core instructions we're going to use today.  Basically it instructs the script to find an element with a name "XXX" and set it to "YYY".

This is where last times experimentation with developer tools is helpful - we can search through it to find the "true name" of the field you want to manipulate.  In this case, it's the mobile number - and I'm looking using the dev tools for the id field which currently is "u_0_6" for me.

I want an easy number to remember, so I'll choose "0123456", and so have the following command,

document.getElementById('u_0_6').value = '012346';

I save this, hit refresh in Facebook page, and voila, it's populated with my value!

Okay I'm going to add the following, and see what happens for you,

document.getElementById('u_0_1').value = 'Mike';
document.getElementById('u_0_3').value = 'Awesome';
document.getElementById('u_0_6').value = '012346';
document.getElementById('u_0_9').value = '012346';


Just be aware - Facebook might tweak these field names - good job last time you learned to find out those ID codes using dev tools to tweak this!

So far so good - one of the reasons I chose Facebook is it currently has these drop down and radio buttons shown below,

For the drop downs, try the following commands,

document.getElementById('day').selectedIndex = 14;    

document.getElementById('month').selectedIndex = 2;

document.getElementById('year').selectedIndex = 33;

Instead of the previous "value" you're using "selectedIndex" to select the item at the number you've provided.  For instance Feb is the 2nd month.  Likewise 1984 us the 33rd month.

Finally for the female radio button,

document.getElementById('u_0_e').checked = 1;

This time using the "checked" function to set values.



Extension Material

Hopefully you've downloaded TamperMonkey and tried some of this out as we go along.  It's the only way to really get your hands dirty and understand.

I find TamperMonkey really helpful especially for pre-populating registration pages.  You can set variables and use them to enter text.  An example I've done is to convert the time into a phone number, which is always changing.

Likewise, try setting random dates of birth - TamperMonkey uses a basic Java (maybe even Javascript, I can't tell the difference), so try a few things out, and see how you get on.

Have fun playing around on different sites.  Next time we're going to look a little at Selenium Web Driver.