In our preceding Selenium WebDriver guide, we examined a variety of frequently used Selenium WebDriver commands, delving into key topics such as managing iframe and exceptions within Selenium scripts.
Maintaining our extensive array of Selenium guides, this segment will explore the management of web tables, iframes, and dynamic elements – fundamental elements of any web-based project.
Recommended IPTV Service Providers
- IPTVGREAT – Rating 4.8/5 ( 600+ Reviews )
- IPTVRESALE – Rating 5/5 ( 200+ Reviews )
- IPTVGANG – Rating 4.7/5 ( 1200+ Reviews )
- IPTVUNLOCK – Rating 5/5 ( 65 Reviews )
- IPTVFOLLOW -Rating 5/5 ( 48 Reviews )
- IPTVTOPS – Rating 5/5 ( 43 Reviews )
This guide encompasses three distinct topics and the techniques for handling them within a Selenium script.
- Web Tables/HTML tables
- Frames
- Dynamic elements
What You’ll Gain:
#1) Web Tables/HTML Tables
In this module, we will delve into web tables and HTML tables in a web page, understand the tags used in HTML, and learn how to dynamically manage web tables.
Web tables are fundamentally groups of elements strategically organized in rows and columns. They prove useful for grouping similar information on a web page.
An example of an HTML table is:
The HTML structure of a table looks like this:
Commonly used tags within HTML tables include:
- The ‘table’ tag sets an HTML table.
- The ‘tbody’ tag establishes a container for rows and columns.
- The ‘tr’ tag configures rows in an HTML table.
- The ‘td’/’th’ tags detail the columns of an HTML table.
Discovering the specifics of a web table:
Web tables can be managed in multiple ways.
Method #1:
Below is the xpath of a cell in an HTML table, namely “firstname”:
//div[@id=’main’]/table[1]/tbody/tr[1]/th[1]
In this xpath, “tr[1]” signifies the initial row and “th[1]” denotes the primary column.
If the count of rows and columns is always constant, let’s presume the HTML table consistently contains 5 rows and 3 columns, you can traverse each row and column utilizing a “for loop,” as portrayed in the code segment below:
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+”]”))); } }
Apart from the row and column numbers, each component of the xpath stays the same. As a result, you can traverse each row and column utilizing a “for loop,” as detailed above.
Method #2:
The first method is suitable for tables with dimensions that do not change and always remain consistent. However, it does not apply to dynamically changing web tables.
Lets use the afore-mentioned 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: Fetch the entire HTML table and save it in a variable ‘htmltable’ of the WebElement type.
Step 2: Secure all the rows with the tag name ‘tr’ and save them in a list of WebElements called ‘rows’. Each element in ‘rows’ signifies a row in the table.
Step 3: Traverse each row and retrieve the list of elements using the tag ‘th’ utilizing ‘rows.get(rnum)’. This will provide the columns for the row.
Step 4: Navigate through ‘columns’ utilizing ‘columns.size()’ and fetch the details of each cell.
Note: Method #2 is suitable for dynamically changing web tables.
This concludes our discussion on managing web tables in Selenium. Next, we will delve into managing an element within a frame.
#2) Frames
In this segment, we will gain knowledge about frames within a web page, how to identify frames, and how to manage them using the Selenium WebDriver.
Numerous developers prefer to place elements within frames. A frame is essentially a container wherein a group of elements can be collated.
Identifying a frame:
There are various ways to determine if an element is positioned inside a frame:
#1. Right-click on the element. Verify if the “This Frame” option is available. If the “This Frame” option can be accessed, it signifies that the element is within a frame.
#2. View the source of the webpage and check if any tag for ‘iframe’ is present.
Confirming the number of iframes in a webpage:
All iframes bear the tag name “iframe”.
List<WebElement> frameList=driver.findElements(By.tagName(“iframe”));
System.out.println(frameList.size());
In the previous example, frameList will contain all the iframes, and frameList.size() will provide the count of iframes.
Dealing with an element positioned inside a frame:
If an element is housed within a frame, you need to transition to the frame prior to operating on the elements. Here are the steps:
Step 1: To transition inside a frame:
driver.switchTo().frame(1); //pass the frame count as a parameter.
or
driver.switchTo().frame(“frame Name”); //pass the frame title as a parameter.
or
driver.switchTo().frame(“xpath of the frame”);
Step 2: Upon transitioning to the frame, Selenium will be in a position to operate on the elements within the frame.
driver.findElement(//[@id=’username’]).sendKeys(“username”);
driver.findElement(//[@id=’pass’]).sendKeys(“password”);
By following these steps, you can handle an element situated within a frame. Subsequently, we will discuss the various ways to manage dynamic elements.
#3) Dynamic Elements
In this section, we will delve into various techniques to handle dynamic elements and construct generic Xpaths.
In some cases, element attributes alter dynamically, like the ‘id’ or ‘name’ attributes.
Example: Let’s consider the ‘id’ of a username field alternating from ‘username_123’ to ‘username_234’ when you refresh the page. The previously used XPath will fail to work as the id of the field has altered. This is where the need to handle dynamic elements arises.
There are numerous methods depending on the type of challenge:
Challenge Type 1: If part of the attribute value changes.
Example: In the previous example, the id value changed, but the ‘username’ segment remained stable.
Here are two Xpath compositions that can be employed:
driver.findElement(By.xpath(“//[contains(@id,’username’)]”)).sendKeys(“username”);
driver.findElement(By.xpath(“//[starts-with(@id,’user’)]”)).sendKeys(“username”);
‘contains’ checks whether the id incorporates the substring ‘username’.
‘starts-with()’ checks if any attribute commences with “user”.
Challenge Type 2: If the entire value of the attribute alternates dynamically.
In this case, different methods can be employed:
For instance: if the id of the ‘login’ field fluctuates dynamically and there is no constant value to utilize the ‘contains’ method.
Solution: Deploy the sendKeys function keys.
Selenium offers different APIs for function keys like the tab, enter, F5, and more.
Step 1: Enter the password
driver.findElement(By.id(“password”)).sendKeys(“password”));
Step 2: Utilize 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 form a crucial part of any web-based project. It is crucial to implement effective code to manage them in Selenium.
Understanding the formulation of generic Xpaths is notably beneficial when dealing with dynamic elements. When managing frames, your script must transition to the frame before it can operate on the elements housed within.
Upcoming tutorial #19: In our subsequent Selenium guide, we will delve into the different types of exceptions and how to manage them in Selenium scripts utilizing Java.
If you have any questions regarding web tables, frames, and managing dynamic elements, we welcome your queries.