Analyze Web Page HTML Code to Find Control Names and/or IDs for Writing Javascript Expressions for Automating Web Forms Using the Chrome.ahk Library
Logging into online accounts ranks as one of the most common motivations for AutoHotkey users automating Web pages. Using screen-level AutoHotkey Web page automation can get cumbersome. For more reliable and accurate solutions consider source-level automation using the AutoHotkey Chrome.ahk Library of tools. However, before automating any Web forms with these functions, you need to accomplish two tasks:
- Analyze the Web page to identify the target HTML controls’ name or id (e.g. text fields, buttons, etc).
- Write Javascript action expressions for use with the Chrome.ahk library.
In this blog, I introduce how to identify the controls required to fill in a Web form. In my next blog, I’ll address the more complex task of writing the Javascript expressions for Web page input.
Note: I rarely understand how everything works in a library such as Chrome.ahk. I concentrate on getting a script working and useful. In that vein, I updated the script in my last blog to include a Sleep, 1000 command after the initial object build in the ChromeInst := new Chrome("ChromeProfile") line. I determined that, at times, it took too long to create this object. The added pause caused a dramatic drop in how often I encountered the dreaded http.send() error.
Using the Chrome.ahk Evaluate() Web Page Automation Function
The Chrome.ahk Library contains a series of AutoHotkey functions for navigating and manipulating a Chrome browser Web page at the source code level. Rather than manipulating Web page input through a series of AutoHotkey clicks and SendInput commands on the browser screen, Chrome.ahk interacts directly with the inner workings of the loaded Web page. (See “Installing Chrome.ahk AutoHotkey Web Page Automation Tools” to get the library loaded.) To call the Chrome.ahk functions, we need to identify the specific HTML control markers found in the page’s source code. In the next blog, I demonstrate how to manipulate those controls by writing Javascript expressions using the target control’s name or id.
Analyzing a Web Page
A Web page uses HTML code for its primary static structure. This HTML code lays out the text and controls for display by the Web browser. We find the control identifiers by perusing the Web page source code. To view the source code in your browser, right-click on an empty portion of the Web page (i.e. not an image or link). Select “View page source” from the pop-up menu to open a new tab displaying the underlying code. Opening the source code for Jack’s AutoHotkey Chrome Test Page shows the following:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Jack's AutoHotkey Chrome Test Page</title>
</head>
<body>
<form action="/AutoHotkey/ChromeTestPage.html" method="get" name="testpage">
First Name <input name="firstname" id="fname"><br>
<br>
Last Name <input name="lastname" id="lname"><br>
<br>
Street Address <input id="street" name="street"><br>
<br>
<select name="Color" id="Color">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<br>
<br>
<input id="male" name="gender" value="male" type="radio">
<label for="male">Male</label><br>
<input id="female" name="gender" value="female" type="radio">
<label for="female">Female</label><br>
<br>
<button value="Submit" name="Submit">Submit</button><br>
<br>
</form>
</body>
</html>
Note that many of the lines include the word “input” at the beginning of the HTML tag (e.g. <input name="firstname" id="fname">). These tags contain the control name and/or id needed to automate this Web form using the Chrome.ahk Evaluate() function. Setting up the Javascript expressions for the function relies upon properly identifying these input controls.
Types of HTML Input Controls
HTML code (or tags) appears between arrow brackets < … >—making them easy to pick out. Your Web browser interprets this code and sends the results to your computer screen. The following table shows a few of the common HTML control types:
| <input type=”text”> | Displays a single-line text input field (default when no type specified) |
| <input type=”radio”> | Displays a radio button (for selecting one of many choices) |
| <input type=”checkbox”> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type=”submit”> | Displays a submit button (for submitting the form) |
| <input type=”button”> | Displays a clickable button |
This list of controls only provides a partial table of input types. See this linked List of Input Types for more options. Not all HTML controls use the <input> tag. The more flexible <button></button> and <select><option></option></select> tags add flexibility to buttons and dropdown menus, respectively.
The <Button> Tag
The <button> tag offers much greater flexibility in style and function:
<button type="button" name="Click_Me" id="Click_Me">Click Me!</button>
The <Select> Dropdown Menu Tag
For building HTML dropdown menus, use the <select> tag:
<select name="Color" id="Color">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
The Name vs. ID Attribute
Note that the <input> tags shown in the source code test Web page include both a name and id attribute for identifying the controls:
<input name="firstname" id="fname">
<input name="lastname" id="lname">
<input id="street" name="street">
<input id="male" name="gender" value="male" type="radio">
<input id="female" name="gender" value="female" type="radio">
Often, a Web page input control contains both attributes: name and id. These markers appear inside the tag boundaries (< … >) and can sit in any order after the initial tag. You will use one of these parameters in your Javascript expression for inserting data or clicking menus or buttons. The two attributes often contain the same value—although, not necessarily. Next time, I plan to discuss how the Javascript code you write depends upon which parameter you choose (name or id).
You may discover the name parameter sitting on its own in legacy Web pages. The name attribute links to a particular form (<form>) while the more flexible id parameter (appearing in newer pages) does not require <form>—although it may reside inside one. In new Web pages, HTML code writers commonly include both attributes for compatibility—setting each parameter to the same value. As demonstrated in the next blog, how you write the Javascript expression for inserting control values or executing actions hinges on whether you use name or id.
Tip: You can locate Web page control names by searching for “name” or “id” in the source code page. If when seeking the name or id for the pertinent HTML <Input> tag, you get lost in volumes of mysterious code, search for any nearby text appearing on the Web page. In a long Web page, this should get you close to your objective. In fact, a text search may prove easier than sifting through all the <input> statements.
The Javascript Expression
In the last blog, the Chrome.ahk Evaluate() function provided the primary method for executing Web page actions:
PageInstance.Evaluate("document.getElementById('fname').value = 'Jack';")
PageInstance.Evaluate("document.getElementById('lname').value = 'Dunning';")
PageInstance.Evaluate("document.getElementById('street').value = '1000 Main Street';")
PageInstance.Evaluate("alert('Hello World!');")The Javascript expression appears between the double-quotation marks inside the set of parentheses (in red):
Object.Evaluate("[Javascript expression]")When appended to the current Web page object—as found in the last blog, PageInstance.Evaluate(" … ")—the function executes the Javascript expression found between the two double-quotes on the target Web page. This expression must conform to the syntax of a valid Javascript command. That means learning a little Javascript and its quirks.
Next time, I give an introduction to writing the needed Javascript expression (with examples)—including common Javascript coding mistakes.
Click the Follow button at the top of the sidebar on the right of this page for e-mail notification of new blogs. (If you’re reading this on a tablet or your phone, then you must scroll all the way to the end of the blog—pass any comments—to find the Follow button.)
This post was proofread by Grammarly
(Any other mistakes are all mine.)
(Full disclosure: If you sign up for a free Grammarly account, I get 20¢. I use the spelling/grammar checking service all the time, but, then again, I write a lot more than most people. I recommend Grammarly because it works and it’s free.)
Find my AutoHotkey books at ComputorEdge E-Books!
Find quick-start AutoHotkey classes at “Robotic Desktop Automation with AutoHotkey“!
Jack's AutoHotkey Blog 
[…] my last blog (“Using Chrome.ahk AutoHotkey Tools to Automatically Fill-in Web Forms (Part 1)“), I discussed how to reveal Web page control names in the source code. This time, I explain […]
LikeLike
[…] Using Chrome.ahk AutoHotkey Tools to Automatically Fill-in Web Forms (Part 1) […]
LikeLike