如何在Selenium Webdriver中處理ExtJS的組合框

嗨，我有一個基於ExtJS的用戶界面。我已經知道，在ExtJS中，組合框不是一個真正的組合框，而是輸入文本字段，下拉框圖像和列表的組合。現在我能夠識別控制，但我堅持從列表中選擇值。在HTML源代碼中，我看到列表顯示爲單獨的div，並在我們單擊下拉列表時在源代碼末尾附加。找到下面的下拉控件的HTML源代碼。 {如何在Selenium Webdriver中處理ExtJS的組合框

<div id="ext-gen678" class="x-form-field-wrap x-form-btn-plugin-wrap" style="width: 556px;"> 
<div id="ext-gen676" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 521px;"> 
<input id="ext-gen677" type="hidden" name="GHVOg:#concat#~inputFld~ISGP_UNIV:ft_t_isgp.prnt_iss_grp_oid:0" value=""> 
<input id="GHVOg:Mixh8:0" class="x-form-text x-form-field gs_dropDown_input gs_req x-form-invalid x-form-focus" type="text" autocomplete="off" size="24" style="width: 504px;"> 
<img id="trigger-GHVOg:Mixh8:0" class="x-form-trigger x-form-arrow-trigger" alt="" src="../../ext/resources/images/default/s.gif">

}

發現下拉列表中的HTML源代碼如下：

<div id="ext-gen726" class="x-layer x-combo-list x-resizable-pinned" style="position: absolute; z-index: 12007; visibility: visible; left: 294px; top: 370px; width: 554px; height: 123px; font-size: 11px;"> 
<div id="ext-gen727" class="x-combo-list-inner" style="width: 554px; margin-bottom: 8px; height: 114px;"> 
<div class="x-combo-list-item"></div> 
<div class="x-combo-list-item">12h Universe</div> 
<div class="x-combo-list-item">1h Universe</div> 
<div class="x-combo-list-item">24h Universe</div> 
<div class="x-combo-list-item">2h Universe</div> 
<div class="x-combo-list-item x-combo-selected">4h Universe</div>

現在我有問題，從列表中選擇值列表的div元素是不依附於控制。請同時參閱屏幕截圖，在那裏我有多個類似的控件[命名「添加安全到宇宙」] Screenshot of the ExtJS UI

在屏幕截圖中可以看到多個下拉菜單[添加安全到宇宙]強調，所有的降名單中出現同樣的價值。所以我怎樣才能從下拉列表中識別這些值。我想知道ExtJS如何維護下拉div元素與組合框小部件的映射，以便我可以使用相同的邏輯來識別列表。任何人都可以告訴我如何在硒webdriver做這件事？

來源

2013-04-30 Mrunal Gosar

您是否注意到頁面上只有一個可見的x-combo-list？（讓我知道如果你可以同時打開兩個組合列表）

因此，你只需要關心可見的x-combo-list。

CSS選擇器：.x-combo-list[style*='visibility: visible;'] .x-combo-list-item

的Xpath：//*[contains(@class, 'x-combo-list') and contains(@style, 'visibility: visible;')]//*[contains(@class, 'x-combo-list-item')]

// untested java code, just for the logic 
public void clickComboItem(WebElement input, String target) { 
    input.click(); // click input to pop up the combo list 
    List<WebElement> comboItems = driver.findElements(By.cssSelector(".x-combo-list[style*='visibility: visible;'] .x-combo-list-item")); 
    for (int i = 0; i <= comboItems.size(); i++) { 
     WebElement item = comboItems.get(i); 
     if (item.getText().eqauls(target)) { 
      item.click(); 
      break; 
     } 
    } 
}

// compilable C# version 
public void ClickComboItem(IWebElement input, string target) { 
    input.Click(); 
    IList<IWebElement> comboItems = driver.findElements(By.CssSelector(".x-combo-list[style*='visibility: visible;'] .x-combo-list-item")); 
    comboItems.First(item => item.Text.Trim() == target).Click(); 
}

來源

2013-05-01 21:33:47

感謝您的支持！我玩了幾個小時，這解決了我的問題。 – callisto 2014-04-17 07:32:17

什麼，我可以建議是：

你抓住所有的輸入，比如：

List<WebElement> inputList = driver.findElements(By.cssSelector("input cssSelector")); // you must complete this cssSelector 
WebElement input = inputList.get(0); // get the 1st input 
input.click(); //click on the first input and the option list appears.

你抓住所有的「選項」，如：

List<WebElement> optionList = driver.findElements(By.cssSelector(".x-combo-list-item")); // get all options 
WebElement option = optionList.get(1); 
option.click(); 
input.sendKeys(option.getText()); //getText() get the html inner value

這只是爲例Java，你實際上可以使用一個循環foreach如果你想自動填充所有你的inputs。

來源

2013-04-30 09:43:21 e1che

嗨@ e1che我的問題是鏈接的下拉控件與它顯示的列表。比方說，我想爲第三個組合框下拉選擇一個值，所以我怎麼能做到這一點，如果我會嘗試通過文本搜索值，例如列表中存在的值，我會得到多個這樣的控件。也是非常危險的，因爲相同的值也可能出現在其他一些下拉列表中。讓我們說一個例子有2個組合框，它們在列表中存儲了整數現在我怎麼能在這兩個組合框中選擇值？ – 2013-04-30 10:06:35

我用JavaScriptExecutor，我SelectRandomOption看起來是這樣的：

public void SelectRandomOption() 
{ 
    String randomOptionIndex = "Math.floor(Math.random()*Ext.getCmp('" + ExtJSIdOfComboBox + "').getStore().getCount()-1)"; 
    String randomOptionValue = "Ext.getCmp('" + ExtJSIdOfComboBox + "').getStore().getAt(" + randomOptionIndex + ").getData()['model']"; 
    String jsScript = "Ext.getCmp('" + ExtJSIdOfComboBox + "').setValue(" + randomOptionValue + ");"; 
    js.ExecuteScript(jsScript); 
}

來源

2013-07-26 08:01:58

我同意。但在這種情況下，我更喜歡JavaScriptExecutor。僅僅因爲在ExtJS中經常會有'onselect'，'onclick'和其他聽衆可能很難（甚至不可能）用純硒驅動程序實現。 – 2013-09-11 09:06:05

我基本上都用不過上面的標記答案它需要一點適應Ext Js 4.1。

它本質上是相同的方法，但你需要尋找一個可見的div標有

我用XPath類「X-boundlist」，並使用了看起來是這樣的疑問：

.//div[@class[contains(.,'x-boundlist')]]

和然後檢索與點擊的李符合所需的條目：

.//li[normalize-space(text())='combobox entry text']

我已經把正常化空間在那裏的XPath似乎有真正的問題，如果你不修剪的字符串。該方法做了左+右修剪，並刪除重複的空格，例如 ' blah blah '將更改爲'blah blah'。

來源

2014-06-12 15:07:21

如何在Selenium Webdriver中處理ExtJS的組合框

回答

相關問題