3 Cool things you can do with Javascript Injection

Learning how to interact with or modify an application directly is one of the more advanced things to learn as a tester.  But once we have a hook into an application we can do a variety of things: accessing internal variables, calling methods, manipulating the application’s state, or even modifying the code ourselves.  For some types of applications this is extremely hard, for others it’s relatively easy.  One of the easiest types of applications to manipulate directly is a web page.  This is because most of the code is stored locally on the client, none of it is obfuscated, and all of it is modifiable.  This means that there are a variety of fun things we can do through any browser with a console like Firefox or Chrome. 

You can get to the console in Firefox or chrome by right clicking, selecting inspect element, and clicking on the console tab when the new panel opens.  Any commands we enter into the prompt will be fired against the web page.   Just remember that if a new page is loaded, or if the browser refreshes, anything you do is lost.    Alternately, many automated testing tools provide a way to execute code against the page, and this provides an easy mechanism to manipulate the application automatically. 

1) Modify or execute the code

One of the most useful things to do when testing a web site is to access its internal variables and methods.  This allows us to modify the web page even without a UI.  For instance, suppose that after 60 minutes of inactivity the user is supposed to get a prompt asking them to stay logged in.  We certainly don’t want to have to let our computer idle for an hour every time we test this.   Instead, we can set the web page to timeout after 1 minute by changing the time from 60 minutes to 1.  You can typically ask a developer what the variable is called, or use the console to try to find it.     

So let’s assume a developer told us that the variable was named timeoutMin.  Modifying it is easy.  From the console enter:  document.timeoutMin = 60;  Now the web page should use the new value instead of the old one. 

2) Hiding / Showing Elements

Occasionally when working with a web site that is under development, something won’t display correctly.  For example, an extra panel appears covering the web page.  This prevents you from being able to do any work.  Or perhaps the login panel doesn’t appear.  We are prevented from testing any functionality that requires a login until that issue is fixed. 

Hiding or showing elements is easy, provided they have an Id, class, or name.  Using chrome, you can right click on the element, and select inspect element.  If the element’s HTML contains an id attribute you can use it to manipulate the object.  If it doesn’t have an id, you can even add one, or try getElementByClassName, getElementByName, or getElementByTagName.

The command to hide an element :  document.getElementById(“idOfElement”).style.visibility='hidden’;

The command to show an element :  document.getElementById(“idOfElement”).style.visibility=’visible’;

3) Adding / Removing Page Events

A web page works by registering functions to happen when certain events happen.  There are a variety of different types of events that are called whenever the user clicks, types, or moves the mouse.  For example, a button can have a function registered to the click event called “onclick”.  When the user clicks on the button, the function is called.  If we want we can add, delete, or replace these events with our own.  Let’s look at three examples:

1) To illustrate how to replace an event we will try to disable all click events on the page.  To achieve this we replace the document’s onclick function with one that does nothing. 

document.onclick = function() { return false; };

Most click actions on the page are now disabled.

2) If we don’t want to disable them all let’s add an additional event without removing the old one.  We do this by adding a new listener.  We can add an event to either the entire page, or to a specific element.  For example, let’s suppose I wanted to highlight the element that my mouse is over. I’m going to add two listeners, one to highlight an element under my mouse, and one to un-highlight when the mouse leaves. 

document.addEventListener('mouseover', function(e) { e = e || window.event; e.target.style.border='3px solid red}, false);

document.addEventListener('mouseout', function(e) { e = e || window.event; e.target.style.border=''}, false);

3) Lastly, let’s suppose I wanted to add an alert message when I click the login button.  This will “Pause” the web page and allow me to inspect traffic, html, etc. 

document.getElementById(“idOfElement”). addEventListener(onclick, function(e) { e = e || window.event; }, Alert(“Element was clicked”); false);

 As you can see, there are a variety of reasons why we might need to modify a web page.  It’s not the sort of thing that will needed every day, but is a great extra tool to be added to any SQE’s tool belt.