I am encountering a challenge in verifying the selection of an option in a dropdown menu. Within my application, there is a dropdown with 10 different options. When I choose option 5, I need to confirm that it was indeed selected.
It's straightforward to do this using Firefox and Chrome. Here is the HTML code for my dropdown along with its options:
<select class="Test-field-ddlist" runat="server" onchange="javascript:setTimeout('__doPostBack(\'ctl00$cphMainContent$ctl17\',\'\')', 0)" name="ctl00$cphMainContent$ctl17">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
To verify the chosen option, I created an object using a CSS selector and then checked if the text matches "5".
public static final String ManagerPage_DropdownSelection = "css=.Test-field-ddlist option[selected]";
String actualtext = driver.getSingleElement(ManagerPage_DropdownSelection).getText();
Assert.assertEquals(actualtext, "5");
The issue arises when using Internet Explorer because the HTML structure differs. The selected item isn't explicitly mentioned in the element inspection. Here's how the HTML appears:
<SELECT name=ctl00$cphMainContent$ctl17 class=Test-field-ddlist onchange="javascript:setTimeout('__doPostBack(\'ctl00$cphMainContent$ctl17\',\'\')', 0)" runat="server" sizcache="0" sizset="0">
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=9>9</OPTION>
<OPTION value=10>10</OPTION>
It seems like the "selected" attribute is hidden. Only by copying the HTML into a text editor can the word "selected" be visible. Unlike Firefox and Chrome, IE uses the selected text within the value attribute rather than having a separate selected attribute.
<SELECT name=ctl00$cphMainContent$ctl17 class=Test-field-ddlist onchange="javascript:setTimeout('__doPostBack(\'ctl00$cphMainContent$ctl17\',\'\')', 0)" runat="server" sizcache="0" sizset="0">
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5 selected>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=9>9</OPTION>
<OPTION value=10>10</OPTION>
Is there a universal selector to find the selected dropdown option across all browsers? Or is there a more efficient method to validate the chosen value in a dropdown? Although I attempted the following method which works but is time-consuming (approximately 5 minutes).
protected void verifyDropDownSelection(String selector, String expectedvalue) {
List<String> listA = new ArrayList<String>();
listA.add(expectedvalue);
List<String> listB = new ArrayList<String>();
List<Element> DDSelected = driver.getSingleElement(selector).useAsDropdown().getAllSelectedOptions();
for(Element selectedoption : DDSelected) {
String actualtext = selectedoption.getText();
listB.add(actualtext);
}
log.info("INFO: Verifying the selected option in the dropdown");
Assert.assertEquals(listB, listA);
log.info("PASS: "+expectedvalue+" was the selected option in the dropdown");
}