Testing javascript click function capybara attach file image upload

Question

I'm trying to test a photo upload paperclip using Capybara. However I'm getting an error about file field when running cucumber test.

Unable to find file field :upload (Capybara::ElementNotFound)

Javascript

$("#uploadhere").click(function() {
    $("#photo_upload_entry_upload").click();
  });

Steps.rb file

Then(/^I should see photo when I upload and submit entry$/) do
  script = "$('form.new_photo_upload_entry').css('i.fa.fa-file-image-o');"
  page.execute_script(script)

  fixture_path = Rails.root.join('spec', 'support', 'fixtures', 'test.jpg')

  within('form.new_photo_upload_entry') do 
    attach_file(:upload, fixture_path)
  end
end

HTML (using inspect element)

<input type="file" name="photo_upload_entry[upload]" id="photo_upload_entry_upload">

Ruby code of form in slim format

.entry-label STEP 1: UPLOAD YOUR IMAGE
    .entry-upload#uploadhere
      .upload-here
        i.fa.fa-file-image-o
        br
        = "UPLOAD YOUR IMAGE HERE"
      img
    =f.file_field :upload

Have you tried to see the name, class or id in the html for the file_field generated ? see how it is there and try to attach the file to a locator other than :upload to match the html. — Cassio Cabral
– Cassio Cabral, Commented Dec 10, 2015 at 23:31
I tried with using the selector name, id, type. They all threw element cannot be found error. Unable to find file field "photo_upload_entry_upload" (Capybara::ElementNotFound) Unable to find file field "photo_upload_entry[upload]" (Capybara::ElementNotFound) — khoamle
– khoamle, Commented Dec 11, 2015 at 17:00

fabdurso · Accepted Answer · 2015-12-11 09:44:12Z

2

Your

attach_file(:upload, fixture_path)

is wrong. As i can see in your HTML, you'll have to use:

attach_file('photo_upload_entry[upload]', fixture_path)

as the attach_file works with the input field name

answered Dec 11, 2015 at 9:44

fabdurso

2,4645 gold badges31 silver badges56 bronze badges

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

2 Comments

khoamle Over a year ago

Unable to find file field "photo_upload_entry[upload]" (Capybara::ElementNotFound)       ./features/step_definitions/photo_upload_entries_new_steps.rb:21:in

block (2 levels) in <top (required)>'`

dimitry_n Over a year ago

@fabersky Worked for me. Thanks! For hours, I've been trying to select the input with xpath with //input[@id=...]. I wonder why selection by name works and xpath doesn't.

Sosth · Accepted Answer · 2015-12-14 08:59:41Z

1

try to use id attribute of an input element, I think it'll be ok.

page.attach_file('photo_upload_entry_upload', path_of_file)

answered Dec 14, 2015 at 8:59

Sosth

331 silver badge8 bronze badges

1 Comment

khoamle Over a year ago

I tried it with id, doesn't work. Unable to find file field "photo_upload_entry_upload" (Capybara::ElementNotFound)

Collectives™ on Stack Overflow

Testing javascript click function capybara attach file image upload

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related