How to access hidden file upload field with Selenium WebDriver python

Question

I have such HTML:

<a id="buttonToUpload" class="btn-pink medium" href="#">
    <span class="icon-arrow-right">upload photo</span>
</a>
<form id="form1" enctype="multipart/form-data">
    <input id="uploadImage" type="file" accept="image/png, image/gif, image/jpeg, image/jpg" style="visibility: hidden">
</form>

Pressing on raise system dialog for choosing file, which I can't access via webdriver. I tried send_keys() directly to but it raises ElementNotVisibleException. So how can I upload photo there? Actual code:

driver = webdriver.Firefox()
driver.get('http://www........')
upload_input = driver.find_element_by_id('uploadImage')
upload_input.send_keys(os.getcwd()+'/image.jpg')

Please try to apply solution proposed here stackoverflow.com/questions/15049182/… — Andersson
– Andersson, Commented Jun 15, 2015 at 12:35

wasd · Accepted Answer · 2016-12-06 07:57:28Z

5

Solved with this:

driver.execute_script("document.getElementById('uploadImage'‌).style.visibility='‌visible'")

answered Dec 6, 2016 at 7:57

wasd

1,5923 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oletha · Accepted Answer · 2016-10-29 16:30:24Z

3

Execute JavaScript to make the input element visible before interacting with it.

driver.execute_script("""document.querySelector("div.yourClassNameHere input[type=file]").style.display='block'""")

# Send the absolute file path of the file to the input element
input = browser.find_element(:xpath, "//input[@type='file']")
input.sendKeys(os.path.abspath("image.jpg"))

Make sure you replace the queries with ones that make sense for you.

answered Oct 29, 2016 at 16:30

Oletha

7,6791 gold badge28 silver badges47 bronze badges

Comments

Hasan Abbas · Accepted Answer · 2020-06-16 12:58:08Z

0

I myself ran into this problem where my 'input' element looked like while using Cucumber tests with Selenium:

<input type="file" autocomplete="off" tabindex="-1" style="display: none;">

This is how I solved it:

JavascriptExecutor jse =(JavascriptExecutor) StepDef.driver;
        jse.executeScript("document.querySelector('" + elementSelector +"').style.display='block';");

        util.elementXpathIsVisible(elementXpath);
        StepDef.driver.findElement(By.xpath(elementXpath)).sendKeys(filePath);

answered Jun 16, 2020 at 12:58

Hasan Abbas

234 bronze badges

Collectives™ on Stack Overflow

How to access hidden file upload field with Selenium WebDriver python

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related