Upload file to hidden input using protractor and selenium

Question

I\'ve got a hidden file input field like this:

Answer 1

The only way I could find to do this in the end was to use javascript to make the input element visible.

So I have a function unhideFileInputs:

  var unhideFileInputs = function () {
    var makeInputVisible = function () {
      $('input[type="file"]').removeClass('hidden-uploader');
    };

    ptor.driver.executeScript(makeInputVisible);
  }

This contains the function 'makeInputVisible' which is executed in the browser when I call ptor.driver.executeScript(makeInputVisible). Because I know my page contains jQuery I can use the jQuery removeClass method to unhide my file input element.

To see more on how to execute javascript in the browser using webdriver, see the answer to this question (although the answer uses executeAsyncScript rather than executeScript).

Answer 2

To add on user2355213s answer for the more current releases of protractor. ptor is obsolote and instead browser should be used. Also, executeScript() expects a string as parameter. So I ended up using

browser.executeScript('$(\'input[type="file"]\').attr("style", "");');

as my visibility setting was directly applied to the element. Of course, you can also use

browser.executeScript('$(\'input[type="file"]\').removeClass("hidden-uploader");');

depending on your HTML/CSS.