Introduction to Web Page Comprehension and Testing with Selenium

This is first in series of articles about testing Web Pages. This first article is background for those of you who are technically curious about the language of the Internet, that language being HTML. If you are already a web programmer you already know this stuff.

The Internet is based on a vast number of servers presenting sites with text based instructions read by the browsers running on our various computers, phones and other devices. The language of the Internet is HTML. HTML text is the language that Chrome, Internet Explorer, Safari and other browsers use to make Web Page views.

The HTML Specification defines the Language and sets the Rules.

The HTML specification can be found here
https://html.spec.whatwg.org/
This document is currently a 1297 page densely packed description of just what browsers are expected to understand. If it’s not in the “Spec”, the text is ignored. If there are errors in the Web Page, they are simply ignored as well. Browsers are engineered to output a Web Page View no matter what errors it finds within reason. Even though HTML is text based, it can direct browsers to present multimedia by downloading and displaying video, audio, photos and other multimedia files.

Here is an example of typical HTML from the Specification

HTML is based on tags as shown in the text above . Every tag starts with “” and eventually must have a terminating  “”.  In the sample above taken from the Spec is a full page of HTML. Every Web Page is should be bracketed by “” and end with “”. This particular tag in the example has an attribute to indicate that this page should be in English, because the language is specified as  “lang=’en’ “.  In actual practice, the Browser software doesn’t need “html” tags at the start and at the end. Nor does it need the “lang” attribute. It is assumed the beginning of the text provided is the start and end of the text is well the end. So the tags can be omitted without any consequences. Likewise “lan=en” is optional since the computer knows the default language and will present the page in the correct language and probably ignore the “lang” parameter if it’s wrong. 

Referring to the graphic above, web pages are globally divided up into head and body. The text delimited by head tag contains instructions about how to present the page. The body tag brackets the actual contents of the page.

The first tag in the body “h1” is a title size one. Size “h1” is printed in the largest relative text in the page. The “h’s” go all the way down with smallest being size being “h6”.  The next tag is a paragraph with an anchor tag inside called ““. This is a very common practice, tags embedded in other tags up to several layers deep.  Another name for anchor is a hyperlink or clickable link. The success of Internet has been due to the ability to link pages together to other pages from a remote location within the same page or somewhere in the Internet. Getting back to the tags. “href” points to a destination, a fake place called “demo.html”. This example, in real life this would be a unreachable link, Ordinarily this reference would be a full URL like “https://www.google.com”. The name of clickable link is labeled “simple”. Notice the link is colored blue to indicate that this may be clicked upon to go to some other location.

On the Web Page you would see this.

Sample page

This is a simple sample.

=================================================

Multi-media is a prime feature of the Web Page.

‘<img’ title=”National Geographic” src=”https://www.subscription.co.uk/covers/Large/W450/current/nationalgeographic.jpg” align=”National Geographic” /> ‘/img>’

Here is a sample tag from the National Geographic Magazine. The tag “img” tells the browser to look for an image name as described in the tag attribute “src=”. The filename,jpg is assumed to be a picture, The HTML spec has no rules about validating the image. All the Browser knows is the extension “.jpg”. The Browser will attempt to download the jpg file and attempt to display it in the user’s device. Perhaps the file is unreachable or corrupt. If so, there is a backup plan. It will quietly display nothing. Sometimes the tag has an attribute like alt=”Picture of a Whale”. In that case the picture won’t be displayed, the text “Picture of a Whale” is displayed in it’s place.

The Web Page is organized around a series of boxes sometimes outlined with a physical border

Single boxes, vertical boxes, horizontal boxes, multiple boxes in rows and columns. There is the ‘head’ tag for the top of the page, the ‘footer’ tag for the bottom and the ‘div’ tag for everything in the middle. Typically you build a box of a certain size and then fill the box with content. Boxes resize themselves as the browser page resizes. They may even reorganize themselves depending on the size of the screen. You need to be aware of the three general kinds of presentation devices. The default is the computer screen, then the tablet and then the smartphone. The Browser software knows what kind of screen it’s presenting and reshapes the Web Page to accommodate the size and screen density. When testing, you will need to try all three formats.

The web page as a huge consolation of tags or elements

The web browser reads in the entire text of the Web Page into memory before starting to compose the page in the Browser. This memory image is called the DOM. The DOM or HTML DOM is an abbreviation for “Domain Object Model”. Because the declaration of the web page is so complex, parts of the visible content have to be decoded and rendered  before others. A Web Page is often identified as a Tree since individual components have to be composed like leaves and branches before you can draw or render as it is called, the entire Tree, the visible Web Page.

You can “inspect” the actual HTML text of the web Page from the browser. In Chrome, type right click and choose “Inspect”. The output is called the “page source”. The text is very dense and full of tags. It’s plain text but hard to decipher.

Web Pages usually have style cues from CSS or Cascading Style Sheet, yet another SPEC

Here is a sample usage.

“

“

This HTML and CSS expression is in a ‘div’ box. There are three parts to it. “My sweat suit is”  printed green on a transparent background. Next “and my eyes are” is printed blue. Finally “blue” is blue with a transparent background.

This is an example of a CSS declaration which augments HTML but is separate from the HTML spec. Here is the  link to the CSS Spec -> https://drafts.csswg.org/cssom/. It’s called the “CSS Object Model (CSSOM)”

Finally getting around to testing a Web Page

Testing even a moderately complex Web Page is a difficult job for anyone and also error prone. Selenium is the name of the tool most testers use to validate a Web Page. Selenium automates what the user does on the Web Page. A Web Page often has links to other pages. These links often become invalid over time. Are you going to hire someone to click on 50, 100 or more links every time you are ready for a new release ? Web Pages are usually dynamically created. JavaScript can run but is the output consistent with the design ? Platforms, platform versions, Operating Systems and Browser types all have to be tested in your documented Test Matrix to insure that all customers are served. Finally, I am sure you are familiar with Internet forms. Building forms for data entry and validating forms is difficult and needs repeated full test cycles.

Selenium Automation is the answer to creating and shipping reliable Web Pages. More about that in future Medium posts.

https://www.selenium.dev/documentation/en/