I'm trying to select an item from a list with selenium / python and am having issues with getting the elements to load and be interactable. I think the problem is the website doesn't load the html for that section until the drop down is clicked but I'm not sure how to go about resolving that. This is what the html looks like if I click view source:
<label data-lang="4003">Impact</label>
<select id="impact">
<option value="" selected data-lang="48">Select</option>
</select>
If I look at it with the chrome inspect tools I see this:
<label data-lang="4003">Impact</label>
<div class="select-wrapper cascading-dropdown-loading initialized">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-e89d2a9c-3be1-67a1-6f4b-32c36b38f6eb" value="Select">
<ul id="select-options-e89d2a9c-3be1-67a1-6f4b-32c36b38f6eb" class="dropdown-content select-dropdown ">
<li class="">
<span>Select</span>
</li>
<li class="">
<span>High</span>
</li>
<li class="">
<span>Medium</span>
</li>
<li class="">
<span>Low</span>
</li>
<li class="">
<span>None</span>
</li>
</ul>
<select id="impact" class="initialized" data-select-id="e89d2a9c-3be1-67a1-6f4b-32c36b38f6eb">
<option value selected data-lang="48">Select</option>
<option value="HIGH">High</option>
<option value="MEDIUM">Medium</option>
<option value="LOW">Low</option>
<option value="NONE">None</option>
</select>
</div>
The data-select-id also seems to be randomly generated, as it changes each time I refresh the page.
So far, I've been able to get a list of the options available using the following code:
select = driver.find_element_by_id("impact")
options = [x for x in select.find_elements_by_tag_name("option")]
for element in options:
print(element.get_attribute("value"))
Attempting to manipulate the list with something like element.click() doesn't seem to work and only gives me the error "Error: Message: element not interactable: Element is not currently visible and may not be manipulated"
I have also tried using Select with code like this with no success. I've used all three select by options, select_by_value, select_by_visible_test and select_by_index with no success.
select = Select(driver.find_element_by_id('impact'))
select = select_by_value("HIGH")
I have also tried exploring select.options which returns a list of objects that look like:
<selenium.webdriver.remote.webelement.WebElement (session="513ab2b2bfc1c3c738af19e69230a763", element="d00bf83d-3772-4357-b6da-1702a12ffda3")>
but I'm not sure how to manipulate these to do anything more with them. The session and element ids also change between runs.
Any help pointing me in the right direction would be greatly appreciated!
Related
I have the following HTML code:
<select name="course" id="course" class="standardSelect form-control-sm form-control" data-live-search="true" data-size="10" onchange="displayStudent(this.value);" style="display: none;">
<option value="">Select course</option>
<option value="2">Course A</option>
<option value="71">Course B</option>
<option value="5">Course C</option>
...
</select>
<div class="chosen-container chosen-container-single chosen-container-single-nosearch" title="" id="course_chosen" style="width: 100%;">
<a class="chosen-single">
<span>Select course</span>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off" readonly="">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select course</li>
<li class="active-result" data-option-array-index="1">Course A</li>
<li class="active-result" data-option-array-index="2">Course B</li>
<li class="active-result" data-option-array-index="3">Course C</li>
...
</ul>
</div>
</div>
I am intending to scrape the content that is displayed when each course is selected. So I have to click on each option and get the page's source code. However I am unable to do so. When I try to select any option either using the select_by_value() or using the select_by_visible_text() functions I get the ElementNotInteractableException. I also tried the select_by_index() function.
Below is the code I used for selecting the option with value = 2:
select_box = Select(browser.find_element_by_xpath("//select[#id='course']"))
select_box.select_by_value('2')
and the error it gives me is:
ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated
(Session info: chrome=80.0.3987.149)
Please help me resolve this exception or any other method that would work on selecting the option from a drop down list.
the select is not displayed style="display: none;" so you cannot click it
I guess on the real side you would have to click on the li element. try to click: //div[#id="course_chosen"]//ul/li[text()="Course A"] (probably after clicking on <span>Select course</span>)
UPDATED
In my Django settings, when I set DEBUG to false, Selenium is able to interact with the elements. It still does not work when DEBUG is set to true
So I am trying to select one option in a dropdown menu, but when I try to directly access the <select> tag I get the error ElementNotVisibleException: Message: element not interactable.
In the console whenever I click on the dropdown in only refers to an input tag that dynamically changes based on what I click on. Ultimately, I want the test to click on the dropdown and then select 'Tango' as shown in the link below.
My Selenium code is:
from selenium.webdriver import Chrome
from selenium.webdriver.support.ui import Select
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("localhost:8000/")
select = Select(driver.find_element_by_xpath('//*[#id="select-dance"]').click())
select.select_by_value('1')
And HTML:
<form onsubmit="return false;">
<div class="row border-light bg-white rounded-left rounded-right no-gutters">
<div class="col-12 col-lg px-3">
<div class="select-wrapper mdb-select">
<span class="caret"></span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-20f378f1-9560-4598-b8e8-
3ffe496cd688" value="Choose your dance event">
<ul id="select-options-20f378f1-9560-4598-b8e8-3ffe496cd688" class="dropdown-content select-dropdown" style="width: 658px; position:absolute;top: 0px; left: 0px;opacity: 1; display: none;">
<li class="">
<span class="filtrable">Choose your dance event</span></li>
<li class="">
<span class="filtrable">Tango</span></li>
<li class="active selected">
<span class="filtrable">Swing</span>
</li>
<li class="">
<span class="filtrable">Latin/Salsa</span>
</li>
<li class="">
<span class="filtrable">Ballroom</span>
</li>
<li class="">
<span class="filtrable">Bachata</span>
</li>
</ul>
<select class="mdb-select initialized" id="select-dance">
<option value="0">Choose your dance event</option>
<option value="1">Tango</option>
<option value="2">Swing</option>
<option value="3">Latin/Salsa</option>
<option value="4">Ballroom</option>
<option value="5">Bachata</option>
</select>
</div>
</div>
</div>
</div>
</form>
I do not know how to deal with the input tag interfering with the select (it only shows up in the elements console in Chrome).
Thank you!
You can handle by,
driver = webdriver.Chrome()
driver.get("localhost:8000/")
time.sleep(10)
select = Select(driver.find_element_by_id('select-dance'))
select.select_by_value('1')
You can try this,
driver = webdriver.Chrome()
driver.get("localhost:8000/")
time.sleep(10)
driver.find_element_by_id('select-dance').click()
when you click then new list of s will get populated under , then call select tag
select = Select(driver.find_element_by_id('select-dance'))
select.select_by_value('1')
or
select = Select(driver.find_element_by_xpath('//*[#id="select-dance"]'))
select.select_by_value('1')
Your page uses custom Select Component which is not the default html select box. In your case, they have used MDBootstrap Select Component which cannot be interacted using selenium Select class.
Please read this answer for your another question which related to the same issue.
Hello,
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.
Any ideia?
I think this is due to the select in the code snippet is marked as disabled?
I have tried using Watir-webdriver, and if the disabled="disabled" attribute is there, I get the behavior you describe. As soon as I remove it, the value I want is selected.
I am using python selenium and need to reach to the element, where the label is "thisis2ndID" and enable the checkbox?
<h3 class="activator"> … </h3>
<div class="accordion-panel">
<ul>
<li class="field">
<input id="thisis1stID" type="checkbox" name=""></input>
<label for="thisis1stID"> … </label>
</li>
<li class="field">
<input id="thisis2ndID" type="checkbox" name=""></input>
<label for="thisis2ndID"> … </label>
</li>
<li class="field">
<input id="thisis3rdID" type="checkbox" name=""></input>
<label for="thisis3rdID"> … </label>
</li
tried these but they dont seem to work...
browser.find_element_by_id('main-id').click()
browser.find_element_by_xpath("//div[#class='accordion-panel']")
browser.find_element_by_id(thisis2ndID').is_selected()
any ideas?
I have done this a couple of different ways, but the best method in your case is to iterate all the li tags and search for the id value you are looking for, try this
browser.find_element_by_xpath("//div[#class='accordion-panel']")
for i in browser.find_elements_by_tag_name("li"):
...
If there is provision to find elements using cssSelector in python, the follwing selector along with click() event will enable the checkbox....
"div.accordion-panel li.field+li.field>#thisis2ndID"
I've worked only on java, so i wont be able to provide exact code in python..
you can click here to know more about different kind of selectors
this worked...sorry for the confusion, the activator needed to be clicked to load the sub options...
browser.find_element_by_class_name('activator').click()
browser.find_element_by_xpath("//div[#class='accordion-panel']")
browser.find_element_by_id('thisis2ndID').click()
time.sleep(5)
I'm using selenium2 webdriver with firefox.
Usually, when there is a combobox for e.g. months I set a distinct month by send_keys(monthname).
I have a special listbox this time, where I can't simply send_keys() to it (not with webdriver nor manually). I'm not a web developer, so I have no idea what the actual difference is. This is the HTML Code of that combobox:
<div class="selectArea marke" style="width: 75px; ">
<span class="left"></span>
<span class="center">Month</span>
<span class="selectButton"></span>
<div class="disabled" style="display: none; "></div>
</div>
<select name="sregisterdmc" id="sregisterdmc" class="marke outtaHere" style="width:75px" multiple="">
<option value="">Month</option>
<option value="01">01</option>
...more options...
</select>
I have no idea how I could set an option here. I found out that I can get all the option values with .find_elements_by_tag_name(), but not how I actually set such one now. Thanks in advance!
Do a click on the option element you want selected.