2

I have a <button> where I'm opening a file browser on click, by triggering a click on a hidden <input type="file">. (I listen on the change event on the input to get access to the file(s) chosen by the user.)

Using Protractor, how can I check that the file browser opened on the initial click on the <button>?

The reason why I'm not exposing <input type="file"> to the user, is to have more control over style, which is possible with <button>.

Michal Charemza
  • 25,940
  • 14
  • 98
  • 165
  • I think you will get into problems with this approach. First of all, is the trigger on `` working on all common browsers? – frhd Apr 24 '15 at 07:07
  • @frhd I've tested recent Chrome, Firefox, and IE11, and they all bring up the file browser. For my purposes, that's fine. – Michal Charemza Apr 24 '15 at 07:09
  • There has been some discussion about checking if the file browser dialog is open here http://stackoverflow.com/questions/11647113/detecting-if-the-file-input-dialog-is-open .. – frhd Apr 24 '15 at 07:11

1 Answers1

2

The key problem here is that you don't need to check whether a file dialog is being opened (and, actually, selenium cannot control or check whether a file dialog is being opened) - what a browser does on click on the "file" input is something out of the scope of your application.

Instead, you may want to check that once you click the button, a "click" event is triggered on the input element. Add an event listener and use executeAsyncScript() (not tested):

var button = element(by.css(".mybutton"));
var input = element(by.css(".myinput"));

var script = 'var button = arguments[0], ' +
             '    input = arguments[1], ' +
             '    callback = arguments[arguments.length - 1];' +
             'input.addEventListener("click", function (e) { callback() });' +
             'button.click()';

browser.executeAsyncScript(script, button, input);
Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • I have similar code to this in a unit test, testing a directive that triggers the click on the input. To have this in the E2E test doesn't quite achieve testing the application behaves as it should from the end users point of view. For example, I manually tested across 3 browsers that this technique worked: perhaps I was hiding the file input in a way that made the call to `click()` ignored? Your test wouldn't address that. There is a way to get Protractor to check an alert box is shown, without having to touch `window.alert`, so I would hope there would be a similar way for a file dialog. – Michal Charemza Apr 24 '15 at 21:17
  • @MichalCharemza thanks for the feedback! Sorry for not mentioning that, but there is no way to control or check whether a file dialog is opened - it is out of selenium's control. Another thing you can do is to make the input visible (see [this](http://stackoverflow.com/questions/21685415/upload-file-to-hidden-input-using-protractor-and-selenium)), send keys to it setting the upload file path (see [this](http://stackoverflow.com/questions/16896685/how-to-upload-files-using-selenium-webdriver-in-java)), submit the form and check that it was submitted successfully.. – alecxe Apr 24 '15 at 21:26