What is Test Automation?
Test Automation is the automatic way of doing manual tests. But test automation isn’t that simple. For automating tests you need to use tools for testing in order to control the execution of tests, the comparison of actual outcomes to predicted outcomes, to set preconditions or to perform reporting functions.
Usually when you first start to automate, besides the main program for automation, you need another useful tool or several tools which will help you extract or inspect the properties of the elements/objects from the application under test (HTML/Java/Eclipse based).
When working with dynamic applications, is good to have a fast and easy tool to capture the elements of the dynamic content and modify immediately in your code.
In our future articles on this subject you will find four helpful tools that you may need when working with automation or inspecting elements or objects on web/GUI based applications: Firebug, WebDeveloper, AutoIT and TestObject Inspector.
Today we’re going to tackle one of the most common used tool for inspecting HTML elements or objects: Firebug.
Firebug
Firebug is maybe the most popular web development tool and it is basically an add-on to Firefox web browser. Its main features are to edit and monitor any web site’s HTML, CSS, DOM, JavaScript and YSlow for server activity and load times.
1.1 How to get it going
Firebug is an add-on for Firefox and Chrome browser that is easy to install (https://getfirebug.com/downloads/) and it can be quickly accessed anytime during web browsing by clicking on the Firebug icon displayed in the upper right-hand side of the browser, or by pressing the F12 key.
1.2 Useful inspect features for automated testing?
From the automated functional testing point of view the most useful feature is the “inspection” one. Firebug allows the user to see the HTML source code for specific objects around the page. Just click on the “Inspect” button and then select the desired object that you want to see details like CSS rules, HTML code and even style or layout attributes that are displayed on the right panel.
Moreover, by hovering the source code, the tool highlights the specific object that the selected row refers to. This makes it very easy to get the needed attributes used to identify objects .
1.2.1 Example of using HTML inspection in test automation
Let’s suppose you want to click on the highlighted photo above. Here are the steps to follow:
- Using Mozilla Firefox open Firebug by pressing F12 key
- Click on the “Inspect” button
- Click on the desired image to inspect
- The HTML code for the selected image will be highlighted in blue
- Identify a parent object that has unique properties in the entire HTML tree code. In our case we can use the object with the following property id=”content-streams”
- Identify a set of properties for the desired image. Properties’ label is displayed on blue font and their respective values mostly displayed on red fond between quotation marks. For our image we will use the following property class=”thumbnail”
- Use a standard find function of your automation framework to identify the image by searching the descendants of the identified parent.
- Click on the first item found.
An example using Rational Functional Tester:
TestObject entireHTML;
String parentPropertyValue = “id”;
String parentPropertyName = ”content – streams”;
TestObject[] parent = browser.find(atDescendant(entireHTML, propertyName, propertyValue));
String propertyValue = “class”;
String propertyName = ”thumbnail”;
TestObject[] image = browser.find(atDescendant(parent[0], propertyName, propertyValue));
image[0].click();
1.3 Tracking changes
If you are dealing with a JavaScript driven site, for which elements are constantly modified, added or removed, you can see exactly what has changed and where these changes occurred, by searching the yellow highlighted elements source code. This indicates any changes in the HTML code after the initial load.
1.4 DOM inspection
DOM inspection can prove being very useful if you are testing on a website that gets data from external services, or sources. If this data is used to generate elements, or styles on the page, then you can use the DOM tab to inspect the JavaScript functions behind them.
When appropriate, objects include brief summaries of their contents so you can see what’s up without having to click. Objects are color coded so that HTML elements, numbers, strings, functions, arrays, objects, and nulls are all easy to distinguish.
As a conclusion Firebug proves to be a very useful tool for object inspection against any website, because of the variety of details you can see about any object on the page.
No Comments