Working with WebTable in Selenium

This below code with comments demonstrates how we can work with web tables in selenium.

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;

import java.util.List;

public class HerokuAppWebTable {

    @FindBy(xpath = ".//*[@id='table1']/thead/tr") private static WebElement tblHeader;
    @FindBy(xpath = ".//*[@id='table1']/tbody") private static WebElement tblBody;

//    @FindBy(xpath = ".//*[@id='table1']/tbody") private static WebElement tblBody;
//    this the webtable from the elemental selenium example. this is a simple td/tr type of table, and not one with DIV tags
//    the body of the table [without its headers] can be located by this xpath = ".//*[@id='table1']/tbody"
//    if we do a getText on this element, we can get the text of the entire table, without the headers
//    the column headers are not part of the table body, hence, the number of rows returned by this method is the actual number of data records present in the table
//    the number of rows in this body of table can be located by this xpath = ".//*[@id='table1']/tbody/tr"
//    to get the number of rows under the body of the table, use a combination of List <WebElement> and findElementsBy methods
//    So, in short, to work with web tables, locate the table body [by building xpath till tbody element], then get the data rows [by locating all elements with tr tag]
//    There is no direct way of working with web tables in selenium, no WebTable element!


//    There is another method to get the number of rows in the table as shown below
//    List<WebElement> rowNum = driver.findElements(By.xpath(".//*[@id='table1']/tbody/tr"));
//    System.out.println("Row Num = " + rowNum.size());
//    here we have specified the xpath till the row elements, without creating a table element first



    public HerokuAppWebTable(){}

    public void actionTable(){

        System.out.println("Entire text of the table is as below");
        String tableText = tblBody.getText();
//        System.out.println(tableText);

        List <WebElement> rows = tblBody.findElements(By.tagName("tr"));
        System.out.println("Number of rows in table = " + rows.size());

//        List <WebElement> cols = tblHeader.findElements(By.tagName("th"));
//        System.out.println("Number of columns in the table =" + cols.size());

//        findElements method returns WebElement of the type List, hence, we have to always declare List<WebElement> when using the findElements method.

        int rowCount = rows.size();

//        looping table data row by row
        for (int i = 0; i < rowCount; i++) {

//            locating all the columns of this row
//            we are not writing this step to get the count of columns [although that will be needed] but more so to get the child <td>
//            element present under the partent <tr> element of the row
//            this <td> element is the one that contains the data for that column [under the row that we are looping for]
//            so, we dont need to find the count of headers at the start, we are doing that coincidentally at this step
            List<WebElement> colRow = rows.get(i).findElements(By.tagName("td"));
            int colCount = colRow.size();

//            looping to get data for all the columns in this row
            for (int j = 0; j < colCount; j++) {

                String cellText = colRow.get(j).getText();
                System.out.println("cell text = " + cellText);

            }   //col loop
        }   //row loop

//        if we know the cell from which we want to capture the data, we can write something like below
//        getting data for the 3rd row and 2nd column - remember the index starts with 0!
        List<WebElement> dataRow = rows.get(2).findElements(By.tagName("td"));
        String cellValue = dataRow.get(1).getText();

//        and if we want to click on the link in the 6th col
        dataRow.get(5).click();


        }   //end of method

    }   //end of class

Working with HTML DOM and QTP

The other day a junior team member of mine was having hard time working with HTML DOM and QTP, he was confused between a lot of terms like tags, attributes, values, properties, DOM elements, GetROProperty, GetTOProperty....the list was endless, and as usual, he was already late to meet the deadline. So, instead of asking him to google all the 'gyaan' on this topic, I gave him a shot of red bull, as follows.....

•    The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a HTML document. The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. JavaScript uses DOM to add interactivity to HTML pages. The DOM is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation.

[ The most important thing to realize is - what we refer to as "Property" of an object in QTP, is actually the "Attribute" in HTML terms, and the Value of the Property is actually the value defined for that Attribute. ]

 You can modify the appearance and behavior of an HTML element by altering a DOM object's properties and calling its methods.
When you use the QTP's "Object Property" for a Web object, you actually get a reference to the DOM object. You get access to the native methods and properties of that web object.
This means that any operation that you can perform on a DOM object, you can also perform by running a <WebTestObject>.Object statement on the Web object.
For example, you can use the links property of the Internet Explorer document object to retrieve a link collection.
Example: Activate an Edit Box's Native Focus Method

    Set MyWebEdit = Browser("Mercury Tours").Page("Mercury Tours").WebEdit("username").Object
    MyWebEdit.focus

All the values of the attributes can be accessed by using the following syntax in DOM (as shown below):
    object.attribute
These attribute values can also be accessed via GetROProperty method in QTP.
Both the sets of code (the one with the DOM and the other with QTP methods) will return the same values, the only difference being that if a attribute does not exist, then the DOM returns an Error whereas the QTP GetROProperty method returns 0.

•    Common Methods used in DOM:

        •    Supported by QTP by defualt
                •    getElementById
                •    getElementsByName
                •    getElementsByTagName
           
When we use methods like the GetROProperty to read property values of the objects, QTP actually returns the values of these attributes that are defined for that object. Hence, if we use GetROProperty("href") it will return the value of the href attribute.
If we want to do this via DOM then we can get the value of href property by using the below code:
sHref = oDOM.Document.getElementById("OpenAcct").href

•    DOM vs DP:   
    Code written in DOM will be substantially faster than the code written in DP (to perform the same operation), because there will be no overhead of Object identification with DOM. QTP UnP Pg 202.
           
    Methods like GetROProperty, GetTOProperty, etc will not be supported by DOM elements directly because they are QTP specific methods. However, these methods will be supported by DP because DP is nothing but the same QTP code.
                       
•    Tools: Even though QTP has a good built in Object-Spy, its nowhere close to what Firebug add-on for FireFox can do, and is a must in anyone' arsenal of tools.

•    WebTables: Now a days modern websites dont use the 'table' tags for building their pages and displaying content, because of the following reasons

• More number of code needs to be written and maintained overtime as compared to the use of div tags
• It makes the page structure rigid
• It tries to mix the content and the style, which is not a good practice
• Its difficult to display the data correctly on mobile devices with table tags

If there are multiple nested table tags in the html code for displaying data in tabular format, then that's a poorly written code.
As opposed to this, DIV tags provide easy maintenance, faster loading and search engine friendly features, as described here

Hence, now a days only DIV tags are used to structure data in tabular format. This also means that 'grids' would be used to display data in tabular format. Grids and Tables are 2 different things in HTML world.



Having said all this, it does not mean he can get away with not having to understand HTML, DOM, and related concepts, as I have ensured that this goes in his appraisal goal sheet, and I would suggest you do the same, if not done already.

Happy learning!!!