Capybara, Selenium and Redactor Rich Text Editor

Question

I've run into an interesting problem with Capybara and Selenium. I have some Capybara request specs which require javascript to be enabled while a form is being completed. One of the forms is a textarea which used the Redactor Rich Text Editor.

<div class="control-group">
<%= f.label :description, "Description", class: "control-label" %>
    <div class="controls">
        <%= f.text_area :description, rows: 10, class: "redactor"%>
    </div>
</div>

When the test runs and Selenium fires (in both FF and Chrome drivers), Selenium fails on the following command:

`fill_in "Description", with: "some description"`

The error it returns is:

Selenium::WebDriver::Error::InvalidElementStateError:
   Element is not currently interactable and may not be manipulated

It seems that Selenium can't recognize the Rich Text Editor/Textarea any more. If I remove the class="redactor" which is what triggers the Redactor JS to render against the Description text area it works fine.

So my question is, 1. Is there a workaround to fill it out? 2. Alternatively, could I somehow disable the redactor js just for this test?

Answer 1

You may want to consider using Redactor's API for filling editor fields:

def fill_in_redactor(options)
  if options[:in]
    node = "('#{options[:in]}')"
  else
    node = "('.redactor')"
  end

  page.execute_script( "$#{node}.redactor('set', '#{options[:with]}')" )

end

If no :in option is passed, it will find the first field with the .redactor class. Otherwise, it assumes the :in value is a valid css finder value.

This avoids having to manually fill in the hidden text_area field.

Answer 2

As narath mentioned, Capybara now supports contenteditable divs. I was able to write:

find('.redactor_editor').set('text')

fill_in wasn't working for me for some reason though.