Selenium WebDriver Recipes in Node.js/

...

/

Working with Select2

Working with Select2

Learn how to work with Select2 using Selenium.

We'll cover the following...

Select2: Single Select

Select2 is a popular JQuery plug-in that makes long select lists user-friendly. It turns the standard HTML select list box into:

The HTML code for this, however, is not much different from the standard select list, except the addition of the class="select2" tag.

HTML
<select id="country_single" data-placeholder="Choose a Country..." class="select2">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Australia">Australia</option>
</select>

By using the class as the identification, the JavaScript included on the page generates the following HTML fragment (beneath the select element).

HTML
<select id="country_single" .... />
<span class="select2-container select2-container--default select2-container--open"><span class="select2-dropdown select2-dropdown--below"><span class="select2-search select2-search--dropdown">
    <input autocomplete="off" class="select2-search__field" type="search">
 </span><span class="select2-results"></span></span></span>
<ul class="select2-results__options" id="select2-country_single-results">
  <li class="..." id="..."><span class="select2-results">United States</span></li>
  <li class="..." id="..."><span class="select2-results">United Kingdom</span></li>
  <li class="..." id="..."><span class="select2-results">Australia</span></li>
</ul>
...