如何在IE的下拉列表中验证所选选项

Question

I'm having some trouble verifying that an option is selected in a dropdown. In my application, I have a dropdown with 10 options. If I select option 5, I want to verify that it was actually selected.

Using Firefox and Chrome, its very simple. Below is the HTML for my dropdown and the 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 selected option, I created an object using the CSS selector. I then verified that the text is equal to 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 problem I'm having with IE is that the HTML is different. When I inspect the element, the HTML looks like this. There is nothing that says 5 is selected

<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 looks like the "selected" text is hidden. If I copy and past the HTML into a text editor, I can then see the text "selected". Unlike Firefox and Chrome, there is not an attribute of selected. Instead, selected text is added to the value 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> 

Can I create a selector that will find the selected dropdown option in all browsers? Or is there a better way to verify the selected value of a dropdown? I have tried the below method. It seems to work, but takes a very long time to complete (about 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");
    }

Answer 1

I would let the Select class handle the case:

WebElement select = driver.findElement(By.name("ctl00$cphMainContent$ctl17"));
Select dropDown = new Select(select);  

String selected = dropDown.getFirstSelectedOption().getText();
Assert.assertEquals(selected, "5");