how to test select2 by geb

Question

I am trying to select option from the select2 dropDown list but i am not able to do so This is the code

enter code here

 <select id="addedLanguageId" class="input-large select2-me
 select2-offscreen"    name="language.id" style="width: 200px;"
 tabindex="-1"> <option value="">Select a language</option> <option
 value="1">Aboriginal Dialects</option> <option
 value="2">Afrikaans</option> <option value="3">Ainu</option> <option
 value="4">Akkadian</option> <option value="5">Albanian</option>
 </select>`

I have tried so many things like $("form").language.id=["4"] or added code in page like selectLang{$('#language.id')} and in test like selectLang.value('20'). I used other concepts like selectLang{$('#language.id')} and

dropdownSelectedText {selectLang.find('option', value:selectLang.value()).text()} 

in page and done testing with:

when:
selectLang='Akkadian' 
then:
dropdownSelectedText=='Akkadian'
selectLang.value()=='Akkadian'

Answer 1

Please try this. As my understanding it is not the select2 issue. I wrote selenium test below. And it is working for select and select2 both.

WebDriver driver=new FirefoxDriver();
    driver.get("http://ivaynberg.github.io/select2/");
    WebElement select=driver.findElement(By.id("e1"));
    List<WebElement> options = select.findElements(By.tagName("option"));
    for(WebElement option : options){
        if(option.getText().equals("California")) {
            option.click();
            break;
        }
    }

Answer 2

EDIT: after looking at some of my geb tests, I am setting select2 values like this (using geb 0.9.2):

Define a selector for your form in a page object:

static content = {
    myForm { $("form") }
}

Then in your test, you can set the select2 value like this:

myForm."language.id" = "4"