webdriver.support.select - Select doesn't interact with the element

Question

I have the following select:

<div class="col-xs-12 col-md-6">
<label class="ph_label pointer city">
<span class="l citylbl">City</span>
<select class="cities custom-dropdown" data-validation-error-msg="You  must select a city" required="" name="city" disabled="disabled" data-validation="required">
<option value="">City</option>
<option value="Shanghai">Shanghai</option>
<option value="Beijing">Beijing</option>
<ul class="cities custom-dropdown" data-target-selector="select.cities" style="width: 293px;">
</label>
</div>

I'm trying:

mySelect = Select(self.driver.find_element_by_name("city"))
mySelect.select_by_value("Shanghai")

When I see the test run, selenium goes through this element as if everything was OK, but in fact the city was not selected. Am I missing something?

Answer 1

The problem is in the <select> html: disabled="disabled"

This disables that particular select box. Selenium can only interact with the web page as if it were a user, so it cannot set the <select> directly.

You need to figure out what actually sets the value of the <select>, then use Selenium to drive that.

Answer 2

If You cannot alter the html directly You can insert some script code to re-enable the select field:

driver.execute_script("$('select.cities').removeAttr('disabled')")

Answer 3

I guess this is using AngularJS and select2. If yes, there are 2 ways 1. Click on the dropdown, then search the value you need

mySelect.Click();

selectSearchBox.Sendkey(searchBox,"Shanghai");

2. Using JS to enable/display the dropdown as @Joern Boegeholz commen

driver.execute_script("$('select.cities').removeAttr('disabled')")