как обрабатывать поля со списком ExtJS в selenium webdriver

Привет, у меня есть пользовательский интерфейс на основе ExtJS. Я узнал, что в ExtJS поле со списком-это не реальное поле со списком, а комбинация входного текстового поля, изображения выпадающего списка и списка. Теперь я могу идентифицировать элемент управления, но я застрял на выборе значения из списка. В HTML-источнике я вижу, что список появляется как отдельный div и прикрепляется в конце Источника, Когда мы нажимаем на выпадающее меню. найдите ниже HTML источник выпадающего списка контроль.
{



<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 списка не прикреплен к элементу управления.
Также, пожалуйста, обратитесь к скриншоту, где у меня есть несколько подобных элементов управления [с именем " добавить безопасность во Вселенную"]
Скриншот пользовательского интерфейса ExtJS



На снимке экрана вы можете увидеть несколько выпадающих меню [Добавить безопасность во Вселенную], выделенных, и все выпадающие меню имеют одинаковое значение, появляющееся в список. Итак, как я могу определить эти значения из выпадающего списка.
Мне было интересно, как ExtJS поддерживает отображение выпадающих div-элементов с помощью виджета combo Box, чтобы я мог использовать ту же логику для идентификации списка. Может кто-нибудь сказать мне, как я могу сделать это в selenium webdriver?

593   4  

4 ответов:

Вы заметили, что на странице будет только один видимый 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();
}
3  
2013-06-20 18:04:34

Вот что я могу предложить:

Вы ловите все ваши входные данные, такие как: 

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.

0  
2013-04-30 12:43:21

Я использую 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);
}
0  
2013-07-26 11:01:58

Я в основном использовал отмеченный выше ответ, однако он нуждался в некоторой адаптации для Ext Js 4.1.

Это по сути тот же подход, но вам нужно искать видимый div, помеченный классом "x-boundlist"

Я использовал xpath и использовал запросы, которые выглядели примерно так: 

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

А затем извлеките и нажмите на li, соответствующий вашей желаемой записи: 

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

Я поместил туда normalize-space, поскольку xpath, похоже, имеет реальные проблемы, если вы не обрезаете строки. Тот методы делает левую + правую обрезку, а также удаляет дубликаты пробелов, например ' blah blah ' изменится на 'blah blah'.

0  
2014-06-12 18:07:21

Comments

    Ничего не найдено.
Click here to cancel reply.