HomeSelenium

Selenium Locators – Using XPath Expressions with HTML Table

Selenium Locators – Using XPath Expressions with HTML Table

<<Previous Post                            << Complete Tutorial>>                              Next Post>

In continuation of the previous articles on Relative XPath Expressions, I am going to explain the usage of Relative XPath Expressions with HTML tables in this article.

Pre-requisites:

Let’s get started.

Selenium Locators – Using XPath Expressions with HTML Tables

Follow the below steps to practice Relative XPath Expressions on the below Web Page:

1) Open http://omayo.blogspot.com/ in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and its usage in Chrome Browser here ) as shown below:

Relative XPath - More complex application

2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:

Relative XPath - ChroPath

3) Select ‘Rel XPath’ option from the ‘Selectors’ dropdown as shown below:

4) Let’s locate the entire Table in the page using Relative XPath Expression.

As we already know that all the tables are created using <table> .. </table> in the HTML code.

In order to locate all the table tags in the page, we have to use the Relative XPath Expression //table

Before locating any specific table, let’s inspect the below table from the web page as shown below:

XPath Expressions Tables - Inspect

Observe that the HTML code for the above-inspected table got highlighed (table tag with id attribute value is available) as shown below:

XPath Expressions Tables - HTML code

Using the above-highlighted HTML code, we can create the below Relative XPath Expression for locating the Table as //table[@id=’table1′]

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the table on the page as shown below:

XPath Expressions Tables - Table Located

5) Let’s locate all the rows in the table using the Relative XPath Expression.

Relative XPath Expression for locating the above entire table is //table[@id=’table1′]

As <tr> tags are the grandchildren of the <table> tag, we can use the Relative XPath Expression //table[@id=’table1′]//tr to locate all the rows in the table.

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the all the 5 rows in the table as shown below:

XPath Expressions Tables - Table Rows Located

6) Let’s locate all the table headings in the table using the Relative XPath Expression.

Relative XPath Expression for locating the above entire table is //table[@id=’table1′]

As <th> tags are the grandchildren of the <table> tag, we can use the Relative XPath Expression //table[@id=’table1′]//th to locate all the table headings in the table.

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the all the table headings in the table as shown below:

XPath Expressions Tables - Table Headings Located

7) Let’s locate all the table data in the table using the Relative XPath Expression.

Relative XPath Expression for locating the above entire table is //table[@id=’table1′]

As <td> tags are the grandchildren of the <table> tag, we can use the Relative XPath Expression //table[@id=’table1′]//td to locate all the table data in the table.

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the all the table data in the table as shown below:

XPath Expressions Tables - Table data Located

8) Let’s find all the cells in the table (i.e. table headings + table data):

From the above demonstrations, we have used //table[@id=’table1′]//th for locating all the table headings.

Also, from the above demonstrations, we have used //table[@id=’table1′]//td for locating all the table data.

To locate all the cells in the table, we need to locate all the table heading along with table data by using the combining the above two Relative XPath Expressions into a single express as shown below:

//table[@id=’table1′]//th | //table[@id=’table1′]//td

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the all the cells in the table as shown below:

XPath Expressions Tables - Table cells Located

9) Let’s find the second data row and third column using Relative XPath Expression.

Relative XPath Expression for locating the above entire table is //table[@id=’table1′]

As <tr> tags are the grandchildren of the <table> tag, we can use the Relative XPath Expression //table[@id=’table1′]//tr to locate all the rows in the table.

And to locate the second data row in the table, we have to use the Relative XPath Expression  //table[@id=’table1′]//tr[2]

And to locate the second row and the third column in the table, we have to use the Relative XPath Expression:  //table[@id=’table1′]//tr[2]//td[3]

Let’s execute the above Relative XPath Expression in ChroPath and observe that it is locating the second data row and third column in the table as shown below:

XPath Expressions Tables - 2 Data Row 3 Col

Here ends this article on Using XPath Expressions with HTML table.

In the next article, I will demonstrate the next set of Relative XPath Expressions in a practical way.

Next Steps:

  • > To learn more about Selenium, continue to the next post (Click on Next Post link below)
  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *