What is the difference between Rspec have_css, have_selector, and have_field?

Question

I have this html.erb Rails form:

<h1 class=new_vendor_header>New Vendor Form</h1>

<%= form_for(@vendor) do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name, placeholder: "ex: Jeff" %>
  <%= f.submit "Submit" %>
<% end %>

This passes:

expect(page).to have_selector('input[placeholder="ex: Jeff"]')

But this does not:

expect(page).to have_field('input[placeholder="ex: Jeff"]')

and this does not:

expect(page).to have_selector('input[placeholder="ex: Jeff"]')

Selector refers to HTML selector right so it refers to html elements? have_css I thought looked for CSS but it seems to do more. Here is the example from the cheat sheet:

response.body.should have_css("input", :count => 3) #True if there are 3 input tags in response

And that seems to look for input HTML selectors.

So what is the difference and why do the other two fail in my example?

Answer 1

From Docs here have_css will call has_selector with css as a param, as has_selector can handle css, xpath, ...

def have_css(css, options={})
      HaveSelector.new(:css, css, options)
end