0

I would like to know how to upload a file to a bootstrap-fileinput element using Selenium with the FirefoxDriver. I tried

WebElement input = letter.findElement(By.cssSelector("#letter input"));
input.sendKeys("/home/me/loremIpsum.pdf");

I get

org.openqa.selenium.InvalidArgumentException: File not found: /home/me/loremIpsum.pdf

Of course the file /home/me/loremIpsum.pdf does exist.

The same code works using the chromedriver.

I've put together a jsfiddle to show the fileinput button: https://jsfiddle.net/yscgx2zc/

The rendered html from my app (copied from Firefox developer console) looks like this. Find the input element close to the bottom.

<div id="letter" class="form-group"><label class="control-label">The Letter<span>*</span></label><div class="file-input file-input-new"><div class="file-preview ">
    <div class="close fileinput-remove">×</div>
    <div class="file-drop-disabled">
    <div class="file-preview-thumbnails">
    </div>
    <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>
    <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
    </div>
</div>
<div class="kv-upload-progress hide"><div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
        0%
     </div>
</div></div>
<div class="input-group file-caption-main">
   <div tabindex="500" class="form-control file-caption  kv-fileinput-caption">
   <div class="file-caption-name"></div>
</div>

   <div class="input-group-btn">
       <button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i>  <span class="hidden-xs">Remove</span></button>
       <button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i>  <span class="hidden-xs">Cancel</span></button>

       <div tabindex="500" class="btn btn-primary btn-file">
       <i class="glyphicon glyphicon-folder-open"></i>&nbsp;  <span class="hidden-xs">Browse …</span>
       <input data-show-upload="false" data-allowed-file-extensions="[&quot;pdf&quot;]" data-allowed-file-types="[&quot;pdf&quot;]" accept="application/pdf" class="file" id="1502961793221" type="file"></div>
   </div>
</div></div></div>
bastian
  • 1,122
  • 11
  • 23

2 Answers2

0

You can try with the following code block:

WebElement input = letter.findElement(By.xpath("//input[@id='1502957288010']"));
input.sendKeys("/home/me/loremIpsum.pdf");
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • Thanks, i've updated my question again. The input element was already found. Unfortunately it doesn't work. – bastian Aug 17 '17 at 09:27
0

Just tried to upload a file to http://plugins.krajee.com/file-basic-usage-demo, which is a demo page for specified bootstrap file input.

Works both on Firefox and Chrome. The only issue was with input visibility. When I made it visible, I was able to upload a file.

However, your error message seems pretty obvious to me. Your file wasn't found on disk. Describe your environment please. Are you using local or remote WebDriver? As in case of remote, this file should be present on target VM, where browser is started.

Serhii Korol
  • 843
  • 7
  • 15
  • I'm on a linux system and testing against Firefox. When I do an `ls` on the file named in the error message (copy pasted) it is found. How did you make it visible. I tried `js.executeScript("arguments[0].style.visibility='visible'", input);` – bastian Aug 17 '17 at 11:52
  • For demo sample I've been using jQuery to remove parent element's class, which hides required input: `executeScript("$(\".btn.btn-primary.btn-file\").removeClass(\"btn-file\");");` – Serhii Korol Aug 17 '17 at 12:24
  • @bastian which selenium / driver / browser version are using? – Serhii Korol Aug 17 '17 at 12:25
  • It is still hidden when using your code. The Browse button just gets larger. I'm using Selenium 3.4.0, Firefox 55.0.1 and geckodriver 0.18.0 – bastian Aug 17 '17 at 12:44
  • @bastian I've tried on a demo site (bootstrap), not yours. So you have to find a class, which is used for component's visibility control. But... According to exception, your issue is not related to input's invisibility. If you're 100% sure that file exists, I'd also try another browser, just to check if the issue persists. As geckodriver is not stable at moment. So I wouldn't exclude the probability of a bug in a driver itself (or just OS specific). Btw, I've tried on Mac OS X. – Serhii Korol Aug 17 '17 at 13:25
  • Seems to be a geckodriver bug. Using chromium with chromedriver it works even without making the element visible. – bastian Aug 17 '17 at 14:21
  • Then you may want to raise this issue in Geckodriver tracker. :) – Serhii Korol Aug 17 '17 at 14:30