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

Answer 1

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.

Answer 2

1. 这适用于 Windows 或 Linux
   • filename = '/features/pages/images/imagetest01.jpg'
   • file = File.join(Dir.pwd, filename)
   • find('input#nameIDinput', :visible => false).send_keys file