Capybara and contenteditable

Question

How do you use Capybara to test elements with contenteditable="true"?

With this spec...

scenario "Using valid input" do
  fill_in "name", with: "Zinn"
  click_button "Update"
  expect(page).to have_content("Update successful!")
end

... and this eco file...

<td id="name" contenteditable="true"><%= @name %></td>
<td><button id="update" class="btn btn-sm btn-default">Update</button></td>

I get this failing spec...

Capybara::ElementNotFound:
   Unable to find field "name"

Answer 1

Here's how I ended up solving the problem.

feature "Editing", js: true do

  scenario "with valid input" do
    el = find(:xpath, "//div[@contenteditable='true' and @name='name']")
    el.set("Zinn")
    el.native.send_keys(:return)
    expect(page).to have_content("Update successful!")
    expect(page).to have_content("Zinn")
  end

end

According to this thread it looks like you should be able to use the fill_in helper on contenteditable divs, but I couldn't get that to work.

Answer 2

In 2020 I can do this

find('.selector').send_keys 'this text gets filled in'