How to click the form commit button in Capybara

9
votes

With Rails, rspec and capybara, I'm trying to test your typical ERB generated form:

<form action="/pages/1" id="edit_page_1" method="post">
  <input id="page_title" name="page[title]" type="text">
  <input name="commit" type="submit" value="Update Page">
</form>

I run two kinds of feature specs, those that are the same no matter what the language, and those that are I18N specific (for internationalization testing).

The problem is there is no clear way to click that submit button with capybara, unless I'm missing the obvious. I would expect simply click('commit') to do the trick.

  • Using click_button('Update Page') works but is obviously language specific and can't be used with both the New and Edit templates even though they render the same form template.
  • Adding an id to the submit button works, but I strongly dislike changing the code exclusively because the test requires it.
  • Using a css or xml matcher both looks ugly (a user would never know/care about accessing an element that way) and it is overkill.
3
ruby-on-railsrspeccapybara

3 Answers

18
votes

In the end a macro was the answer I needed as apparently there is nothing native in capybara.

# spec/support/form_helpers.rb
module FormHelpers
  def submit_form
    find('input[name="commit"]').click
  end
end

This gets included in spec_helper.rb

RSpec.configure do |config|
  config.include FormHelpers, :type => :feature
  ...etc...

I used :type => :feature so it gets included only in the integration tests.

In the integration tests you can use it like this:

scenario 'pages can be created' do
  visit new_page_path
  fill_in 'page_title', with: 'A Tale of Two Cities'
  submit_form # Clicks the commit button regardless of id or text

  expect(page).to have_content 'The page was created'
  ...etc..
end

Of course submit_form can also be used inside within blocks and with :js => true.

11
votes

I usually do:

within 'form#edit_page_1' do
  find('input[name="page[title]"]').set "Some Value" 
  find('input[name="commit"]').click
end

Its tied to the html but to its semantic attributes, so I feel like its fine. Actually I never use the magical finders.

Btw I dont understand your comment: (a user would never know/care about accessing an element that way).

Integration specs are for you, it mimics a user for sure but its just a matter of giving proper instructions.

1
votes

Try to use:

find('input[name="commit"]').click

It helps