Geb: how do I select a value from a dropdown?

Question

I'm having great difficulty with one piece of my Geb test; how to select a value from a dropdown. I've tried it four different ways, and none of these work. It will either crash the test or skip right over it. Any help would be appreciated

HTML Form element (102727 is the id for California in the db table...)

<div class="col-sm-2">
    <label id="submitterState-label" class="toplabel" for=submitterState>State</label>
    <g:select name="submitterState" id="submitterState" from="stuff here..." class="form-control" optionKey="id" value="morestuff" noSelection="['null':'']" aria-labelledby="submitterState-label"/>
</div>

Resulting HTML:

<div class="col-sm-2">
        <label id="submitterState-label" class="toplabel" for=submitterState>State</label>
        <select name="submitterState" id="submitterState" class="form-control" aria-labelledby="submitterState-label" >
<option value="null"></option>
<option value="102722" >Alabama</option>
<option value="102723" >Alaska</option>
<option value="102724" >American Samoa</option>
<option value="102721" >APO Address - AA</option>
<option value="102725" >Arizona</option>
<option value="102726" >Arkansas</option>
<option value="102727" >California</option>
<option value="102728" >Colorado</option>
<option value="102729" >Connecticut</option>
<option value="102730" >Delaware</option>
<option value="102731" >District of Columbia</option>
<option value="102732" >Florida</option>
<option value="102733" >Georgia</option>
<option value="102734" >Guam</option>
<option value="102735" >Hawaii</option>
<option value="102736" >Idaho</option>
<option value="102737" >Illinois</option>
<option value="102738" >Indiana</option>
<option value="102739" >Iowa</option>
<option value="102740" >Kansas</option>
<option value="102741" >Kentucky</option>
<option value="102742" >Louisiana</option>
<option value="102743" >Maine</option>
<option value="102744" >Maryland</option>
<option value="102745" >Massachusetts</option>
<option value="102746" >Michigan</option>
<option value="102747" >Minnesota</option>
<option value="102748" >Mississippi</option>
<option value="102749" >Missouri</option>
<option value="102750" >Montana</option>
<option value="102751" >Nebraska</option>
<option value="102752" >Nevada</option>
<option value="102753" >New Hampshire</option>
<option value="102754" >New Jersey</option>
<option value="102755" >New Mexico</option>
<option value="102756" >New York</option>
<option value="102757" >North Carolina</option>
<option value="102758" >North Dakota</option>
<option value="102759" >Northern Mariana Islands</option>
<option value="102760" >Ohio</option>
<option value="102761" >Oklahoma</option>
<option value="102762" >Oregon</option>
<option value="102763" >Pennsylvania</option>
<option value="102764" >Puerto Rico</option>
<option value="102765" >Rhode Island</option>
<option value="102766" >South Carolina</option>
<option value="102767" >South Dakota</option>
<option value="102768" >Tennessee</option>
<option value="102769" >Texas</option>
<option value="102770" >U.S. Virgin Islands</option>
<option value="102771" >Utah</option>
<option value="102772" >Vermont</option>
<option value="102773" >Virginia</option>
<option value="102774" >Washington</option>
<option value="102775" >West Virginia</option>
<option value="102776" >Wisconsin</option>
<option value="102777" >Wyoming</option>
</select>

Geb tests (none of these work...):

$('#submitterState').value(102727)
    $("form").submitterState = 102727 
    $('select', name: "submitterState").value(102727) 
    $('div.col-sm-2').find('select', name: "submitterState").value(102727)

Sonjasonnet

all of the above tests return this error: java.lang.IllegalArgumentException: couldn't select option with text or value: 102727 – Sonjasonnet

Can you please show the resulting html (and not the gsp code) you are working with? – Vector

Answer 1

I've found emulating the user exactly is the best way to do this. First click on the <select>, then click on the <option> that you want.

$('#submitterState').click()
$('#submitterState').find("option").find{ it.value() == "102727" }.click()

Obviously this looks way nicer in a method call, but this should get you going.

Leipzig

I tried your way. But it returns this error. java.lang.NullPointerException: Cannot invoke method click() on null object – Sonjasonnet

Sorry I didn't read your HTML, try find{ it.value() == 102727}.click(), if that doesn't work post the full error message. – Leipzig

still returns the same error " java.lang.NullPointerException: Cannot invoke method click() on null object". I can't post the rest of the error b/c it contains some org-sensitive information. – Sonjasonnet

Which line is it referring to? The first or second? – Leipzig

Got it. Your second line worked fine. Also had the id listed incorrectly in my testing xml database file. – Sonjasonnet

I recommend .find('option', text: ~/102727/) over the Groovy Collection's find, which did not work for me. – Tunnel

Answer 2

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

Select dropdown = new Select(driver.findElement(By.id("var_302")));
             dropdown.selectByVisibleText("Hispanic or Latino"); 

Try out this.

Drandell

Answer 3

You need to try:

$('select', name: "submitterState") = "102727" 

Omor