Working with tables using Selenium WebDriver

In any Web Application representing data and fetching the data from tables is a usual scenario. In this tutorial (working with tables using selenium webdriver) we will learn How to work with static or dynamic table and fetch data?

Fetching Data from Static Tables

Tables in HTML are represented with <table> tag. Rows in a table are represented with <tr> tag and cells/data in a row is represented with <td> tag.

Generally, developers do not provide id’s to rows (<tr> tags) and cells (<td> tags). In that case, we are left with one option to write dynamic XPath.

Let us consider a table which has two columns – Subject Name and Subject code

If we see the html code of the above table, there is an Id (id=’subject_code_table’) assign to this table; we can use this Id in Xpath locator to identify the table. Now to go inside this table, we will be accessing the rows and columns.

<table id = 'subject_code' align='center' class='gh-ac'>
			<tbody>
				<td>
					<td>Subject</td>
					<td>Subject Code</td>
				</td>
				<tr>
					<td>Hindi</td>
					<td>2001</td>
				</tr>
				<tr>
					<td>Maths</td>
					<td>3001</td>
				</tr>
				<tr>
					<td>Science</td>
					<td>4001</td>
				</tr>
				<tr>
					<td>Computer Science</td>
					<td>4004</td>
				</tr>
			</tbody>
		</table>

Let say the scenario was to fetch subject code of Maths. In this case, we can write its xpath as below:

Xpath:

//table[id='subject_code']/tbody/tr[3]/td[2]

Fetching Data from Dynamic Tables

Now sometimes these tables get data dynamically, say it is updated from some database. To iterate a table and fetch code of each subject, we can first fetch the number of rows from the table and then iterating over each row we can fetch the number of cells from each row and then iterate over each cell till we get the required field.

int numOfRow = Driver.findElements(By.xpath("//table[id='subject_code']/tbody/tr")).size();

for(int iRow=1; iRow<= numOfRow; iRow++) {
            int numOfCell = Driver.findElements(By.xpath("//table[id='subject_code']/tbody/tr[iRow]/td"));
     for(int iCell=1; iCell<= numOfCell; iCell++){
       String Subject = Driver.findElement(By.xpath("//table[id='subject_code']/tbody/tr[iRow]/td[1]")).getText();
       String Subject_code = Driver.findElement(By.xpath("//table[id='subject_code']/tbody/tr[iRow]/td[2]")).getText();
        
            if(subject.equals("Maths")){
                      System.Out.Println("Subject : "+ Subject + " and its code is : "+subject_code);
}

}
}

The above code you see fetches the number of rows from a table and then iterating over each row to get the number of cells from a row. In next step, a loop is written to get the number of cells from each row and iterating over each cell to fetch the text written in it. As in above table number of cells in each row is 2. The first value will return Subject name and second value will return its value. If the cell value is equal to a particular subject (say Maths), from the second cell we are fetching the subject code.

Comment below if you have any questions regarding how to working with tables using selenium webdriver!

PS: For any questions, queries and feedback, feel free to write us at saurabh@qatechhub.com or support@qatechhub.com. Happy Learning ?