Selenium C# Tutorial: Web Browser Elements (Combo-box) with C#
Updated: Mar 5
A combo box is a commonly used graphical user interface widget (or control). Traditionally, it is a combination of a drop-down list or list box and a single-line editable textbox, allowing the user to type a value directly or select a value from the list (Wiki).
Selenium WebDriver support this type of element with the WebElement class, but it also provides the "Select" class that we can use to work with this type of element quickly.
First, create an HTML page using this code:
<select class="goog-te-combo"><option value="">Select Language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select>
Let's see some examples of what can we do when using the Select class:
class Program
{
static void Main(string[] args)
{
IWebDriver firefoxDriver = new FirefoxDriver();
Backlog.TestPreperationGeneralSites(firefoxDriver, "file:///C:/Users/home-pc3/Downloads/new%201.html");
//Creating an instance of the Select class
SelectElement comboBox = new SelectElement(firefoxDriver.FindElement(By.CssSelector("html body select.goog-te-combo")));
//Validate Combo-Box does not allow multiple selections (Unique Selection)
Console.WriteLine("Does Combo-Box allow multiple selection? " + comboBox.IsMultiple);
//Validate the currently selected value
Console.WriteLine("The current selected value is: " + comboBox.SelectedOption.Text);
//Select item by value
comboBox.SelectByText("Zulu");
//Validate the currently selected value
Console.WriteLine("The current selected value is: " + comboBox.SelectedOption.Text);
//Select value by text (case sensitive)
comboBox.SelectByValue("be"); //Will select "Belarusian"
//Validate the currently selected value
Console.WriteLine("The current selected value is: " + comboBox.SelectedOption.Text);
}
}
Result
How to work with Multi-Selection Combo-Box
The select class provides other great methods that will allow us to Select/Deselect all values of the element; the following code will show you how to do it.
HTML
<select name="AnimalNames" size="5" multiple="multiple" style="width:100px">
<option value="fo">Fox</option>
<option value="du">Duck</option>
<option value="sh">Shark</option>
<option value="ti">Tigar</option>
<option value="ea">Eagle</option>
</select>
Code
class Program
{
static void Main(string[] args)
{
IWebDriver firefoxDriver = new FirefoxDriver();
Backlog.TestPreperationGeneralSites(firefoxDriver, "file:///C:/Users/home-pc3/Downloads/new%201.html");
SelectElement AllListValues = new SelectElement(firefoxDriver.FindElement(By.XPath("//select")));
foreach (var ListItem in firefoxDriver.FindElements(By.XPath("//option")))
{
//Select all values
AllListValues.SelectByText(ListItem.Text);
}
//Deselect By text
AllListValues.DeselectByText("Eagle");
//Deselect By value
AllListValues.DeselectByValue("ti");
}
}