In the last Selenium WebDriver tutorial, we learned various commonly and routinely used Selenium WebDriver commands, including important topics like handling iframe and exceptions in Selenium scripts.

Moving ahead in our comprehensive series of tutorials on Selenium, we will discuss handling Web tables, iframe, and dynamic elements which are an essential part of any web project.

This tutorial comprises 3 different topics and their handling mechanisms in selenium script.

1. Web Tables/HTML tables
2. Frames
3. Dynamic elements

#1) Web Tables/HTML Tables

In this module, we will learn about the web tables or HTML tables on a web page, tags available in HTML, and how to handle web tables dynamically.

Web tables are a group of elements that are logically stored in a row and column format. It is used to organize similar information on a web page.

Below is an example of an HTML table:

Below is the snippet of the HTML structure of an HTML table:

The tags listed below are defined in HTML tables:

1.’table’ tag defines an HTML table.
2.’tbody’ tag defines a container for rows and columns.
3.’tr’ defines rows in an HTML table.
4.’td’/’th’ defines the column of an HTML table.

Find the details of a web table:

There are many ways we can handle a web table.

Approach #1:

Below is the xpath of one of the cells in html table. Let’s say “firstname”

//div[@id=’main’]/table[1]/tbody/tr[1]/th[1]

tr[1] defines first row and th[1] defines the first column.

If several rows and columns are always constant, our HTML table will always have 5 rows and 3 columns.

for(int numberOfRows=1; numberOfRows<=5; numberOfRows++)
{
for(int numberOfCol=1; numberOfCol <=3; numberOfCol++)
{
System.out.println(driver.findElement(By.xpath
(“//div[@id='main']/table[1]/tbody/tr
[“+numberOfRows+”]/th[“+numberOfCol+”]”)));
}
}

Except for row and column numbers, each component of XPath remains the same. So you can iterate using “for loop” for each row and column as mentioned above.

Approach #2:

The first approach is best suitable for the table, which doesn’t change its dimensions and always remains the same. The above approach will not be a perfect solution for dynamically changing web tables.

Let’s take the above HTML table as an example:

WebElement htmltable=driver.findElement(By.xpath("//*[@id='main']/table[1]/tbody"));
List<WebElement> rows=htmltable.findElements(By.tagName("tr"));
 
for(int rnum=0;rnum<rows.size();rnum++)
{
List<WebElement> columns=rows.get(rnum).findElements(By.tagName("th"));
System.out.println("Number of columns:"+columns.size());
 
for(int cnum=0;cnum<columns.size();cnum++)
{
System.out.println(columns.get(cnum).getText());
}
}

Step #1: First get the entire HTML table and store this in a variable ‘htmltable’ of type web element.

Step #2: Get all the rows with the tag name ‘tr’ and store all the elements in a list of web elements. Now all the elements with the tag ‘tr’ are stored in the ‘rows’ list.

Step #3: Loop through each row and get the list of elements with tag ‘th’. ‘rows.get(0)’ will give the first row and ‘findElements(By.tagName(“th”))’ will give a list of columns for the row.

Step #4: Iterate using ‘columns.getsize()’ and get the details of each cell.

Note: The above approach will be most suitable if the table dimensions change dynamically.

This concludes the topic of how to handle web tables in selenium. Next, we will learn about handling an element inside a frame.

#2) Frames

In this section, we will learn about the frames on a web page and how to identify the frames. Also, we will find out how we can handle a frame in Selenium WebDriver.

Many developers like to place elements inside a frame. The frame is just like a container where a few elements can be grouped.

Identification of a frame:

Different ways to know if the element is present inside a frame or not

#1) Right-click on the element. Check if the “This Frame” option is available. If This frame option is available, it means that the element is inside a frame.

#2) View the page source of the web page and check if any tag is available for ‘iframe’.

Verify Number of frames in a webpage:

All the frames have the tag name as “iframe”.

List<WebElement> frameList=driver.findElements(By.tagName(“iframe”));
System.out.println(frameList.size());

In the above example: frameList will have all the list of frames and frameList.size() will give the number of frames.

Handling an element inside the frame:

If an element is inside a frame, then the control has to switch to the frame first and then start operating on the elements.

Step #1: To switch inside a frame:

driver.switchTo().frame(1); //pass frame number as parameter.
or
driver.switchTo().frame(“frame Name”); //pass frame name as parameter.
or
driver.switchTo().frame(“xpath of the frame”);

Step #2: After switching inside a frame, selenium will operate on elements.

driver.findElement(//*[@id='username']).sendKeys(“username”);
driver.findElement(//*[@id='pass']).sendKeys(“password”);

Here, we have learned how to handle an element inside frame and next we will cover about the different ways to handle dynamic elements.

#3) Dynamic Elements

In this section, we will learn different ways to handle dynamic elements and construct a generic Xpath.

In a few scenarios, element attributes change dynamically. It can be ‘id’, ’name’ etc.

Example: let’s say the ‘id’ of a username field is ‘username_123’ and the XPath will be

//*[@id=’username_123′] but when you open the page again the ‘id’ of ‘username’ field might have changed and the new value may be ‘username_234’.

Here, the test will fail because the selenium could not find the XPath you passed earlier as the id of the field has changed to some other value.

There are many approaches depending on the type of problem:

Problem Type #1: If part of the attribute value changes.

Example: As in the above example, id value changes but a few fields remain constant.
‘username_123’ changed to ‘username_234’ but ‘username’ always remained constant.

You can construct xpath as below:

driver.findElement(By.xpath(“//*[contains(@id,'username')]”)).sendKeys(“username”);
driver.findElement(By.xpath(“//*[starts-with(@id,'user')]”)).sendKeys(“username”);

‘contains’ is a Java method that checks if id contains the substring username.
starts-with() checks if any attribute starts with “user”.

Problem Type #2: If the entire value of the attribute changes dynamically.

Again, in this case, there could be different approaches:

For example: if the id of the ‘login’ field changes dynamically and there is no constant value to use the contains method.

Solution: Use of sendKeys.
Selenium provides different APIs to use function keys. For example, tab key, enter keys, F5, etc.

Step #1: Enter password
driver.findElement(By.id(“password”)).sendKeys(“password”));

Step 2: Use key functions to navigate to the element.
driver.findElement(By.id(“password”)).sendKeys(Keys.ENTER));
or
driver.findElement(By.id(“password”)).sendKeys(Keys.TAB));

Conclusion

Web tables, frames, and dynamic elements are essential parts of any web project. It is always desirable to write effective code to handle web tables and dynamic elements.

Understanding the construction of generic XPath is very helpful while handling dynamic elements. In case of a frame, your script has to switch the frame and then operate on the element.

Next tutorial #19: In the next Selenium tutorial, we will learn about types of exceptions and how to handle exceptions in Java in Selenium scripts.

Please post your queries related to Web tables, frames, and handling dynamic elements if you have any.