How to access web table element in selenium webdriver

How to access web table element in selenium web driver

There are 2 types of HTML table possible in the web.

• Static web table.
• Dynamic web table. 

Static web table:  Normally static tables are static in nature, means a number of column and row is fixed, it will never increase in runtime and data inside the each cell is also fixed.

Dynamic web table:  It is just opposite of static web table, here row, column and cell data could be not fixed or we can say dynamic.  It will change at runtime. 

We need to follow few steps to retrieve data from web table 

1. We need to uniquely identify table object.
2. Count number of rows present in the table.
3. Count number of column present in each row. 
4. Get the value from each cell.  

Step 1. We need to uniquely identify table object

Now we can start with the below table. We need to identify the web table uniquely. 

https://www.w3schools.com/html/html_tables.asp

Here we can see there an id for that highlighted table.  The id is “ customers “.  We know how to identify the web element using XPath or other selenium locators, you can refer my previous post also. 

Selenium locators and How to Identify Web Elements Using Selenium Xpath and name.

XPath for this table object

//*[@id="customers"]

Java code 

driver.findelement(By.xapth(“//*[@id="customers"]”);

Step 2: Count Number of rows present in the table.

In HTML table row denoted as <tr>. So we need to count the number of <tr> present under the table. 

We can directly count the number of rows is available on the table. 

XPath for row count

//*[@id='customers']/child::*/child::tr

Above XPath will return 7 element

Java code 

int rowCount = driver.findElements(By.xpath("//*[@id='customers']/child::*/child::tr")).size()

Step 3: Count Number of column present in each row.

Now we need to iterate each row and find out how many columns are there for that row. 

Xpath for column count for first row (except header)

//*[@id='customers']/child::*/child::tr[1]/child::td

Above XPath will return 3 <td> tag

Java code  

int columnCount = driver.findElements(By.xpath//[@id='customers']/child::*/child::tr[1]/child::td")).size()

Step 4: Get the value from each cell.

Java code

driver.findElement(By.xpath("//*[@id='customers']/child::*/child::tr["+row+"]/child::td["+column+"]"));
element.getText()

Complete java code to iterate each row and column and print the value 

 public static void main(String argc[]){  
 System.setProperty("webdriver.chrome.driver","D:/workspace/TestProject/src/chromedriver.exe");   
 driver = new ChromeDriver() ;  
 driver.get("https://www.w3schools.com/html/html_tables.asp");  
 int rowCount = driver.findElements(By.xpath("//*[@id='customers']/child::*/child::tr")).size();  
 for (int i=1;i<=rowCount;i++){  
   int columnCount =  driver.findElements(By.xpath("//*[@id='customers']/child::*/child::tr["+i+"]/child::td")).size();  
    for(int j=1;j<=columnCount;j++){  
      WebElement element =  driver.findElement(By.xpath("//*[@id='customers']/child::*/child::tr["+i+"]/child::td["+j+"]"));  
      System.out.println(element.getText()+ "  ");  
    }  
   System.out.println();  
  }   
   driver.quit();  
 }  

What is Xpath , Absolute XPath and Relative XPath?

What is XPath ?

XPath (XML Path Language), as defined by the World Wide Web Consortium (W3C), is a query-language for selecting nodes from an XML document. In addition, XPath can be used to compute values (e.g., strings, numbers, or Boolean values) from the content of an XML document. The following statements are important information regarding XPath:

XPath is a syntax for defining parts of an XML document
XPath uses path expressions to navigate in XML documents
XPath contains a library of standard functions
XPath is a major element in XSLT and in XQuery
XPath is a W3C recommendation


How to use Absolute XPath and Relative XPath?

Using Absolute XPath

Using Absolute XPath the user can directly access or find elements from the DOM. The main disadvantage of using Absolute XPath is that, if there are any changes made in the path of the element then that XPath fails to identify that particular element.

Absolute XPath begins with a single forward slash "/", which means you can select the element from the root.

Here is an example of Absolute XPath

/html/body/div[5]/div[2]/div/div[2]/div[2]/h2[1]


Using Relative XPath

Using Relative XPath the user can select an element from anywhere from the DOM…
Relative XPath starts with the double forward slashes ‘//’, which means it can search the element anywhere in the webpage.

Here is an example of Relative XPath 

.//*[@id='answers']/h2[1]/a[1]

Selenium Complex and Dynamic XPath

Selenium XPath using 'AND' operator.

I can assume  that you already know what is xpath , if you don't know you can refer my post What is Xpath , Absolute XPath and Relative XPath?  In selenium automation, if, using other locators, a particular element is not found then XPath is used to identify that particular element. XPath is also very powerful operator to identify complex or dynamic elements. Another reason to use XPath is using it with ‘AND’ operator.  Sometimes, when the user is not able to identify an element with single HTML property because more than one HTML property is required to identify one single element uniquely, the best possible choice is to identify the element is using XPath with ’AND’ operator. Here is an example:
Syntax

 //tagname[@attribute = '<value>' AND @attribute = '<value>']

 Example

 //*[@type='text' and @aria-label='First name' and @class= 'inputtext _58mg _5dba _2ph-']

Note: "*" means all note


Selenium XPath using 'OR' operator

Just like the 'AND', ‘OR’ is also a very powerful operator for identifying a web element. Suppose there is a situation where in a web page, after clicking the ‘submit’ button we are not sure what value it will result in. In this case the ‘success message’ may turn up as 'Successfully saved' or ’Your data saved successfully'. The elements in both the cases are unique in nature, but they might lead to the same result. Here, using the ‘OR’ operator we can avoid this problem.
Syntax

//tagname[@attribute = '<value>' OR @attribute = '<value>']


 Example

 //*[text()='Successfully saved' OR text()='Your data saved successfully']

Note: "*" means all note

XPath to get all child nodes of an element 

 Example

//*[@id='reg_form_box']/child::*

The above mentioned XPath will return all the child note of the element whose id is 'reg_form_box'


Few useful XPath 

1. Contains() function
2. Starts-with function
3. Text() function

XPath axes methods

• Following
• Ancestor
• Child
• Preceding
• Following-sibling
• Parent
• Self
• Descendant

How to use Contain function in XPath


//*[contains(text(),'Search')]

//ul[@class='featureList' and contains(li, 'Type')]



How to use Starts-with function in XPath

//*[starts-with(text(),'Search')]

This XPath will find any text which start with "Search" from DOM. If a DOM contains below to HTML line , then this XPath will return both the elements.

<div id = 'username'>Search you name here </div>
<div > Searching your text</div>

How to use Text() function in XPath

//*[text()='Delhi']

This will search for "Delhi" text from complete DOM.

How to use the "Following" axes method function in XPath

//*[@id="ch_login_email"]//following::input

This above mentioned expression selects all the elements in the document of the current node( ) where the HTML tag is ‘input’.
If you want to select one particular element then you can use index.

 //*[@id="ch_login_email"]//following::input[1]

It will select first element .