Handling Select2 with Selenium webdriver

Question

I've been banging my head against the wall trying to select an option from an ajax enabled select2 select list with the selenium web driver. I've managed to get it working with the IE webdriver but not firefox. Here is my hacky solution for IE

public static void SetSelect2Option(this IWebDriver driver, By locator, string subContainerClass, string searchTerm, TimeSpan? ajaxWaitTimeSpan = null)

    {

        var select2Product = driver.FindElement(locator);

        select2Product.Click();

        var searchBox = driver.FindElement(By.CssSelector(subContainerClass + " .select2-input"));

        searchBox.SendKeys(searchTerm);

        if (ajaxWaitTimeSpan != null)

        {

            driver.Manage().Timeouts().ImplicitlyWait(ajaxWaitTimeSpan.Value);

        }

        var selectedItem = driver.FindElements(By.CssSelector(subContainerClass + " .select2-results li")).First();

        selectedItem.Click();

        selectedItem.SendKeys(Keys.Enter);

    }

In Firefox, this solution works up until the point of the SendKeys call where it just hangs and moves on to the next step without actually firing select2's events to populate the selected item.

I've also tried using the http://code.google.com/p/selenium/wiki/AdvancedUserInteractions API with similar results.

Has anyone run into a similar issue before?

Answer 1

1. To open choose box, use css selector #s2id_e1 .select2-choice, or equivalent XPath.

2. Make sure #select2-drop is the visible one, by css selector #select2-drop:not([style*='display: none']), or equivalent XPath.

3. Make sure to click the selectable item using subContainerClass + .select2-results li.select2-result-selectable, or equivalent XPath

var driver = new FirefoxDriver();

driver.Url = "https://intellipaat.com/";

var select2Product = driver.FindElement(By.CssSelector("#s2id_e1 .select2-choice"));

select2Product.Click();

string subContainerClass = "#select2-drop:not([style*='display: none'])";

var searchBox = driver.FindElement(By.CssSelector(subContainerClass + " .select2-input"));

searchBox.SendKeys("Ohio");

var selectedItem = driver.FindElements(By.CssSelector(subContainerClass + " .select2-results li.select2-result-selectable")).First();

selectedItem.Click();

If you are interested to learn Selenium on a much deeper level and want to become a professional in the testing domain, check out Intellipaat’s Selenium training!