How to work with a List in HTML using Selenium WebDriver

Working with List in HTML using WebDriver is an important topic for automation of e-commerce type of projects.

What are Lists?

Lists are a collection of similar type data and make things  presentable and easy to read on a Web Page. There are two types of lists in HTML:

1. Ordered List – represented by <ol>..</ol> tag. Each list item starts with the <li> tag

Example:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

1. Unordered List – represented by <ul>..</ul> tag. Each list item starts with the <li> tag.

Example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Let us understand how to iterate over a list. It will be same for both type Ordered and Unordered List. Let us consider below search scenario on any e-commerce site say eBay.in:

1. Launch browser.
2. Invoke URL “http://www.ebay.in.”
3. Enter some value in “Search Product” field. Let’s say we enter “Apple Watches”.
4. Select the category on your search from the dropdown. Let’s select category as “Watches”.
5. Click on the Search button.
6. Get the information of all the products listed out for this search.

Here is the Sample Code:

package day4;

import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.Select;

public class EbayProject {
		
	WebDriver Driver;
	public void invokeBrowser(){
		/*Setting property of a system variable used by chrome driver*/
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\sdhingra\\workspace\\libs\\chromedriver.exe");
		
		Driver = new ChromeDriver();
		
		String url = "http://www.ebay.in";
	
		
		//To maximise the browser
		Driver.manage().window().maximize();
		
	//	Driver.manage().deleteAllCookies();
		
		Driver.get(url);
		
	}
	
	public void searchProduct(String product, String category){
		
		Driver.findElement(By.id("gh-ac")).sendKeys(product);
		
		WebElement dropElement = Driver.findElement(By.id("gh-cat"));
		
		Select dropdown = new Select(dropElement);
		
		
		dropdown.selectByVisibleText("Watches");
		
		Driver.findElement(By.id("gh-btn")).click();
		
		String result =	Driver.findElement(By.className("listingscnt")).getText();
	
		System.out.println("Result is : "+ result);
	}
	
	
	public void searchAllProduct(){
		List<WebElement> allProduct = Driver.findElements(By.xpath("//ul[@id='ListViewInner']/li"));
		
		for( WebElement product : allProduct){
			
			System.out.println(product.getText());
			
			System.out.println("*********************************************************************");
		}
	}
}

This example is the continuation of the previous tutorial. The detailed explanation of step 1 to 6 is covered in Working with DropDowns. Let’s focus on Step 7 and 8.

7. Fetching all the WebElements from a List and storing in a Data Structure.

 List<WebElement> allProduct = Driver.findElements(By.xpath(“//ul[@id=’ListViewInner’]/li”));

Whenever we have to fetch more than one WebElement we use List (Data-Structure) from Java.utils. Here, we have declared List of type WebElement, and as we have to locate more than one element we will be using findElements() method. This piece of code above will find the complete listings. Refer Screenshot below-

8. Iterating over the List using enhanced for (for-each) loop.

for( WebElement product : allProduct){

System.out.println(product.getText());

System.out.println(“*********************************************************************”);
}

This code  is fetching all the products from listings in WebElement “product” and later  printing each and every product from the total listings. Method used to fetch the text is getText().

Similarly, you can use above code to achieve whatever you desire from a list. If I have to summarise above code. It will be:

1. Fetch all the WebElements in List (Ordered or Unordered) in a list (Java.Utils) data structure.
2. Iterate over the list using for-each loop or Iterator.

Hope you enjoyed the above article.

For any questions, queries or comments. Feel free to write us at amrita@qatechhub.com or support@qatechhub.com. Happy learning 🙂