title: Fill in Editor textarea using capybara-webkit
body: <p>I'm using a <a href="https://github.com/lepture/editor" rel="noreferrer">markdown editor</a> on my page, which I'm trying to target, and fill in, using capybara-webkit, but without any luck.</p>
  
  <p>My template looks like this</p>
  
  <pre><code>&lt;%= simple_form_for form, url: url, method: :put do |f| %&gt;
    &lt;%= f.input :notes, as: :text %&gt;
    &lt;%= f.button :submit, class: 'fluid' %&gt;
  &lt;% end %&gt;
  
  &lt;!-- https://github.com/lepture/editor --&gt;
  &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css"&gt;
  &lt;script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"&gt;&lt;/script&gt;
  
  &lt;script !src=""&gt;
    (function () {
      var editor = new Editor();
      editor.render();
    })()
  &lt;/script&gt;
  </code></pre>
  
  <p>and the rendered html (including the executed editor javascript) looks like this (via the capybara-webkit debugging tools)</p>
  
  <pre><code>&lt;form novalidate="novalidate" class="simple_form simple_form ui form segment new_steps_update" id="new_steps_update" action="/presentations/1/who" accept-charset="UTF-8" method="post"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;&lt;input type="hidden" name="_method" value="put"&gt;
    &lt;div class="field text optional steps_update_notes"&gt;&lt;label class="text optional" for="steps_update_notes"&gt;Notes&lt;/label&gt;&lt;textarea class="text optional" name="steps_update[notes]" id="steps_update_notes" style="display: none;"&gt;&lt;/textarea&gt;&lt;div class="editor-toolbar"&gt;&lt;a class="icon-bold"&gt;&lt;/a&gt;&lt;a class="icon-italic"&gt;&lt;/a&gt;&lt;i class="separator"&gt;|&lt;/i&gt;&lt;a class="icon-quote"&gt;&lt;/a&gt;&lt;a class="icon-unordered-list"&gt;&lt;/a&gt;&lt;a class="icon-ordered-list"&gt;&lt;/a&gt;&lt;i class="separator"&gt;|&lt;/i&gt;&lt;a class="icon-link"&gt;&lt;/a&gt;&lt;a class="icon-image"&gt;&lt;/a&gt;&lt;i class="separator"&gt;|&lt;/i&gt;&lt;a class="icon-info" href="http://lab.lepture.com/editor/markdown" target="_blank"&gt;&lt;/a&gt;&lt;a class="icon-preview"&gt;&lt;/a&gt;&lt;a class="icon-fullscreen"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="CodeMirror cm-s-paper"&gt;&lt;div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;"&gt;&lt;textarea style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none; font-size: 4px;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div class="CodeMirror-hscrollbar" style="left: 0px;"&gt;&lt;div style="height: 1px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="CodeMirror-vscrollbar" style=""&gt;&lt;div style="width: 1px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="CodeMirror-scrollbar-filler" style=""&gt;&lt;/div&gt;&lt;div class="CodeMirror-gutter-filler" style=""&gt;&lt;/div&gt;&lt;div class="CodeMirror-scroll" tabindex="-1"&gt;&lt;div class="CodeMirror-sizer" style="min-width: 41.4375px; margin-left: 0px; min-height: 26px;"&gt;&lt;div style="position: relative; top: 0px;"&gt;&lt;div class="CodeMirror-lines"&gt;&lt;div style="position: relative; outline: none;"&gt;&lt;div class="CodeMirror-measure"&gt;&lt;pre&gt;&lt;span&gt;​&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;div style="position: relative; z-index: 1; display: none;"&gt;&lt;/div&gt;&lt;div class="CodeMirror-code" style=""&gt;&lt;pre&gt; &lt;/pre&gt;&lt;/div&gt;&lt;div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 17px;"&gt; &lt;/div&gt;&lt;div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;"&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style="position: absolute; height: 30px; width: 1px; top: 26px;"&gt;&lt;/div&gt;&lt;div class="CodeMirror-gutters" style="display: none; height: 420px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="editor-statusbar"&gt;&lt;span class="lines"&gt;0&lt;/span&gt;&lt;span class="words"&gt;0&lt;/span&gt;&lt;span class="cursor"&gt;0:0&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;input type="submit" name="commit" value="Next" class="ui positive submit button fluid"&gt;
  &lt;/form&gt;
  &lt;!-- https://github.com/lepture/editor --&gt;
  &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css"&gt;
  &lt;script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"&gt;&lt;/script&gt;
  
  &lt;script !src=""&gt;
    (function () {
      var editor = new Editor();
      editor.render();
    })()
  &lt;/script&gt;
  </code></pre>
  
  <p>It's a bit difficult to tell, but I think the original <code>textarea</code> (id: <code>step_update_notes</code>) is being replaced by another <code>textarea</code> inside a <code>div</code> with a class of <code>CodeMirror</code>, so I've been trying to target this using capybara, but without luck.</p>
  
  <p>This is my test as it stands now</p>
  
  <pre><code>require 'rails_helper'
  
  RSpec.feature 'Planning a presentation', type: :feature do
    context 'when logged in', js: true do
      let!(:user) { Fabricate(:user, password: 'password') }
  
      before(:each) do
        page.driver.allow_url('cdn.jsdelivr.net')
        login_user_js(user.email, 'password')
      end
  
      context 'new presentation' do
        scenario 'complete process' do
          visit presentations_path
          click_link 'Plan a new presentation'
  
          expect(page).to have_content('About your presentation')
          fill_in 'presentations_create_title', with: 'My presentation'
          click_button 'Next'
  
          expect(page).to have_content('Step one: Who')
  
          # this one is unable to find the textarea
          fill_in '.CodeMirror textarea', with: 'My step one who notes'
  
          # This one seems to complete, but upon submitting the page, the value hasn't set
          find('.CodeMirror textarea').set('My step one who notes')
          click_button 'Next'
  
          expect(page).to have_content('Step two: Action')
          skip
        end
      end
    end
  end
  </code></pre>