Mastering Selenium Practice: Automating Web Tables with Demo Examples
Demo Webtable 1 (Static Table)
Company | Contact | Country |
---|---|---|
Maria Anders | Germany | |
Meta | Francisco Chang | Mexico |
Microsoft | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Adobe | Yoshi Tannamuri | Canada |
Amazon | Giovanni Rovelli | Italy |
Demo Webtable 2 (Dynamic Table)
Structure | Country | City | Height | Built | Rank | โฆ | |
---|---|---|---|---|---|---|---|
Total | 4 buildings | ||||||
Burj Khalifa | UAE | Dubai | 829m | 2010 | 1 | ||
Clock Tower Hotel | Saudi Arabia | Mecca | 601m | 2012 | 2 | ||
Taipei 101 | Taiwan | Taipei | 509m | 2004 | 3 | ||
Financial Center | China | Shanghai | 492m | 2008 | 4 |
Table of Content
1. What is Web Table?2. Automate Reading data from Static Web Table with Selenium
- Types of Web Table
- Static Table
- Dynamic Table
- Practice Exercises for automating Static Table
- Solution Code for Static Table
- Code Explanation
3. Automate Handling Dynamic Web Table with Selenium
- Practice Exercises for automating Dynamic Table
- Solution Code for Dynamic Table
- Code Explanation
2. What is a Web Table?
2.1. HTML Tags for Table:
In HTML, the <table>
tag is used to define a table on a webpage. It serves as the container for all the table-related elements, including table headers, table rows, and table data cells. Here are some commonly used tags associated with HTML tables:
<table>
: The main container tag that defines the start and end of the table.<thead>
: Represents the table header section. It is typically used to group the header content, which usually consists of<th>
(table header) elements.<tbody>
: Represents the table body section. It contains the main data rows of the table, typically defined using<tr>
(table row) elements.<tfoot>
: Represents the table footer section. It is used to group the footer content, which may include a summary or aggregation of information for the table. Footer content is often enclosed within<td>
(table data) elements.<tr>
: Defines a table row. It contains one or more<td>
(table data) or<th>
(table header) elements that represent the cells within that row.<th>
: Defines a table header cell. It is used to represent the header content for a column or row.<th>
elements are typically placed within the<thead>
section.<td>
: Defines a table data cell. It represents a data entry within a table row.<td>
elements are typically placed within the<tbody>
section.
Here's an example demonstrating the use of these tags in a table structure:
html<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: $25</td>
</tr>
</tfoot>
</table>
colspan
attribute and displays the total price.Here's the table representation of the example I provided:
diff+---------+-------+
| Product | Price |
+---------+-------+
| Item 1 | $10 |
| Item 2 | $15 |
+---------+-------+
| Total: | $25 |
+---------+-------+
In this representation, the table is displayed using ASCII characters to create a visual representation of the table structure. The header row is separated from the body and footer rows by a horizontal line. Each cell's content is aligned within its corresponding column, and the table content is surrounded by vertical and horizontal lines to create a clear distinction between cells and rows.
2.2. Types of Web Table
Some common types of tables include:
Static Table: A static table is a basic table where the content is predefined and does not change dynamically. It is typically created using HTML and CSS, and the data is hard-coded within the table structure. Static tables are useful for displaying fixed information that doesn't require frequent updates.
Dynamic Table: A dynamic table is a table that is populated with data dynamically, often retrieved from a database or through an API. The content of a dynamic table can change based on user interactions, data updates, or other events. JavaScript frameworks like React, Angular, or Vue.js are commonly used to create dynamic tables.
Responsive Table: A responsive table is designed to adapt and display effectively on different devices and screen sizes. It adjusts its layout and behavior based on the available screen space. Responsive tables often employ techniques such as horizontal scrolling, collapsing columns, or stacking rows to maintain readability and usability on smaller screens.
Data Grid: A data grid is a more advanced type of table that provides additional functionality for sorting, filtering, and manipulating data. It typically includes features like pagination, search, sorting columns, and editing capabilities. Data grids are commonly used in applications where managing and interacting with large datasets is required.
Pivot Table: A pivot table is a specialized table that allows for multidimensional data analysis and summarization. It enables users to reorganize and aggregate data based on different dimensions and criteria. Pivot tables are commonly used in data analytics and business intelligence applications.
Comparison Table: A comparison table is used to present and compare different attributes or features of items or options. It typically lists the items or options as rows and displays their characteristics or properties as columns. Comparison tables are often used in product comparisons, pricing plans, or feature comparisons.
3. Automate Reading data from Static Web Table with Selenium
3.1. Practice Exercises for Automating Demo Table 1 (Static Table)
i. Exercise:ย Read All the Values from the table row-wise and print them all.
- Open URL -ย https://www.techlistic.com/p/demo-selenium-practice.html
- Read the demo table 1's data row by row.
- And print the values of each cell of the table.
ii. Solution Code for Static Table (Demo Table 1):
public class Table {
WebDriver driver = new FirefoxDriver();
@BeforeTest
public void setup() throws Exception { ย
ย ย ย driver.manage().window().maximize();
ย ย ย driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
ย ย driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
}
@AfterTest
public void tearDown() throws Exception {
ย ย ย driver.quit();
}
@Test
public void print_data(){
//Get number of rows In table.
int Row_count = driver.findElements(By.xpath("//*[@id='post']/div[1]/table/tbody/tr")).size();
System.out.println("Number Of Rows = "+Row_count);
//Get number of columns In table.
int Col_count = driver.findElements(By.xpath("//*[@id='post']/div[1]/table/tbody/tr[1]/td")).size();
System.out.println("Number Of Columns = "+Col_count);
//divided xpath In three parts to pass Row_count and Col_count values.
String first_part = "//*[@id='post']/div[1]/table/tbody/tr[";
String second_part = "]/td[";
String third_part = "]";
//Used for loop for number of rows.
for (int i=1; i<=Row_count; i++){
//Used for loop for number of columns.
for(int j=1; j<=Col_count; j++){
//Prepared final xpath of specific cell as per values of i and j.
String final_xpath = first_part+i+second_part+j+third_part;
//Will retrieve value from located cell and print It.
String Table_data = driver.findElement(By.xpath(final_xpath)).getText();
System.out.print(Table_data +" ");
}
System.out.println("");
System.out.println("");
}
}
}
iii. Code Explanation step-by-step:
- In setup, the method does all the config stuff, like launch a browser, open the URL, set wait, etc.
- In the test method, findElements() method is used with xpath of the first table row (tr). It will extract all the table row elements and return a list.ย
- You can see, we have used the size() method at the end of the first line of the test method. This would return the size of the list. So, it's actually returning the no. of rows present on the table.
- Similarly, we get table columns using the findElements() method along with the first table column xpath (tc). And then use size() method to getย the no. of columns.
- Store the no. of rows and columns in integer variables.
- Now we create a custom xpath for table row and column, and we replace row and column index with variables. So, that we can iterate over every table row's td (cell) using for loop.
- We have used first for loop row count, which will iterate over every row.
- And second loop will iterate over every table data (td) of each row one by one.
- So, loops work in the following fashion:
- The first loop will be initialized with a row, which means i=1.
- Now, execution will enter the second loop, and this loop will iterate over every column element (td) present in the first row. So, here i will remain 1 but the value of j keeps on changing by +1. After the value of j reached the total no. of columns present in the table, the second loop exits.
- And now, the execution again comes to the first loop, and the value of i will be incremented by 1 and i becomes 2 a second time.
- The step will be executed again and so on until the value of i reaches the total no. of rows present in the table.
4. Automate Dynamic Web Table with Selenium
2. Second loop inside the first loop and it will fetch the no. of columns present in that particular row and then iterate the columns.
You may also like to read:
4.1. Practice Exercise:ย Verify that there are only 4 structure values present in the demo table
- Open URL -ย https://www.techlistic.com/p/demo-selenium-practice.html
- Read the 'Structure' column and find out the total number of structures present.
- Read the value of the 'Total' column and match it with the previous step.
- Use the list to store the structure values.
- Find the length of the list and match it with the expected value.
javaimport org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class StructureValuesVerification {
public static void main(String[] args) {
// Set the path to the chromedriver executable
System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
// Launch the Chrome browser and navigate to the webpage
WebDriver driver = new ChromeDriver();
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
// Find the second table on the page
WebElement table2 = driver.findElement(By.id("table2"));
// Find all rows in the table
java.util.List<WebElement> rows = table2.findElements(By.tagName("tr"));
// Count the number of rows that have structure values
int structureCount = 0;
for (WebElement row : rows) {
java.util.List<WebElement> cells = row.findElements(By.tagName("td"));
for (WebElement cell : cells) {
String cellText = cell.getText();
if (cellText.equals("Structure")) {
structureCount++;
}
}
}
// Verify that there are only 4 structure values present in the table
assert structureCount == 4;
// Close the browser
driver.quit();
}
}
In the code above,
- We first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the
get()
method of the WebDriver. - Next, we use the
findElement()
method of the WebDriver to locate the second table on the page, with the ID "table2". We then find all rows in the table using thefindElements()
method and the "tr" tag name. - We then loop through each row and each cell in the table, checking if the cell text is equal to "Structure". If it is, we increment the
structureCount
variable. - Finally, we use an assertion to check that the
structureCount
variable is equal to the expected value of 4. If the assertion fails, an AssertionError will be thrown. - After the assertion has been checked, we close the browser using the
quit()
method.
4.2. Practice Exercise:ย Verify that Burj Khalifa has a height of 829m with Selenium
- Open URL -ย https://www.techlistic.com/p/demo-selenium-practice.html
- Read the 'Structure' column and find Burj Khalifa
- Read the value of the height column for Burj Khalifa
ii. Solution Code (Java):
javaimport org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class BurjKhalifaHeightVerification {
public static void main(String[] args) {
// Set the path to the chromedriver executable
System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
// Launch the Chrome browser and navigate to the webpage
WebDriver driver = new ChromeDriver();
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
// Find the "Burj Khalifa" row in the table and get the height value
WebElement burjKhalifaRow = driver.findElement(By.xpath("//tr[contains(.,'Burj Khalifa')]"));
String burjKhalifaHeight = burjKhalifaRow.findElement(By.xpath(".//td[3]")).getText();
// Verify that the height of Burj Khalifa is 829m
assert burjKhalifaHeight.equals("829m");
// Close the browser
driver.quit();
}
}
In the code above,
- We first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the
get()
method of the WebDriver. - Next, we use the
findElement()
method of the WebDriver to locate the row in the table that contains the information for the Burj Khalifa. - Once we have located the row, we use the
findElement()
method again to locate the cell containing the height value. - We retrieve the text of this cell using the
getText()
method and store it in theburjKhalifaHeight
variable. - Finally, we use an assertion to check that the
burjKhalifaHeight
variable is equal to the expected value of "829m". If the assertion fails, an AssertionError will be thrown. - After the assertion has been checked, we close the browser using the
quit()
method.
iii. Solution Code (Python):
pythonfrom selenium import webdriver
# Launch the Chrome browser and navigate to the webpage
driver = webdriver.Chrome()
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html")
# Find the "Burj Khalifa" row in the table and get the height value
burj_khalifa_row = driver.find_element_by_xpath("//tr[contains(.,'Burj Khalifa')]")
burj_khalifa_height = burj_khalifa_row.find_element_by_xpath(".//td[3]").text
# Verify that the height of Burj Khalifa is 829m
assert burj_khalifa_height == "829m"
# Close the browser
driver.quit()
In the code above,
- We first launch the Chrome browser and navigate to the webpage. We then use the
find_element_by_xpath()
method to locate the row in the table that contains the information for the Burj Khalifa. - Once we have located the row, we use the
find_element_by_xpath()
method again to locate the cell containing the height value. We retrieve the text of this cell using thetext
attribute and store it in theburj_khalifa_height
variable. - Finally, we use an assertion to check that the
burj_khalifa_height
variable is equal to the expected value of "829m". If the assertion fails, an AssertionError will be raised. - After the assertion has been checked, we close the browser using the
quit()
method.
4.3. Practice Exercise:ย Verify that the last row (6th) of the table has only two columns with Selenium
Solution Code:
Here's the Selenium code in Java to verify that the 6th row of the table (Last Row) has only two columns:
javaimport org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class LastRowVerification {
public static void main(String[] args) {
// Set the path to the chromedriver executable
System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
// Launch the Chrome browser and navigate to the webpage
WebDriver driver = new ChromeDriver();
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
// Find the second table on the page
WebElement table = driver.findElement(By.id("t01"));
// Find the last row in the table
WebElement lastRow = table.findElement(By.xpath("//tr[last()]"));
// Find all columns in the last row
java.util.List<WebElement> columns = lastRow.findElements(By.tagName("td"));
// Verify that there are only two columns in the last row
assert columns.size() == 2;
// Close the browser
driver.quit();
}
}
In the code above, we first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get()
method of the WebDriver.
Next, we use the findElement()
method of the WebDriver to locate the first table on the page, with the ID "t01". We then find the last row in the table using the findElement()
method and the XPath expression "//tr[last()]"
.
We then find all columns in the last row using the findElements()
method and the "td" tag name.
Finally, we use an assertion to check that the size of the columns
list is equal to the expected value of 2. If the assertion fails, an AssertionError will be thrown.
After the assertion has been checked, we close the browser using the quit()
method.
4.4. Practice Exercise:ย Find the tallest structure in the table with Selenium
javaimport org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;
public class TallestStructureFinder {
public static void main(String[] args) {
// Set the path to the chromedriver executable
System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
// Launch the Chrome browser and navigate to the webpage
WebDriver driver = new ChromeDriver();
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
// Find the second table on the page
WebElement table = driver.findElement(By.id("t01"));
// Find all rows in the table
List<WebElement> rows = table.findElements(By.tagName("tr"));
// Initialize variables to hold the maximum height and structure name
double maxHeight = 0;
String maxName = "";
// Loop through each row in the table, skipping the header row
for (int i = 1; i < rows.size(); i++) {
// Find all columns in the current row
List<WebElement> columns = rows.get(i).findElements(By.tagName("td"));
// Get the height value from the second column
double height = Double.parseDouble(columns.get(1).getText().replace("m", ""));
// If the current height is greater than the current maximum height, update the maximum
if (height > maxHeight) {
maxHeight = height;
maxName = columns.get(0).getText();
}
}
// Print the name and height of the tallest structure
System.out.println("The tallest structure is " + maxName + " with a height of " + maxHeight + "m");
// Close the browser
driver.quit();
}
}
In the code above, we first set the path to the chromedriver executable and launch the Chrome browser. We then navigate to the webpage using the get()
method of the WebDriver.
Next, we use the findElement()
method of the WebDriver to locate the second table on the page, with the ID "t01". We then find all rows in the table using the findElements()
method and the "tr" tag name.
We initialize variables to hold the maximum height and structure name and loop through each row in the table using a for loop. We skip the first row, which contains the header row of the table.
For each row, we find all columns in the current row using the findElements()
method and the "td" tag name. We then extract the height value from the second column by using the getText()
method of the WebElement and removing the "m" unit from the string.
If the current height is greater than the current maximum height, we update the maximum height and structure name variables.
After looping through all rows in the table, we print the name and height of the tallest structure using the println()
method.
Finally, we close the browser using the quit()
method.
4.5. Practice Exercise: Read and Print all the values of rows and columns of the web table
public class DynamicTable {
WebDriver driver = new FirefoxDriver();
@BeforeTest
public void setup() throws Exception {
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");
}
@AfterTest
public void tearDown() throws Exception {
ย ย ย driver.quit();
}
@Test
public void test_Dynamic_Webtable() {
// Locate table
WebElement mytable = driver.findElement(By.xpath(".//*[@id='post']/div[1]/table/tbody"));
// Locate rows of table and save locators of each row in a list
List rows_table = mytable.findElements(By.tagName("tr"));
// Get no. of rows in table
int rows_count = rows_table.size();
// Loop will execute till the last row of table
for (int row=0; row<=rows_count; row++)
{
// locate columns(cells) of that specific row.
List Columns_row = rows_table.get(row).findElements(By.tagName("td"));
// Get no. of columns(cells) In that specific row.
int columns_count = Columns_row.size();
System.out.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++) {
// Retrieve text from that specific cell.
String celtext = Columns_row.get(column).getText();
System.out.println("Cell Value Of row number "+row+" and column number "+column+" Is "+celtext);
}
}
}
}
3.3. Code Explanation step-by-step:
- All steps are exactly the same wrt the 3.2 section of this post, except for one step.
- In the case of a static table, we are fetching the no. of columns before starting any for a loop. But in the case of a dynamic table, we are fetching columns after the first for loop has started.
- It means that we are fetching the columns for every row separately because we don't know while writing the code how each row would have how many columns.
- So, this is the way we are handling the dynamic web table in Selenium.
Finally, the analysis should either include on-page modifications to your web pages or a detailed report with instructions about how your webmaster or you can implement the changes. It should also include a qualified consultant's recommendations for additional on-page and off-page optimization. s10 flagcounter com
ReplyDeleteThis information is so useful and informative which you have shared here. It is beneficial for beginners to develop their knowledge. It is very gainful information. Thanks for sharing! here's something you can check website development dubai. Thank you.
ReplyDeleteUseful tutorial
ReplyDeleteI just wanted to remark that, as we've seen, this is a nicely crafted post. I learned something new from your essay, and it is also a very important topic about toledo ohio web design. Thank you for sharing this article.
ReplyDelete