What is a Web Table?
A Web table is a collection of rows and columns. Additionally, for a Web table, data storage happens in cells. Moreover, tables are used not only in data sheets but also in organizing web pages.
A Web table contains the following tags typically:
- table – First, indicates a table.
- tbody – Second, it defines a container for rows and columns.
- tr – Third, it specifies a row in the table.
- td / th – Fourth is table data/table header indicating columns in respective table rows.
A basic web table
Additionally, a basic web table’s HTML code looks like below:
Also, handling Web tables is perhaps much more complicated than any other elements or controls. Subsequently, this article will show you how to handle web tables using Katalon Studio. Subsequently, we will cover the following topic in this article:-
- How to handle web tables with Katalon Studio?
Handle web tables with Katalon Studio
Example 1: You want to get a text from a Web table and check/ verify it.
Scenario: Let’s say we need to figure out which country the ‘Pay talk‘ company in the above table belongs to.
Firstly, we will find the location of the table. Secondly, we will store all the table elements on the list. After that, we will run a loop and iterate through each row and column. Finally, we will capture the value in each cell.
Script Mode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import org.openqa.selenium.By as By import org.openqa.selenium.WebDriver as WebDriver import org.openqa.selenium.WebElement as WebElement import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI WebUI.openBrowser('D:\\\\Katalon Tutorial\\\\Katalon Tutorial\\\\WebTable_Handling_Scenario1.html') WebUI.maximizeWindow() WebDriver driver = DriverFactory.getWebDriver() 'Expected value from Table' String ExpectedValue = "Pay Talk"; 'To locate table' WebElement Table = driver.findElement(By.xpath("//table/tbody")) 'To locate rows of table it will Capture all the rows available in the table' List<WebElement> rows_table = Table.findElements(By.tagName('tr')) 'To calculate no of rows In table' int rows_count = rows_table.size() 'Loop will execute for all the rows of the table' Loop: for (int row = 0; row < rows_count; row++) { 'To locate columns(cells) of that specific row' List<WebElement> Columns_row = rows_table.get(row).findElements(By.tagName('td')) 'To calculate no of columns(cells) In that specific row' int columns_count = Columns_row.size() println((('Number of cells In Row ' + row) + ' are ') + columns_count) 'Loop will execute till the last cell of that specific row' for (int column = 0; column < columns_count; column++) { 'It will retrieve text from each cell' String celltext = Columns_row.get(column).getText() println((((('Cell Value Of row number ' + row) + ' and column number ') + column) + ' Is ') + celltext) 'Checking if Cell text is matching with the expected value' if (celltext == ExpectedValue) { 'Getting the Country Name if cell text i.e Company name matches with Expected value' println('Text present in row number 3 is: ' + Columns_row.get(2).getText()) 'After getting the Expected value from Table we will Terminate the loop' break Loop; } } } |
Manual Mode:
Additionally, you can switch to manual mode tab to view the test case step by step.
Example 2: Say, you want to carry out actions on the Web table below.
Scenario:
Let’s say we need to edit a student record that has the graduation year of 2018
Script Mode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import org.openqa.selenium.By as By import org.openqa.selenium.WebDriver as WebDriver import org.openqa.selenium.WebElement as WebElement import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI WebUI.openBrowser('D:\\\\Katalon Tutorial\\\\Katalon Tutorial\\\\WebTable_Handling_Scenario2.html') WebUI.maximizeWindow() 'Expected value from Table' String ExpectedValue = '2018' WebDriver driver = DriverFactory.getWebDriver() 'To locate table' WebElement Table = driver.findElement(By.xpath('//table/tbody')) 'To locate rows of table it will Capture all the rows available in the table ' List<WebElement> Rows = Table.findElements(By.tagName('tr')) println('No. of rows: ' + Rows.size()) 'Find a matching text in a table and performing action' 'Loop will execute for all the rows of the table' table: for (int i = 0; i < Rows.size(); i++) { 'To locate columns(cells) of that specific row' List<WebElement> Cols = Rows.get(i).findElements(By.tagName('td')) for (int j = 0; j < Cols.size(); j++) { 'Verifying the expected text in the each cell' if (Cols.get(j).getText().equalsIgnoreCase(ExpectedValue)) { 'To locate anchor in the expected value matched row to perform action' Cols.get(4).findElement(By.tagName('a')).click() table: break } } } |
Manual Mode:
In this case, switch to manual mode tab to view the test case step by step.
Conclusively, the examples above provide a basic understanding of how to handle web tables in Katalon Studio. Additionally, if you are new to automation testing, we recommend taking advantage of Manual Mode in Katalon Studio. Moreover, for advanced testers, Script Mode provides you flexibility in creating and manipulating tests. In addition to this, you can download the source code here.
