Editor 使用capybara webkit填写编辑器文本区域

我在我的页面上使用了一个，我试图使用水豚网络工具包来定位和填充它，但没有任何运气

我的模板看起来像这样

<%= simple_form_for form, url: url, method: :put do |f| %>
  <%= f.input :notes, as: :text %>
  <%= f.button :submit, class: 'fluid' %>
<% end %>

<!-- https://github.com/lepture/editor -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

<script !src="">
  (function () {
    var editor = new Editor();
    editor.render();
  })()
</script>

---

所以，这不是我期望的答案，我不确定这是否是最好的方法，但我发现了一些有效的方法

一些研究表明，我能够使用javascript填充编辑器的内容，特别是

Editor.codemirr.setValue（）。因此，我确保编辑器变量位于
FTAPP
对象中的全局范围内（这可能是最好的主意，也可能不是），然后使用以下Capybara代码

require'rails\u helper'
RSpec.feature“规划演示文稿”，类型：：feature do
上下文“登录时”，js:true do
让我来！（：user）{伪造（：user，密码：'password'）}
在…之前做
page.driver.allow_url（'cdn.jsdeliver.net'）
登录用户（user.email，'password'）
结束
上下文“新演示文稿”是什么
场景“完成过程”是什么
参观马鞍山径
单击链接“计划新演示文稿”
期望（第页）包含内容（“关于您的演示文稿”）
在“演示文稿”中填写“我的演示文稿”
单击按钮“下一步”
期望（第页）有_内容（'第一步：谁'）
page.execute_脚本（'FTAPP.editor.codemirror.setValue（“我的第一步注释”）；）
单击按钮“下一步”
期望（第页）有_内容（“第二步：操作”）
跳过
结束
结束
结束
结束
我还使用Javascript更新了编辑器的内容。但我不想像Daniel那样将编辑器变量公开到全局范围。但幸运的是，您可以使用查找元素。Codemirror将自身附加到元素，因此您可以访问该元素及其方法：

execute_脚本（“document.querySelector（'.codemirr'）.codemirr.setValue（'VALUE'）”）

<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"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="put">
  <div class="field text optional steps_update_notes"><label class="text optional" for="steps_update_notes">Notes</label><textarea class="text optional" name="steps_update[notes]" id="steps_update_notes" style="display: none;"></textarea><div class="editor-toolbar"><a class="icon-bold"></a><a class="icon-italic"></a><i class="separator">|</i><a class="icon-quote"></a><a class="icon-unordered-list"></a><a class="icon-ordered-list"></a><i class="separator">|</i><a class="icon-link"></a><a class="icon-image"></a><i class="separator">|</i><a class="icon-info" href="http://lab.lepture.com/editor/markdown" target="_blank"></a><a class="icon-preview"></a><a class="icon-fullscreen"></a></div><div class="CodeMirror cm-s-paper"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;"><textarea style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none; font-size: 4px;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 1px;"></div></div><div class="CodeMirror-vscrollbar" style=""><div style="width: 1px;"></div></div><div class="CodeMirror-scrollbar-filler" style=""></div><div class="CodeMirror-gutter-filler" style=""></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="min-width: 41.4375px; margin-left: 0px; min-height: 26px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>​</span></pre></div><div style="position: relative; z-index: 1; display: none;"></div><div class="CodeMirror-code" style=""><pre> </pre></div><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 17px;"> </div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;"> </div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 26px;"></div><div class="CodeMirror-gutters" style="display: none; height: 420px;"></div></div></div><div class="editor-statusbar"><span class="lines">0</span><span class="words">0</span><span class="cursor">0:0</span></div></div>
  <input type="submit" name="commit" value="Next" class="ui positive submit button fluid">
</form>
<!-- https://github.com/lepture/editor -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

<script !src="">
  (function () {
    var editor = new Editor();
    editor.render();
  })()
</script>

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