TLDR; When you learn to manipulate the DOM with JavaScript you can create simple tools and automate from within the browser and use bookmarklets to make the code easy to execute and sync across different machines.
<a name=“more”></a>
Background
When I first learned how to code it was in BASIC with an interpreter. This was great because I didn’t have to write a lot of scaffolding code to create an application I just wrote code and it ran.
I can experience a similar process using JavaScript in the browser console which makes JavaScript a good first language to hack about with and make your first steps learning how to code.
It also means that I an get a lot done very quickly from the console to help me when I test web applications.
I can manipulate a web application client in my browser by:
- changing the DOM
- amending the JavaScript
- changing the values of variables
- adding new elements into the DOM
A client, in a browser, is ours to command.
A Set of Twitter links
Bearing the above in mind. I visited the TestingCircus.com list of testers on twitter and there were a few names I didn’t recognise.
The page handily provides the twitter handle and the URL but the URL is a text element, not a clickable URL. Therefore in order for me to check if I follow that person I have to engage in manual effort to copy and paste the text into the browser URL field and visit the page.
Ugh, manual effort.
Fortunately however:
- this is a web page
- the URLs are on the page as text
- I know how to get the URL from the page with JavaScript
- I know how to amend the DOM with JavaScript
- I can write some JavaScript to convert all the text URLs into clickable URLs
The full process for this is shown in a video on youtube.
The code
If I inspect the page and into the JavaScript console I paste the following code and hit return to execute the code then all the Twitter URLs will become clickable:
posslinks = document.getElementsByTagName("td");for (var plinkid = 0; plinkid < posslinks.length; plinkid++) { if (posslinks[plinkid].innerHTML.startsWith("https://")) { posslinks[plinkid].innerHTML = "<a href='" + posslinks[plinkid].innerHTML + "'>" + posslinks[plinkid].innerHTML + "</a>" }}
- get all the elements with tag name “td”
- iterate over them all in a
for loop
- if the text in the table data/cell starts with “https://” then
- change the text so that it is clickable link
The bookmarklet
Since I will probably want to do this a few times I can make this easier by creating a bookmarklet.
A bookmarklet is:
-
javascript code
-
wrapped in an anonymous function that executes immediately
-
prefixed with “javascript:”
-
added to your browsers bookmarks
javascript:(function(){ posslinks = document.getElementsByTagName(“td”); for (var plinkid = 0; plinkid < posslinks.length; plinkid++) { if (posslinks[plinkid].innerHTML.startsWith(“https://”)) { posslinks[plinkid].innerHTML = “<a href=’” + posslinks[plinkid].innerHTML + “’>” + posslinks[plinkid].innerHTML + “</a>” } }})
If I paste the above code into my bookmark toolbar then I’ll create a bookmarklet that I canclick on to change all the listed URLs to clickable URLs.
Bookmarklets can sync across machines .e.g if logged into Chrome Browser then your bookmarklets sync across all logged in browser sessions.
A Tool
Because I create small JavaScript snippets and convert them into bookmarklets to help me with my testing and general web navigation, I created a tool to help with this process.
You can see the tool in action in the video.
End Notes
- A small knowledge of JavaScript can help you do very powerful actions.
- JavaScript is a useful language to learn to ‘do stuff’ quickly
- You can automate web applications from the JavaScript console
- The Web Client pages are manipulatable and yours to control
- Bookmarklets allow you have easy access to custom JavaScript
The Video
Leia mais em http://testerhq.com/post/blogs/eviltester/2017-05-19-bookmarkletscircus/
Por que … 
