Selenium Upload File when style="display:none;"

Question

I am getting an error " Element is not reachable by keyboard" Can you guys please help me in it. I just want to attach the PDF file but as the cusror goes on it i am unable to find click on it nor upload file on it.

Code is:-

WebElement uploadElement = driver.findElement(By.xpath("//*[@id=\"registerproduct\"]/div/div[4]/div/div/div/div[2]/div[2]/div/div/span/label"));
uploadElement.sendKeys("C:\\Users\\Rahul\\Downloads\\kemgo-auction-detail-574.pdf");

The Html is:-

<div class="col s12">
 <div class="file-field input-field">
    <div class="">
         <input id="btn_myFileInput" onchange="checkimagetype()" name="productsheet" style="display:none;" type="file">
         <span class="attached sp_head">
          <label for="btn_myFileInput" class="gray-lite attach_circle left"> 
              <i class="fa fa-paperclip small"></i>
           </label>
         <span class="sp_head">
        Attach specification sheet                                            </span>
          <span id="fileinput-msg"></span> </span>

    </div>
 </div>

Can you guys help me in uploading file. Thanks

undetected Selenium · Accepted Answer · 2018-06-14T07:49:59.413

1

As per the HTML you have shared and your code trials the WebElement to pass the file path is not the <label> tag. You should target the <input> tag. Additionally the <input> tag is having style attribute set to display: none;. You can use the following code block to upload the file :

WebElement uploadElement = driver.findElement(By.xpath("//input[@id='btn_myFileInput']"));
((JavascriptExecutor)driver).executeScript("arguments[0].removeAttribute('style')", uploadElement);
uploadElement.sendKeys("C:\\Users\\Rahul\\Downloads\\kemgo-auction-detail-574.pdf");

edited Jun 14 '18 at 07:49

answered Mar 21 '18 at 07:17

undetected Selenium

183,867
41
278
352

One thing.. I usually get the error:- "Element – RAHUL Mar 21 '18 at 08:34
Element is not reachable by keyboard – RAHUL Mar 21 '18 at 08:36
The `` tag attributes decorates the _appearance_ of `` tag e.g. _text_ – undetected Selenium Mar 21 '18 at 08:37
1

`not reachable by keyboard` error arises out of **version** mismatch of the binaries you are using _JDK_, _Selenium Client_ , _ChromeDriver_ and _Chrome_ – undetected Selenium Mar 21 '18 at 08:40
How can i upload image HTML is:-

Picture Upload

– RAHUL Mar 28 '18 at 13:19
@RAHUL Can you please raise a new question with your new requirement. We will be happy to help you out. – undetected Selenium Mar 28 '18 at 13:21

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

This is my solution and I think it can solve other cases. And I will explain clearly about my code

    driver.executeScript("return document.readyState").equals("complete");

    WebElement uploadImage = driver.findElementByXPath("*<your_xPath_element>*");

    String scriptOn = "arguments[0].setAttribute('style','display: block')";

    driver.executeScript(scriptOn, uploadImage);

    uploadImage.sendKeys("*<your_image_URL>*");

    String scriptOff = "arguments[0].setAttribute('style','display: none')";

    driver.executeScript(scriptOff, uploadImage);

Explanation:

Pre-condition:

driver: FFDriver

language: Java

Steps:

Line 1: Because it's a hidden element so u don't know when it appears => that why you need to wait for page that full load

Line 2: Define the element that u want to detect, don't worry that it can't detect example my xPath: //input[@accept='image/']*

Line 3: Define new value for Style attribute that as u expected example URL = "path/01.png"

Line 4: execute command Element's current style = new value ('style','display: block') => it makes the hidden element to show

Line 5: Now your expectation element is show, so u can sendkeys (image URL) to it

Line 6 + 7: return raw state to this element

score 0 · Answer 3 · answered Jun 30 '20 at 16:04

Make the input field visible using element Id, when style="display:none;"

 public void makeInputElementVisible(){
     JavascriptExecutor executor = (JavascriptExecutor)driver;
     executor.executeScript("document.getElementById('your_element_id').style.display='block';");
    }

Make the input field visible using css selector, when style="display:none;"

 public void makeInputElementVisible(){
     JavascriptExecutor executor = (JavascriptExecutor)driver;
     executor.executeScript("document.querySelector('your_css_selector_for_input_field').style.display='block';");
    }

Selenium Upload File when style="display:none;"

3 Answers3

Linked