HTML table structure and wrapped objects

An HTML table is a collection of multiple <TR> (table row) tags. Each <TR> tag encloses multiple <TD> (table definition) tags, each of which corresponds to a cell. All such <TR> and <TD> tags, together, can be enclosed under one <TBODY> (table body) tag. Figure 1 shows this structure.

HTML tables are an integral part of Web applications, and they vary from simple to complex in their structures. They can hold objects within their cells, such as text fields, check boxes, radio buttons, push buttons, images, select lists, and so on, as shown in Figure 2.

If you examine the source code of the Web page shown in Figure 2, each of the objects are enclosed within open <TD> and close </TD> tags (in other words, wrapped inside of the table cell).

Back to top

Identifying wrapped objects

By default, the IBM® Rational® Functional Tester Test Object Inspector feature identifies a text field that is wrapped inside of a table cell, with the parent hierarchy, as shown in Figure 3. The text field will not have any reference to the table cell enclosing it, and it will be shown as a direct child of the HTML table.

By default, you cannot see objects of Html.TBODY, Html.TR, and Html.TD classes, because they are not mappable objects for RFT. You can see these in the object hierarchy by selecting Options and clearing the Hide not mappable option (see Figure 4).

After you clear this option, the Test Object Inspector will identify a text field that is wrapped inside of an HTML table cell as a child of the TD class object, rather than identifying the HTML table directly (Figure 5).

In Rational Functional Tester, working with objects wrapped in table cells relative to the row and column (that is, the table cell) is not as straight-forward as working with these objects without any reference to the cell.

Back to top

Operations on wrapped objects that reference table cells

There are numerous actions or operations that you can perform on objects enclosed in an HTML table cell. During automation, you can find frequent opportunities to automate scenarios involving these operations on objects that are enclosed in HTML table cells with reference to the row and column (that is, the cell).

Such operations include these examples:

• Setting the value of a text field in Row 3, Column 4, or Cell(3, 4), of an HTML table
• Selecting an option from a list box in Row 5, Column 2, or Cell(5, 2)
• Clicking a radio button in specified table cell
• Setting the state of a check box (for example, checked or unchecked) in a specified table cell
• Clicking a button or an image in a specified table cell

In addition to performing these actions on objects, you can apply the same solution to extract or generate output of the object properties. You can also implement verification of object state and properties.

Back to top

Three-step solution

There are three steps necessary to automate operations on objects enclosed in HTML table cells using Rational Functional Tester:

1. Find and set the object of an HTML table cell by using the find() method, based on row and column indices.
2. Using the cell object, find the enclosed object on which action needs to be taken (for instance, text box, button, and so on).
3. Perform the required action (for example, click, select, extract properties, and so on) on the object.

The steps that follow show how this three-step solution works. This example sets the value for a text box wrapped within a table cell.

Step 1. Find an object of an HTML table cell

Assuming that tableObj is the HTML table object of the TestObject class, use code like that shown in Listing 1.

TestObject cellObj = tableObj.find(atList(
                    atChild(".class" , "Html.TBODY"),
                    atChild(".class" , "Html.TR",".rowIndex", rowIndex),
                    atChild(".class" , "Html.TD",".cellIndex",colIndex)
                    ), false)[0];

This code employs the power of the find() method together with the atList() and atChild() methods to get an object of an HTML table cell specified with row and column indices. The second parameter with a value of false specifies that the object that you are finding is not a mappable object.

Step 2. Find the wrapped object in the cell

To get an object wrapped inside of a table cell (for example, a text box), use code like that shown in Listing 2.

TestObject cellTxtObj = cellObj.find(atDescendant(".class","Html.INPUT.text"))[0];

If there is more than one object of the same type in a cell (for example, two or more text boxes in the same cell), use the class index to identify the required object. Assuming that objIndex is the class index of the object that you are concerned with in the cell, you can get the object by using the approach shown in Listing 3.

TestObject cellTxtObj = cellObj.find(atDescendant(".class","Html.INPUT.text"))[objIndex];

Step 3. Perform the actions on the wrapped object

When the find() method in Step 2 returns a TestObject, you need to assign it to a class that is relevant to the object so that you can perform the required actions. In Listing 4, cellTxtObj is categorized as TextGuiTestObject to execute the setText() method.

((TextGuiTestObject)cellTxtObj).setText(txtValue);

Back to top

The solution to finding and setting HTML objects

You can use the implementation that Listing 5 shows to find any HTML objects wrapped inside of an HTML table cell. After you have found and set the objects, you can perform any required operations on them.

/* This method will return an object of the specified HTML class, wrapped inside
a table cell 
 * @return TestObject: Object of wrapped HTML element or null (if the object
is not found)  
 * @param tableObj: the concerned web table object  
 * @param rowIndex: the row index of the concerned cell (starting from 0)
 * @param colIndex: the column index of the concerned cell (starting from 0)
 * @param htmlClass: the HTML class of the object wrapped inside the cell
 * @param classIndex: the HTML class of the object wrapped inside the cell
 */

public TestObject childObject(TestObject tableObj, int rowIndex, int colIndex, 
String htmlClass, int classIndex)
        {
        TestObject cellObj = tableObj.find(atList(
                            atChild(".class" , "HTML.TBODY"), 
                            atChild(".class" , "HTML.TR",".rowIndex", rowIndex),
                            atChild(".class" , "HTML.TD",".cellIndex",colIndex)
                                      ), false)[0];
        TestObject []wrappedObj = cellObj.find(atChild(".class",htmlClass));
        
        if(wrappedObj.length < classIndex + 1)
              return null;
        else	
              return wrappedObj[classIndex];
        }

Use examples

The following examples (Listings 6-8) assume that hTable is an object of a class that has the childObject() method defined.

TestObject cellCheckboxObj = hTable.childObject(tableObj,4,4,"Html.INPUT.checkbox",0);
((ToggleGUITestObject)cellCheckboxObj).setState(SELECTED);

TestObject cellBtnObj = hTable.childObject(tableObj, 5, 6, "Html.INPUT.button", 1);
((GuiTestObject)cellBtnObj).click();

TestObject cellTxtObj = hTable.childObject(tableObj, 2, 2, "Html.INPUT.text", 0);
String textBoxValue = cellTxtObj.getProperty(".value").toString();

Back to top

Working with the sample files

1. Download the developerWorks.zip file, which is the sample Rational Functional Tester project. (see Downloads).
2. Extract the zipped file to developerWorks folder.
3. Launch Rational Functional Tester, select File > Connect to a Functional Test Project, browse to the developerWorks folder, and click Finish. The functional test project will open in Rational Functional Tester.
4. Download and extract the SampleHtmlTable.zip file, which has the sample Web page with a complex HTML table, as shown in Figure 2.
5. Open the dWSample.html file in Microsoft Internet Explorer®.
6. In Rational Functional Tester, run dWExample.java against dWSample.html.

Back to top

What you have learned

This article has shown you an approach for automating objects that are enclosed in an HTML table cell using IBM Rational Functional Tester. This approach includes performing different actions on these objects and extracting object properties that you can use to implement verification points that you define. You can use this technique as a foundation for developing solutions that are applicable to more complex HTML tables.

Back to top

Downloads

Information about download methods

Resources

Learn

• Learn about other applications in the IBM Rational Software Delivery Platform, including collaboration tools for parallel development and geographically dispersed teams, plus specialized software for architecture management, asset management, change and release management, integrated requirements management, process and portfolio management, and quality management.
  
  
• Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products.
  
  
• Explore Rational computer-based, Web-based, and instructor-led online courses. Hone your skills and learn more about Rational tools with these courses, which range from introductory to advanced. The courses on this catalog are available for purchase through computer-based training or Web-based training. Additionally, some "Getting Started" courses are available free of charge.
  
  
• Subscribe to the Rational Edge newsletter for articles on the concepts behind effective software development.
  
  
• Subscribe to the IBM developerWorks newsletter, a weekly update on the best of developerWorks tutorials, articles, downloads, community activities, webcasts and events.
  
  
• Browse the technology bookstore for books on these and other technical topics.
  
  
• Explore Rational Functional Tester product page to find technical content and resources for IBM® Rational® Functional Tester.
  
  
• New capabilities make it easier than ever to test more applications from one test tool. To explore, visit What's new in IBM Rational Functional Tester Version 8.0
  
  

Get products and technologies

• Download these IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Tivoli®, and WebSphere®.
  
  
• Download a free IBM Rational Functional Tester trial version to test your own application.
  
  

Discuss

• Get involved in the developerWorks Functional and GUI Testing forum, which is a place for users of Rational Functional Tester and for the discussion of general testing topics.
  
  
• Check out developerWorks blogs and get involved in the developerWorks community.
  
  

About the author

Prakash Dewan é membro da equipe de engenharia IBM Cognos nos IBM Software Labs, em Pune, Índia. Além de seus testes de automação usando o Rational Functional Tester, ele trabalha na verificação e validação de vários recursos e funções do produto. Prakash tem mestrado em Aplicativos de Computador e tem grande habilidade em desenvolver estruturas de automação. Ele também tem muita experiência em treinamento de tópicos avançados de testes e contribuiu para vários artigos da base de conhecimento.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• HTML table structure and wrapped objects
• Identifying wrapped objects
• Operations on wrapped objects that reference table cells
• Three-step solution
• The solution to finding and setting HTML objects
• Working with the sample files
• What you have learned
• Downloads
• Resources
• About the author
• Comments

Next steps from IBM

• Try: Rational Functional Tester
• Webcast: IT performance management: Measure, monitor and modify for operational excellence
• Briefing: Jazz and Rational Team Concert
• Buy: Rational Functional Tester

My developerWorks community

Dig deeper into Rational on developerWorks

Try Rational System Architect

See how this fully integrated collection of models and documents can help you better align your IT systems and infrastructure to simplify business processes

Special offers