maxkabakov - Fotolia
Be a more technical tester with HTML, CSS and JS
If you're ready to boost your testing skills, why not learn more about web development? Expert Matt Heusser walks you through HTML, CSS and JS to get you started.
This is part three of our "Be a more technical tester" series and, this time, we'll be focusing on HTML, CSS and JavaScript.
After covering servers, UNIX and C, we covered APIs and the network. Today, we'll talk about the front end -- how programmers create the pretty pictures we see on the web and on our phones.
Components: HTML, CSS and JavaScript
HTML, short for Hypertext Markup Language, provides the text, images and links for webpages. HTML consists of elements, which can be located by identifiers, or IDs. Originally, HTML also had font sizes, colors, spacing and layout embedded in it. If a company has a standard color scheme to use, the scheme needs to be inserted into every webpage -- and, if it changes, every webpage needs to change. Long-term, that wasn't sustainable, so Cascading Style Sheets, or CSS, were invented. CSS sets the attributes for a type of element or ID, such as the color, padding, vertical or horizontal alignment, font size, or border.
JavaScript is a programming language for creating interactive webpages. Originally, JavaScript had two classic uses. Now, JavaScript can make webpages event-driven; for example, changing an image when the user moused-over or clicked the image. It can create pop-ups, do error-checking for inputs and also perform math without a trip back to the server. Here's one example: a webpage that can calculate mortgage interest as the user changes rates. JavaScript can also manipulate the very object model of the webpage, creating new elements, deleting old ones or changing them. This ability to respond to events and change images on the fly is what enables Google Maps users to drag and move maps.
Today, to be a more technical tester, we'll cover the very basics of these technologies, along with where to go for more.
Starting with HTML
It's probably easier to show a simple HTML page than to describe one. Here's a bit of code:
<!DOCTYPE html>
<html>
<head><title>
SearchSoftwareQuality's Introduction to HTML
</title><head>
<p>Hello world.</p>
<IMG SRC="https://c7.staticflickr.com/1/117/308897358_41889ff727_b.jpg width=50%"/>
</body>
</html>
Save the file to the desktop and double-click, and your browser will open the file. Notice that the code is nested -- the title is instead the "head", and everything including the <p>, or paragraph marker, is inside the body, which is inside the HTML.
The IMG element is an image, which has some attributes on it -- the source, or SRC, of where to find the file, and a percentage to render the image.
A few popular HTML elements include <hr/>, which makes a horizontal line; <br/> for additional forced new line; and input, which allows us to have text fields, radio buttons and the popular submit button, which we'll cover a little later.
Just enough CSS
CSS sets up the style to apply to HTML elements. These "cascade," which is similar to inheritance in object oriented code. For example, you can set a standard border for images as one-pixel-black, but images that belong to a specific class get that and also a rule about alignment.
Let's modify our HTML page to reference a style sheet. Put this new code immediately after </title>:
<link rel="stylesheet" type="text/css" href="mystyle.css">
Also, remove the width=50% attribute from the HTML. Create a file in the same directory called mystyle.css with this text:
img {
float:right
margin: auto;
width:40%;
}
The new text right-aligns the image and shrinks it.
The real power of CSS is in setting up the structure of the webpage using div elements. If you want to be a more technical tester and get a fast introduction to webpage layout, consider the Amazon Kindle edition of Battlefield HTML by Brian Manning, currently available for $4.99.
JavaScript
Let's now change our paragraph to include an input button, like so:
<p>
Hello, World.<br/>
<input type="submit" value="On To TechTarget!" id=btnSubmit>
</p>
And, immediately following the closing paragraph note, add some javascript:
<script type="text/javascript">
document.getElementByID("btnSubmit").onclick = function () {
location.href="https://www.techtarget.com/searchsoftwarequality/";
}
</script>
This code overrides the behavior of the button's onclick event to execute some javascript. We could also create an onclick=attribute in the submit button itself that calls some javascript defined elsewhere.
A wide variety of JavaScript libraries exist to make it easier to create webpages or, more recently, to manipulate webpages to make sure they display properly at various window sizes.
There are plenty of web-based tutorials on JavaScript to go just a bit further. For a more structured and thorough introduction, the technical tester should consider Learning JavaScript by Ethan Brown.
Putting it all together for testers
Consider our Palindrome page at Excelon Development. A palindrome is a word that is the same forward and backwards; "bob" is a palindrome but "robert" is not. For our purposes, case matters, so "BoB" is a palindrome but "Bob" is not. Two easy entry points to test the application are quick attacks and quick attacks for responsive design.
Testers that know HTML and JavaScript, on the other hand, can right-click, view source, scroll down, look at what the code is doing and consider alternatives. Combine that with understanding what is happening on the network, as we learned in part two of this series, and you have the prescription for a much more powerful and technical tester.
Editor's note: The code above, dumped into a browser, may render as a web page. Be careful with your settings to format the code snippets as literal text. The image in the example came from FLICKR and is licensed for commercial use.
