Testing file upload with Capybara - not a form but button and javascript function

Question

I am struggling to get that test working, tested several approaches and nothing works so far. I have a button

<div >
  <a href class="btn btn-default btn-block btn-lg btn-shadowed ut-upload-button"
    ng-file-select
    ng-file-change="uplFile($event, $file)">
    <i class="icon">i</i>
  </a>
</div>

this is a button that when clicked opens OS file browser, anyone knows how to get that to work as I tried attach_file, page.attach_file, find(".ut-upload-button").set(Rails.root + 'spec/files/file.txt')

Once uploaded the page should display a toast Success

expect(page).to have_toast('Success')

Sorry if it is a basic mistake or silly question, I am just starting using rspec and capybara and got lost completely

The ng-file-select directive is not a core AngularJS directive. Hard to help without the code for that directive. — georgeawg
– georgeawg, Commented Feb 25, 2019 at 18:22
You need to look at the actual HTML generated for the page (open page in a browser and inspect it). The angular library you're using has to have added an <input type='file'> element somewhere to the page in order to make file upload work - that's what you need to attach the file to. I've also updated my answer with code you can try if there is only one file uploader on the page. — Thomas Walpole
– Thomas Walpole, Commented Feb 25, 2019 at 19:27

Thomas Walpole · Accepted Answer · 2019-02-25 20:02:21Z

13

You can't do that because once the system file browser opens there is no way for the driver to interact with it. You need to call attach_file for the actual <input type='file'> element (which in your case is probably hidden on the page). Since you don't show your HTML I can't provide the exact code - but assuming you have an element something like the following

<input type='file' name='file_upload'>

and that the input is hidden from view via CSS of some type then something like

page.attach_file('file_upload', Rails.root + 'spec/files/file.txt', make_visible: true)

should work for you. If there is only one file upload on the page you could also do

page.attach_file(Rails.root + 'spec/files/file.txt', make_visible: true)

If you're willing to try the master branch of the Capybara project, it currently has trial support for passing a block to attach_file that opens the file selector. In your case that would probably be something like

page.attach_file(Rails.root + 'spec/files/file.txt') do
  page.find(".ut-upload-button").click
end

The feature is there for user testing and may or may not make it into Capybara 3.15 (depending on how well it is reported to work with the many many many ways there are to style file inputs) when it's released in a month or so.

edited Feb 25, 2019 at 20:02

answered Feb 25, 2019 at 17:31

Thomas Walpole

50.1k6 gold badges69 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylwek Over a year ago

Thank you very much. It turned out that we are using a very outdated capybara and there is a bug that doe snot allow for file upload.

David Buck · Accepted Answer · 2020-06-03 11:47:26Z

1

This works on windows or Linux
- filename = '/features/pages/images/imagetest01.jpg'
- file = File.join(Dir.pwd, filename)
- find('input#nameIDinput', :visible => false).send_keys file

edited Jun 3, 2020 at 11:47

David Buck

3,87740 gold badges54 silver badges73 bronze badges

answered Jun 3, 2020 at 11:00

agnaldo Vilariano

112 bronze badges

2 Comments

David Buck Over a year ago

Please only post in English on Stack Overflow. Thanks.

Thomas Walpole Over a year ago

This will probably only work with Chrome and should only be considered if you’re sure you never want to test with a different browser. You’d be much better off reading the Capybara docs for attach_file and using the relevant options for your pages usage of file inputs

Collectives™ on Stack Overflow

Testing file upload with Capybara - not a form but button and javascript function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related