Test automation is critical for quick turnaround of testing and extensive re-use of test components. Consideration of some simple automation requirements while designing/developing Web application would make the test automation robust and quicker.

This could be achieved by following couple of simple guidelines mentioned below. This would result in less automation effort and would increase the automation productivity significantly

Naming all the pages

Each page HTML source code should contain a hidden INPUT tag for the name of the page. For Ex-

<INPUT type="hidden" id="pglogin" value="Login page">

The above tag helps can help in below scenarios

Consistent object naming

All similar objects should have consistent name throughout the application. For Ex – If a "Continue" button is referred with a Name "Continue" then the same name should be consistently used with these buttons on all the pages.

Unique name for object

Unique names should be used for various objects. This helps in identification of the objects while executing automated test cases. This might not be always possible or a feasible approach. The below example explains one of such cases.

Consider an application where products are displayed dynamically from the database. Each product is listed in a table with its price and an "add to cart" button against that as shown in the below table

Now most developers will use the same name for the <Add to Cart> button and there would be some logic built in the page to determine which <Add to Cart> button was clicked (Ex - based on the href property of the button). To make a robust automated script the AE has to write algorithm to determine which <Add to Cart> button corresponds to which Product. To avoid such a situation the developers can add a user defined attribute to the button

<IMG alt="Add to Cart" name="atc" prodname="Product 1" src="...">

The same should be done with the price tag as well. This will make it easier to validate the price against a product name. For Ex-

<TD name="price" prodname="Product 1">$2.99</TD>

Naming Errors on Page

When a validation error occurs on a page, the page is usually redisplayed with errors. Some developers use style sheets to control visibility of these errors. Which means the errors always exist in the HTML source code, but are displayed or hidden using different styles. All of these error messages should be assigned a name or a unique html id. This makes it easier for AE to validate the working of these error messages. For Ex-

<P id="errorage">You must be above 18 to use this service
<P id="errorname">Name cannot contain a special letter

Or

<P name="error" class="errorHidden">You must be above 18 to use this service
<P name="error" class="errorShown">Name cannot contain a special letter

Assigning ALT text to All images

All images on a web page should have the alt attribute defined. It is a good approach to add a name also to the image but if done then this should be done consistently. Inconsistencies like below should not be present

<Image name="Continue" alt="Continue">
<Image alt="Continue">

All the images have alt attribute the name property is missed for few.

Dynamic information should have a name/html id

Any dynamic information that is displayed to a customer and which would need to be validated or captured during testing should be name. Consider the below example.

A order confirmation number on a page might be displayed using the below HTML code

<P>Order Confirmation: <B>X2C989DX8

Now to extract the confirmation number the AE has to use various techniques which might not work in all cases. Developer should display the information using techniques shown below

<P>Order Confirmation: <B>X2C989DX8
<INPUT type="hidden" id="confirmationNumber" value="X2C989DX8">

Or

<P>Order Confirmation: <B name="confirmationNumber">X2C989DX8

The later method should be preferred as the information is not repeated in the source code and the validation can be done on what’s displayed to the customer on the page.

Categorized content should be given a name/html id

Information displayed on the page should have the name defined. This information can be in various categories, for ex – Navigation bar, header/foot notes, page title, bread crumbs, page description/content etc...

Any table displaying data should be named

Consider the below table

Most of the time developers do not name any table on web page. Tables like above should be named as it becomes hard for AE to get to the actual table in the automated test case. Nested table should be avoided when displaying the final data of the table

Blank rows should be avoided in a Table

Developer often use blanks rows in a table display data for aligning/padding. This should be avoided. In case it is required then non-blanks rows (TR Tags) should be given a name. And for blank rows a style class should be used. This helps AE determining which rows to ignore

Consistent columns in tables

A table displaying dynamic content should have consistent number of rows in the table. Sometimes blank cells are used for padding, in such a case the order of column should be kept constant. For ex – if price is displayed in the 4 column for "Product 1" in the above example then same should be done for other products as well

Avoid DIV tags for tables

Using DIV tags for representing tabular information causes difficulties for an AE to loop through the information. Such implementations should be avoided. In case DIV tags need to be used then each DIV row of data should be named.

Support KnowledgeInbox by donating

Why Donate?