Capybara unable to find input tag CSS element

Question

I'm trying to use capybara to find a CSS element but RSpec keeps returning unable to find element. I tried with id, class, and name.

HTML (using inspect element)

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

steps.rb file

expect(page).to have_css('#photo_upload_entry_upload')
expect(page).to have_css('.new_photo_upload_entry')
expect(page).to have_css('input[name="photo_upload_entry[upload]"]')

Running cucumber feature result:

expected to find css "#photo_upload_entry_upload" but there were no matches. Also found "", which matched the selector but not all filters. (RSpec::Expectations::ExpectationNotMetError)

expected to find css ".new_photo_upload_entry" but there were no matches (RSpec::Expectations::ExpectationNotMetError)

expected to find css "input[name=\"photo_upload_entry[upload]\"]" but there were no matches. Also found "", which matched the selector but not all filters. (RSpec::Expectations::ExpectationNotMetError)

Answer 1

Since you are looking for a file element, there's a high chance it's been hidden on the page (so that a different element can be styled the same across browsers). This is common with most JS file upload helper libraries. if it's not actually visible on the page and you just want to confirm it exists in the page source you can pass visible: false as an option

expect(page).to have_css('#photo_upload_entry_upload', visible: false)

If however you next want to call #attach_file on it to upload a file, you'll need to use execute_script(...) to modify the css of the element to make it visible before you attach a file to it.

The other option is that the element isn't actually on the page (since all 3 of your finders should match the element if it existed and was visible). You can check page.html to see what page is actually being used by capybara.