Selecting an item from a Vaadin dropdown with Selenium Webdriver


When we need to select items in a dropdown with Selenium Webdriver, we usually use the Select class. We can then call the selectByVisibleText, selectByIndex and selectByValue methods. Unfortunately this won't work in Vaadin applications. That's because Vaadin doesn't use the select html element, instead it uses it's own implementation.

In order to easily automate the specific Vaadin objects, you could use Vaadin TestBench which is a tool built on Selenium2 but it's not free. As an alternative you could write methods to access the Vaadin specific objects yourself, which is what I did.

Below you'll find the code I use to select an item in a Vaadin dropdown, either by visible text (value) or by index. Both methods start by calling the getMenuItemsFromFilter method that gets the available dropdown items by clicking on the filter arrow next to the dropdown. From each combobox item the WebElement is taken and added to the List which is returned.


Both methods take a 'filterParentLocator' of type By as input parameter. Here you should pass a By object which refers to the div with role 'combobox', which is the parent of both the combobox textfield v-filterselect-input and combobox dropdown arrow v-filterselect-button. The By object could be something like: By.xpath(//div[@role='combobox']).

The first method sets the dropdown value according to the item to search for, specified as an input parameter. It loops through the available choices and when it finds a menu item containing the search text, selects it.
protected void selectItemFromFilter(By filterParentLocator, String searchItem) throws DataNotFoundException {
logger.debug("about to select item from filter, searching for item: " + searchItem);

List menuItems = getMenuItemsFromFilter(filterParentLocator);

WebElement menuItemToSelect = null;
for (WebElement menuItem : menuItems) {
if (menuItem.getText().contains(searchItem)) {
menuItemToSelect = menuItem;
break;
}
}

if (menuItemToSelect == null) {
throw new DataNotFoundException("Couldn't find menu item with text: " + searchItem);
}

logger.debug("selecting folowing item from the filter: " + menuItemToSelect.getText());
menuItemToSelect.click();

}

This method sets the dropdown value according to the index, specified as input parameter.
protected void selectItemFromFilter(By filterParentLocator, Integer index) throws DataNotFoundException {
logger.debug("about to select item from filter, index: " + index);

List menuItems = getMenuItemsFromFilter(filterParentLocator);

try {
WebElement menuItem = menuItems.get(index);
logger.debug("selecting folowing item from the filter with index: " + index + " -> and text: " + menuItem.getText());
menuItem.click();

} catch (IndexOutOfBoundsException e) {
throw new DataNotFoundException("Couldn't find menu item with index: " + index);
}

}

This method returns a list of WebElements where each WebElement in the returned list is a row in the dropdown menu that appears after clicking the filter arrow. The 2 previous methods need this method.
private List getMenuItemsFromFilter(By filterParentLocator) {
By suggestMenuDropdownButtonLocator = By.xpath("//div[contains(@class, 'v-filterselect-button')]");
By suggestMenuLocator = By.xpath("//div[contains(@class, 'v-filterselect-suggestmenu')]");
By menuItemLocator = By.xpath("//td[contains(@class, 'gwt-MenuItem')]");

WebElement suggestMenuDropDown = getDriver().findElement(filterParentLocator).findElement(suggestMenuDropdownButtonLocator);

suggestMenuDropDown.click();

return getDriver().findElement((suggestMenuLocator).findElements(menuItemLocator));
}

Note: I found out that this approach doesn't support dropdowns where 'previous' and 'next' buttons are displayed in order to browse through the dropdown items. If you need to support such case, you'll have to take another approach.

Related Posts by Categories

Comments

0 Responses to "Selecting an item from a Vaadin dropdown with Selenium Webdriver"

Post a Comment

Recent Articles

Top Commenters

Recent Comments