Testing EpicEditor with Capybara & RSpec

EpicEditor is a JavaScript-dependent Markdown editor that uses nested iframes and can be embedded in Rails forms to replace textarea fields.

Digging into these nested iframes to input text within a test can be a little tricky. See the fill_in_editor_field(text) method below for how you can enter text into EpicEditor in your feature specs, using nested calls to Capybara’s within_frame:

# Important, `js: true` metadata
# required for Capybara to run this
# using a driver for a
# JavaScript-capable browser.
feature '...', js: true do

  scenario '...' do
    ...
    fill_in_editor_field '*Some* markdown.'
    ...
  end

  private

  def fill_in_editor_field(text)
    # Use CSS attribute prefix selector
    # (^=) to find iframe with id
    # beginning with 'epiceditor-' to
    # match first parent iframe in page
    parent_iframe = find('iframe[id^=epiceditor-]')

    within_frame(parent_iframe) do
      child_iframe_id = 'epiceditor-editor-frame'
      
      within_frame(child_iframe_id) do
        find('body[contenteditable]').set(text)
      end
    end

  end
  
end

n.b. You may need to disable Turbolinks on inbound links to forms using EpicEditor so the editor loads consistently.