selenium - Selenium Webdriver: Select with display none

Question

Possible Duplicate:
Selenium WebDriver - hidden select and anchor

Before I post my question I just want to tell that I am new to Selenium.. I am trying to select an option from a dropdown. The options display when clicked on the down arrow in the dropdown box. But, when checked in the Firebug, the display style was "none" and when trying to select the option using JUnit webdriver code by using click method in Eclipse, it did not work and it gave the exception - "org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with".

Please refer to the attached image for the dropdown and HTML tags.

<select class="size-dropdown mediumSelect selectBox" name="skuAndSize" style="display: none;">
<option value=""></option>
<option value="2545672:S" name="skuId"> S</option>
<option value="2545673:M" name="skuId"> M</option![enter image description here][1]>
<option value="2545674:L" name="skuId"> L</option>
<option value="2545675:XL" name="skuId"> XL</option>
<option value="2545676:XXL" name="skuId"> XXL</option>
<option value="2545677:XXXL" name="skuId"> XXXL</option>
<option value="2545678:XXXXL" name="skuId"> XXXXL</option>
</select>

I looked at this link before posting this question - Selenium WebDriver - hidden select and anchor But, since I am just starting I am not able to understand clearly.

Note: The same worked in IDE when used clickAt method. But in Webdriver the clickAt method is not present. Can anyone help me in this. Thanks!

Answer 1

問題は、Seleniumが目に見えない（無効にされた）要素と対話できないことです。したがって、要素を表示する必要があります。基本的なアイデア：ドロップダウンをロールダウンしてから、待機してdriver.manage.timeout(...)から、ドロップダウンに表示される必要な要素をクリックします。または、javascriptを使用して、ドロップダウンロールダウンを実行せずに要素を直接クリックすることもできます。Jsはそれに対処することができます。

したがって、このアプローチは常に機能します：

css1=select[class="size-dropdown mediumSelect selectBox"]>option[value=""]
css2=select[class="size-dropdown mediumSelect selectBox"]>option[value="2545672:S"]
css2=select[class="size-dropdown mediumSelect selectBox"]>option[value="value="2545673:M"]
//.... and so on.....
public void jsClickOn(String cssSelector){
JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("var x = $(\'"+cssSelector+"\');");
        stringBuilder.append("x.click();");
        js.executeScript(stringBuilder.toString());
}
jsClickOn(css1);
jsClickOn(css2);
jsClickOn(css3);

別の方法：アクションビルダー、高度なユーザーアクションAPIを使用します。あなたはここでそれについて読むことができますそしてコードはそのようなsmthになります：

WebElement mnuElement;
WebElement submnuElement;
mnEle = driver.findElement(By.Id("mnEle")).click();
sbEle = driver.findElement(By.Id("sbEle")).click();

Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.moveToElement(mnEle).Perform();
// Giving 5 Secs for submenu to be displayed
Thread.sleep(5000L);
// Clicking on the Hidden SubMenu
driver.findElement(By.Id("sbEle")).click();

ただし、cssセレクター、xpathsがfirepathでそれを検証する方法、ffoxでfirebugに追加する方法にも注意してください。 これがお役に立てば幸いです）

ドロップダウンオプションを見つける例として、この画面を参照してください。