How do I test to see that a custom uploader works?

Question

I am testing a RoR app using Cucumber and Capybara with capybara-webkit as my javascript driver. I'm using jQuery on the client side.

I don't want to use the default file picker generated by my browser. This is my javascript code:

$(document).ready( function() {                                                                                                                                                                            
  $('#upload_button').click( function() {                                                                                                                                                                  
    $('#upload_file').click();                                                                                                                                                                             
  });                                                                                                                                                                                                      

  $('#upload_file').on( 'change', function () {                                                                                                                                                            
    $(this).parents('form:first').submit();                                                                                                                                                                
  });                                                                                                                                                                                                      
});

This is my markup (edited to emphasize my problem):

<form action="/guests/upload_list" enctype="multipart/form-data" method="post">
  <input class="invisible" id="upload_file" name="upload_file" type="file">
  <button id="upload_button" name="button" type="button">Upload guest list...</button>
</form>

I can test, via Capybara, that my file uploads work, but I also need to test that my 'fake' button works. One thought was to use Capybara to click on the fake button and to check if a file dialog appears, but I don't know how to do the latter.

What are some good strategies for testing this? I've looked at poltergeist as a possible solution for a driver but it's still not clear how to test to see that this actually works. I've also looked at Jasmine as a javascript testing framework, but ideally I would like my current system to work (i.e. using Cucumber, Capybara, etc).

`"I don't want to use the default file picker generated by my browser."` What file picker are you using then? Is it some jQuery UI component? Can you show a working example of what you want to verify? What do you mean by `"fake button"`? That the button actually just submits the form? The question seems a little vague. — toniedzwiedz, May 17 '14 at 10:49
I am creating a button (see the button tag) and then, using CSS, I'm going to make the file input disappear. See this fiddle for an example of what I'm doing: http://jsfiddle.net/xg4KT/ — Son of the Wai-Pan, May 17 '14 at 14:28
In your example, the dialog that opens comes from the OS, which would imply that testing the dialog involves testing beyond the current scope at which you're at. In http://stackoverflow.com/questions/9431978/one-solution-for-file-upload-using-selenium-webdriver-with-java, OP even uses `Robot` to send OS-level keyboard commands to the dialog, for example. — Kache, May 19 '14 at 21:53
I already have a test that ensures that the file upload works. I just need a test now to show that clicking my proxy button actually initiates an event for the file upload. Basically I just need to check that the file dialog appears. Obviously, if I could show that clicking my proxy goes through the whole process that would be even better, but for now I'd be satisfied with just seeing that the file upload dialog appears. — Son of the Wai-Pan, May 20 '14 at 14:17
Right, my point is that the custom dialog is outside of the browser's control, and therefore outside of Selenium's control. I think you'll have to ask the OS for information about that dialog. — Kache, May 20 '14 at 18:10
You could use [issue an mturk task](http://stackoverflow.com/q/6260404/383793) to upload a file. :-) — Chris Wesseling, May 23 '14 at 11:06

Chris Wesseling · Answer 1 · 2014-05-23T12:25:46.523

You could try some variation of

Make a screenshot.
Click your button
Make another screenshot
Compare them

but I'm not sure if selenium webdriver screenshots are OS level and show the picker or browser level and just show the page.

Otherwise something like sikuli that enables you to script with screenshots, could be an options. Sikuli uses Python, though I saw a gem called sikuli, but I don't know in what state that is in.

Are you sure you want to test the browser <-> OS interactions like this. Or do you just want to make sure that firing the click event on a hidden input-element of the file-type will spawn a filepicker. It is in no way defined by any HTML spec. Some browser OS combination may not even launch a picker.

If you come to the conclusion that testing the browser OS interaction is beyond the scope of your app and falls in the "testing the system" —similar to testing String—, then testing that the button.click fires a click on the input with Jasmine would be sufficient.

Looks like [this near duplicate](http://stackoverflow.com/questions/20382367/testing-html5-file-upload-with-capybara-selenium-webdriver-ruby) picks a solution much like my proposed sikuli one; AutoIT — Chris Wesseling, May 23 '14 at 12:23

score 0 · Answer 2 · answered May 23 '14 at 15:19

0

When the dialog opens, is there a new div or something that shows up? you could just assert that that css is there via a page.should have_css('div.fake-popup')

answered May 23 '14 at 15:19

安杰帅

334
1
3
9

How do I test to see that a custom uploader works?

2 Answers2