Using the TinyMCE jQuery plugin with RSpec and Capybara

22 May 2012, 22:23

I needed to add TinyMCE to a form for WYSIWYG editing (which is what it’s for, of course), so I put the jQuery TinyMCE thing in. Unfortunately, adding TinyMCE to the textarea broke the RSpec tests, complaining bitterly that

Selenium::WebDriver::Error::ElementNotVisibleError:
  Element is not currently visible and so may not be interacted with

… which was no good at all.

Scouring around the internet showed a lot of people who had had similar problems, but nothing quite spelled it out. This Stackoverflow question was closest, but wasn’t quite what I needed. Beating rspec and capybara around a little more, along with some more googling, gave me this solution. Worked for me, although as that Stackoverflow commentor noted it might break on more complicated stuff. This page on TinyMCE, jQuery, Rails, and cucumber also helped, but since we aren’t using cucumber I had to adapt it a bit more.

This assumes you’re using the jQuery TinyMCE script. I believe the steps without jQuery would be similar though. Assume that foo_description_raw is your textarea holding the TinyMCE editor. In RSpec, where you would have something like this:

within("form[id=foo_edit]") do
  fill_in 'foo_subject', :with => 'Murple'
  fill_in 'foo_description_raw', :with => 'Pants are pretty sweet.'
end

Change it to this:

within("form[id=foo_edit]") do
  fill_in 'foo_subject', :with => 'Murple'
end
page.execute_script('$("#foo_description_raw").tinymce().setContent("Pants are pretty sweet.")')

After I did that, my tests began filling the editor in and passing again.