I'm attempting to upload a file into a form, but there is no input element with the type of "file".
I'm able to remove the "readonly" attribute and send keys to the input text box, but it throws a general error when I click the upload button. (just a popup with no useful information)
This is the element as presented:
<input type="text" autocomplete="off" class="form-control animate-show
ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched"
id="filepath" ng-model="model.name" ng-required="configuration.Required"
readonly="" required="required" style="">
This is the element after selecting a file manually:
<input type="text" autocomplete="off" class="form-control animate-show
ng-pristine ng-touched ng-not-empty ng-valid ng-valid-required"
id="filepath" ng-model="model.name" ng-required="configuration.Required"
readonly="" required="required" style="">
This is the element after removing "readonly" and sending my file path via selenium:
<input type="text" autocomplete="off" class="form-control animate-show
ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required"
id="filepath" ng-model="model.name"
ng-required="configuration.Required" required="required" style="">
Test setup:
Ubuntu 20
python 3.8
chrome 91.0.4472.114
selenium 3.141.0
Update:
I found the input field below with the type of "file", but it's located at the bottom of the page. (not within the expected modal)
Passing the path to this element was successful (no selenium errors), but the upload process still failed.
<label tabindex="-1" style="visibility: hidden; position: absolute;
overflow: hidden; width: 0px; height: 0px; border: none; margin: 0px;
padding: 0px;">upload<input type="file" ngf-select=""
ng-model="model" ng-show="!model"></label>
"upload"
<input type="file" ngf-select="" ng-model="model" ng-show="!model">
<label tabindex="-1" style="visibility: hidden; position: absolute;
overflow: hidden; width: 0px; height: 0px; border: none; margin: 0px;
padding: 0px;">upload
<input type="file" ngf-select="" ng-model="model" ng-show="!model">
</label>
It turns out there was an element with type="file in a different section of the page. Accessing the correct element and using send_keys with the file path worked perfectly. The original text box in question was populated with the file name and the file upload occurred properly.
Thank you for everyone's input, especially #YaDavMaNish with the syntax that ultimately got this working.
I'm using Selenium Python to do something like a Robotic Process Automation. However, I am facing problems clicking in a button...
When I click the Search button manually nothing happens, but through Selenium the alert appears:
The code I'm using is:
try:
driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002 > div:nth-child(1)').click()
except Exception as e:
print(e)
The html section of the button is:
<fieldset class="PageBodyHorizontal" arbwidth="0" arbw="0,0,0,0" aropacity="1.0" arcolor="c0c0c0" arbcolor="#c0c0c0" style="width: 970px;">
<legend class="hidden acc">Form Control Right Panel</legend>
<div class="PageBody pbChrome" style="border-radius: 0px 0px 0px 0px ;-moz-border-radius: 0px 0px 0px 0px ;-webkit-border-radius: 0px 0px 0px 0px ;background: -moz-linear-gradient(top, rgba(192,192,192,1.0), rgba(192,192,192,1.0));background: -webkit-gradient(linear, center center, center center, from(rgba(192,192,192,1.0)),to(rgba(192,192,192,1.0)));background: linear-gradient(rgba(192,192,192,1.0), rgba(192,192,192,1.0));background-color:#c0c0c0;">
<a href="javascript:" id="WIN_3_1002" arid="1002" artype="Control" ardbn="Query" artcolor="null" class="btn btn3d arfid1002 ardbnQuery" style="top: 5px; left: 10px; width: 50px; height: 21px; visibility: inherit; z-index: 997;" arwindowid="3">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Search</div>
</div>
</a>
</div>
</fieldset>
It's strange because I have a similar code that works on other pages, for the same button.
The html of a similar button:
<fieldset class="PageBodyHorizontal" arbwidth="0" arbw="0,0,0,0" aropacity="1.0" arcolor="c0c0c0" arbcolor="#c0c0c0" style="width: 1654px;">
<legend class="hidden acc">Panel2</legend>
<div class="PageBody pbChrome" style="border-radius: 0px 0px 0px 0px ;-moz-border-radius: 0px 0px 0px 0px ;-webkit-border-radius: 0px 0px 0px 0px ;background: -moz-linear-gradient(top, rgba(192,192,192,1.0), rgba(192,192,192,1.0));background: -webkit-gradient(linear, center center, center center, from(rgba(192,192,192,1.0)),to(rgba(192,192,192,1.0)));background: linear-gradient(rgba(192,192,192,1.0), rgba(192,192,192,1.0));background-color:#c0c0c0;">
<a href="javascript:" id="WIN_2_1000005683" arid="1000005683" artype="Control" ardbn="z3Btn Function Print Preview" artcolor="#" class="btn btn3d btnd arfid1000005683 ardbnz3BtnFunctionPrintPreview" style="top:5px; left:149px; width:50px; height:21px;color:#;z-index:999;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Print</div>
</div>
</a>
<a href="javascript:" id="WIN_2_1002" arid="1002" artype="Control" ardbn="Query" artcolor="null" class="btn btn3d arfid1002 ardbnQuery" style="top: 5px; left: 10px; width: 50px; height: 21px; visibility: inherit; z-index: 997;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Search</div>
</div>
</a>
<a href="javascript:" id="WIN_2_303060100" arid="303060100" artype="Control" ardbn="z3Btn_NextStage" artcolor="null" class="btn btn3d arfid303060100 ardbnz3Btn_NextStage" style="top:5px; left:64px; width:82px; height:21px;z-index:998;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:82px; height:21px;">
<div class="f7" style=";width:82px">Next Stage</div>
</div>
</a>
</div>
</fieldset>
If you have advices on the quality of my code and how to fix this problem, I would be grateful.
Click on the a tag instead of div as the href to trigger some javascript code is on the a tag and not div.
driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002').click()
Or try with action class
elem = driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002 > div:nth-child(1)')
Webdriver.ActionChain(driver).move_to_element(elem).click()
try javascript executor:
driver.execute_script("arguments[0].click()",elem)
Generally <div> tags are not interactable unless contenteditable="true" is set.
Some more details about the usecase would have helped us to analyze the observations in a canonical way. However to click on an element ideally you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following Locator Strategies:
Using CSS_SELECTOR I:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a#WIN_3_1002 > div.btntextdiv > div.f1"))).click()
Using CSS_SELECTOR II:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn3d.ardbnQuery[artype='Control'][ardbn='Query']"))).click()
Note: You have to add the following imports :
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
Using python and selenium to select an option in a combobox drop down ng select. I want to select the 'MALE' option in a dropdown select. I am trying to use XPath.
The code I use:
driver.find_element_by_id("sex_0").click()
driver.find_element_by_xpath("//*[contains(text(), 'MALE')]").click()
Copy and pasted the HTML:
Please Select OptionFEMALEMALE
Inspect element of the HTML:
<ng-select _ngcontent-uau-c14="" bindlabel="cdDescr" bindvalue="cd" class="custom ng-select ng-select-single ng-select-searchable ng-untouched ng-pristine ng-valid ng-select-opened ng-select-bottom" placeholder="Please Select Option" role="listbox" title="Please Select Option" id="sex_0">
<div class="ng-select-container">
<div class="ng-value-container"><div class="ng-placeholder">Please Select Option</div><!----><!---->
<div class="ng-input" style="top: 0px;"><input role="combobox" type="text" autocomplete="ac08684b8af8" autocorrect="off" autocapitalize="off" aria-expanded="true" style="position: relative; top: 0px; left: -10px; padding-left: 10px; border: none !important; height: 45px; width: 468px;" aria-owns="ac08684b8af8" aria-activedescendant="ac08684b8af8-0"></div></div><!----><!---->
<span class="ng-arrow-wrapper"><span class="ng-arrow"></span></span></div><!---->
<ng-dropdown-panel class="ng-dropdown-panel ng-select-bottom" id="ac08684b8af8" style="opacity: 1;"><!---->
<div class="ng-dropdown-panel-items scroll-host"><div></div>
<div><!----><!---->
<div class="ng-option ng-option-marked" role="option" aria-selected="false" id="ac08684b8af8-0"><!----><!----><span class="ng-option-label">FEMALE</span></div>
<div class="ng-option" role="option" aria-selected="false" id="ac08684b8af8-1"><!----><!----><span class="ng-option-label">MALE</span></div>
<!----><!----><!----><!----></div></div><!----></ng-dropdown-panel></ng-select>
The problem:
It will select FEMALE instead of MALE because the XPath text "FEMALE" contains the text "MALE". I assume that the 'id="ac08684b8af8"' is randomly generated with each use, which means I can't use Selenium find element by id. I tried select using selenium but I get the error: "element of type ng select not select". Hence I used XPath. The "ng-option-marked" is just a feature when the cursor hovers above the dropdown selection.
How should I solve this problem?
Answer is in the comments by KunduK.
driver.find_element_by_xpath("//*[text()='MALE']").click()
I have been trying this for a while and searched different forums but I couldn't find any snippet to do this.
I have a report in which options need to be selected through dropdown using Selenium in python. Below is the HTML structure
<div align="center"> Select Fruit</div>
<p align="center"><br>
<span id="0e6b87875e914a5f8d72bbee6844bea3" style="color: black; font-family: Arial; font-size: 13px; font-weight: normal; font-style: normal; width: 113px; display: inline-block;" class="sf-element sf-element-control sfc-property sfc-dropdown">
<div class="sf-element sf-element-dropdown" title="" style="position: relative; width: 100px;">
<div class="sf-element sf-element-icon" style="position: absolute; top: 1px; left: 91px; height: 17px; width: 17px;">
<svg width="17px" height="17px"><path d="M4,6 l7,0 l-3.5,3.5 z" fill="currentColor" stroke-width="1" transform="scale(1.1333333333333333,1.1333333333333333)" class="Down"></path></svg>
</div>
<div class="sf-element sf-element-text-box" style="display: inline-block; word-wrap: break-word; width: 83px;">(None)</div>
<select class="sf-dropdown-select" style="color: rgb(0, 0, 0); font-family: Arial; background-color: rgb(248, 248, 248);">
<option value="0" selected="selected">(None)</option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Grapes</option>
</select>
</div>
</span><br></p>
I have tried different ways using css selector and XPath but nothing seems to work. Below is the code I tried
driver.find_element_by_xpath('//*[#id="0e6b87875e914a5f8d72bbee6844bea3"]/div/select/option[#value = "Mango"]')
Also different variants like options[2] and using css selector but it always give NoSuchElementException.
Can someone please share some insights on this?
Thanks
Add text()="Mongo" instead of #value="Mongo"
driver.find_element_by_xpath('//[#id="0e6b87875e914a5f8d72bbee6844bea3"]/div/select/option[text() = "Mango"]').click()
The dropdown is clearly within <Select> tag. Hence it would be convinient to use the Select Class as follows:
//import
from selenium.webdriver.support.ui import Select
//code block
selectOption = Select(driver.find_element_by_class_name("sf-dropdown-select"))
selectOption.select_by_visible_text("Mango")
When dealing with SELECT elements, there is a helper class, Select, that makes it a lot easier.
select = Select(driver.find_element_by_css_selector("#0e6b87875e914a5f8d72bbee6844bea3 select"))
select.select_by_visible_text("Mango")
I have been trying to automate few action on a web based tool using selenium with python as scripting language.
So in this page, I have a field called status, here is the HTML code for this.
<div style="padding-left:105px" id="x-form-el-BugFieldsEditor_Status-desc" class="x-form-element x-form-el-BugFieldsEditor_Status-desc" role="presentation">
<div class=" x-form-field-wrap x-component " role="combobox" id="BugFieldsEditor_Status-desc" style="width: 230px;">
<input type="text" class=" x-form-field x-form-text x-triggerfield-noedit" id="BugFieldsEditor_Status-desc-input" name="Status-desc" tabindex="1" readonly="" autocomplete="off" aria-owns="x-auto-462" aria-selected="" style="width: 205px;" aria-readonly="false" aria-invalid="false" aria-required="false">
<img class="x-form-trigger x-form-trigger-arrow" src="https://someurl/clear.gif" id="x-auto-463">
</div>
</div>
it actually appears as a compo box drop down list on the page. I am able to locate this element through find element by ID and able to simulate click event which brings up the list of option it contains. the HTML code of this is this.
<div role="presentation" id="x-auto-881" class="x-combo-list x-ignore x-component x-border " style="border-width: 1px; z-index: 1060; visibility: visible; height: 273px; width: 228px; left: 277px; top: 75px;">
<div tabindex="0" hidefocus="true" id="x-auto-462" class=" x-view x-combo-list-inner x-component x-unselectable " style="overflow-x: hidden; padding: 0px; border-width: 0px; height: 273px; width: 228px;" unselectable="on">
<div class="x-combo-list-item " role="listitem">A-Assigned</div>
<div class="x-combo-list-item " role="listitem">C-Closed</div>
<div class="x-combo-list-item " role="listitem">D-Duplicate</div>
<div class="x-combo-list-item " role="listitem">F-Forwarded</div>
<div class="x-combo-list-item " role="listitem">H-Held</div>
<div class="x-combo-list-item " role="listitem">I-Info_req</div>
<div class="x-combo-list-item " role="listitem">J-Junked</div>
<div class="x-combo-list-item " role="listitem">M-More</div>
<div class="x-combo-list-item " role="listitem">O-Opened</div>
<div class="x-combo-list-item x-view-highlightrow x-combo-selected" role="listitem">P-Postponed</div>
<div class="x-combo-list-item " role="listitem">R-Resolved</div>
<div class="x-combo-list-item " role="listitem">U-Unreproducible</div>
<div class="x-combo-list-item" role="listitem">W-Wait</div>
</div>
</div>
Now the issue, on simulating click, though the list of option is displayed but I am not able to locate this element and select any option.
Can someone please help.
You should be able to get it with an xpath selector like this:
driver.find_element(By.XPATH, '//div[text()="A-Assigned"]')
You may need to make the selector more specific depending on the rest of your HTML.