Compare Dropdown values in selenium

Table of content

How to compare values of two dropdowns in selenium

How to compare values of two dropdowns in selenium

One of our readers has asked, how to compare values of dropdowns ?, Let's see how we are going to compare the dropdown values in selenium.

I hope you are aware of the Select class in selenium, which handles the standard dropdowns; if not, please read Select class in selenium.

Comparing dropdowns where options are in the Same order

In the below-given page, the dropdowns are going to be in the same order, but there could be a missing option. (below dropdowns have all option same as one another)

Steps to compare the values of the dropdowns

Find the dropdown Element using the FindElement method in selenium

WebElement originalDropdown = driver.findElement(By.cssSelector("select#first"));

Create an object for the Select class

Select original = new  Select(originalDropdown);

We have to get all the values present in the dropdown to compare the values. So use getOptions() methods from Select class object
getOptions() method will return the list of options/values present in the dropdown. The order of the dropdown purely depends on the developer of that dropdown
Store the list of values using ArrayList in a variable originalListElements

List<WebElement> originalListElements = original.getOptions();

Iterate the option that you have received and get the text from all the options and store in a List originalList

List<String> originalList = new ArrayList<String>();
for (WebElement webElement : originalListElements) {
	originalList.add(webElement.getText());
}

Now perform all the above steps to the target dropdown to which you want to compare the values. Store the list of text values in targetList
Compare the originalList and targetList using assertions present in TestNG

Assert.assertEquals(originalList, targetList);

The complete code for comparing dropdowns

@Test
public void verifyDropdowns() {
	System.setProperty("webdriver.chrome.driver", "D:PATHchromedriver.exe");
	WebDriver driver = new ChromeDriver();
	driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
	driver.get("https://chercher.tech/practice/dropdowns");
	// original dropdown
	WebElement originalDropdown = driver.findElement(By.cssSelector("select#first"));
	Select original = new  Select(originalDropdown);
	List<WebElement> originalListElements = original.getOptions();
	List<String> originalList = new ArrayList<String>();
	for (WebElement webElement : originalListElements) {
		originalList.add(webElement.getText());
	}
	// target dropdown
	WebElement targetDropdown = driver.findElement(By.id("order-same"));
	Select target = new  Select(targetDropdown);
	List<WebElement> targetListElements = target.getOptions();
	List<String> targetList = new ArrayList<String>();
	for (WebElement webElement : targetListElements) {
		targetList.add(webElement.getText());
	}
	Assert.assertEquals(originalList, targetList);
}

Comparing dropdowns where options are in random order

Yes, I know you guys are looking for real things. In a practical application, you cannot see ideal things. So most of the people might have come across dropdowns that have the same values but in different/random order.

Content in the below dropdowns are going to be the same but in a different order

Let me use the above-written code for verifying this scenario,

@Test
public void verifyDropdowns() {
	System.setProperty("webdriver.chrome.driver", "D:PATHchromedriver.exe");
	WebDriver driver = new ChromeDriver();
	driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
	driver.get("https://chercher.tech/practice/dropdowns");
	// original dropdown
	WebElement originalDropdown = driver.findElement(By.cssSelector("select#first"));
	Select original = new  Select(originalDropdown);
	List<WebElement> originalListElements = original.getOptions();
	List<String> originalList = new ArrayList<String>();
	for (WebElement webElement : originalListElements) {
		originalList.add(webElement.getText());
	}
	// target dropdown
	WebElement targetDropdown = driver.findElement(By.id("order-changed"));
	Select target = new  Select(targetDropdown);
	List<WebElement> targetListElements = target.getOptions();
	List<String> targetList = new ArrayList<String>();
	for (WebElement webElement : targetListElements) {
		targetList.add(webElement.getText());
	}
	Assert.assertEquals(originalList, targetList);
}

TestNG is not intelligent enough to correct it, so we got to do it in hard way

I want to fail the test if options are not in Order

In this case, the above solution will not be helpful as it passes just both lists possess the same elements irrespective of order.

Find the dropdown Element using the FindElement method in selenium
Create an object for the Select class
We have to get all the values present in the dropdown to compare the values. So use getOptions() methods from the Select class object
getOptions() method will return the list of options/values present in the dropdown. The order of the dropdown purely depends on the developer of that dropdown
Store the list of values using ArrayList in a variable originalListElements
Iterate the option that you have received and get the text from all the options and store them in a List originalList
Now perform all the above steps to the target dropdown to which you want to compare the values. Store the list of values in targetList
Now let's compare and see if both dropdowns have values in the same order.
First of all, verify both dropdowns have the same number of option, if not same fail it.
Compare both the list by iterating a list, as both have the same size so that you can pick any list for iteration.
Remove the elements from the target list if you are iterating original, vice versa.
After the iteration is over, you will have targetList as empty because you have removed all the matching value if targetList has any value then that value did not match with originalList

The complete code to compare two randomly ordered dropdowns.

@Test
public void verifyDropdowns() {
	System.setProperty("webdriver.chrome.driver", "D:PATHchromedriver.exe");
	WebDriver driver = new ChromeDriver();
	driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
	driver.get("https://chercher.tech/practice/dropdowns");
	// original dropdown
	WebElement originalDropdown = driver.findElement(By.cssSelector("select#first"));
	Select original = new  Select(originalDropdown);
	List<WebElement> originalListElements = original.getOptions();
	List<String> originalList = new ArrayList<String>();
	for (WebElement webElement : originalListElements) {
		originalList.add(webElement.getText());
	}
	// target dropdown
	WebElement targetDropdown = driver.findElement(By.id("order-changed"));
	Select target = new  Select(targetDropdown);
	List<WebElement> targetListElements = target.getOptions();
	List<String> targetList = new ArrayList<String>();
	for (WebElement webElement : targetListElements) {
		targetList.add(webElement.getText());
	}
	Assert.assertEquals(originalList.size(), targetList.size());
	for (String string : originalList) {
		targetList.remove(string);
	}
	Assert.assertTrue(targetList.isEmpty());
}

Food for Thought

Let me end this article with simple Questions.

How do you print, which are the elements not matching?
Can I perform the above comparison without using remove() and isEmpty() methods ? (clue see the third question)
Is it possible to use contains() method from List to perform the above scenario?