How can I check that a form field is prefilled correctly using capybara?

Question

I have a field with a proper label that I can fill in with capybara without a problem:

fill_in 'Your name', with: 'John'

I'd like to check the value it has before filling it in and can't figure it out.

If I add after the fill_in the following line:

find_field('Your name').should have_content('John')

That test fails, although the filling just before worked as I've verified by saving the page.

What am I missing?

Solution 1

You can use an xpath query to check if there's an input element with a particular value (e.g. 'John'):

expect(page).to have_xpath("//input[@value='John']")

See http://www.w3schools.com/xpath/xpath_syntax.asp for more info.

For perhaps a prettier way:

expect(find_field('Your name').value).to eq 'John'

EDIT: Nowadays I'd probably use have_selector

expect(page).to have_selector("input[value='John']")

If you are using the page object pattern(you should be!)

class MyPage < SitePrism::Page
  element :my_field, "input#my_id"

  def has_secret_value?(value)
    my_field.value == value
  end
end

my_page = MyPage.new

expect(my_page).to have_secret_value "foo"

Solution 2

Another pretty solution would be:

page.should have_field('Your name', with: 'John')

or

expect(page).to have_field('Your name', with: 'John')

respectively.

Also see the reference.

Note: for disabled inputs, you'll need to add the option disabled: true.

Solution 3

If you specifically want to test for a placeholder, use:

page.should have_field("some_field_name", placeholder: "Some Placeholder")

or:

expect(page).to have_field("some_field_name", placeholder: "Some Placeholder")

If you want to test the user-entered value:

page.should have_field("some_field_name", with: "Some Entered Value")

Comments

[Marc-André Lafortune]

Ah, I was missing the .value bit. Thanks!

[John Y]

I was having the same problem, but with a div rather than a form field. For anybody else having the same problem, use find_by_id().text rather than find_field().value. It took me ages to spot that value only worked on form fields…

[fqxp]

The problem with the latter way is that it does not use Capybara's polling cycle and therefore will fail instantly if the field is set by longer-running JS code. The first way is to be preferred unless you are trying this on a statically generated form.

[Agent47DarkSoul]

I think @fqxp has a better answer which uses RSpec Matchers and the new expectation syntax. From what I see in the documentation, find_field and other Node::Finders are used to find nodes and perform actions on them rather than expectation. Of course this is not a rule, but for something simple as this going with the inbuilt solution is a better idea. Just saying!

[Agent47DarkSoul]

Much better than the selected answer!

[DVG]

True, expect would be the preferred way now, however that syntax was released about a month after this question.

[mraaroncruz]

I would still prefer the selected answer because the error message shows you the expected and actual strings. This gives the unhelpful "expected field "my field" to return something" error. But this one does definitely read better and follows the page matcher API better. Upvotes all around!!!

[PriyankaK]

You are a saviour!Thanks for the perfect answer.

[Avi Tevet]

This worked for me when using typeahead.js to verify the contents of the field, while the xpath matcher did not.

[roman-roman]

I think that happens because with that have_field capybara is waiting some time for that field before reporting failure.

[user664833]

With Minitest the lines look like this: assert has_xpath?("//input[@value='John']") and assert_equal 'John', find_field('Your name').value

[Nick]

As far as I can tell, this doesn't actually confirm the value of the field, just the presence of the field regardless of value. I'm guessing it's a bug since the docs say it should filter based on value.

[Ben Saufley]

Passing in with definitely only returned true if the value matches, for me, which is the expected result.

[Patru]

Maybe the error message has been improved since the answer was first written, but I now get expected […] but there were no matches. Also found "", which matched the selector but not all filters.. on an empty field which comes very close to a very nice error message.

[siannopollo]

You could also use the form find_field('field-name').value.should have_content('John') if you don't want to match on the entire field value.

[pduey]

If you're using poltergeist, this answer is best because it will keep checking until the configured timeout, so you don't need a bunch of lame sleeps in your specs.

[mahi-man]

One more thing to look out for - if you field is disabled, you must do expect(page).to have_field('Your name', with: 'John', disabled: true) for this to work.

[David Cook]

This has the advantage of being DOM-agnostic. It works for other form fields like textarea.