Điền vào văn bản của biên tập viên bằng cách sử dụng capybara-webkit

Question

Tôi đang sử dụng markdown editor trên trang của mình, mà tôi đang cố gắng nhắm mục tiêu và điền vào bằng cách sử dụng capybara-webkit nhưng không có bất kỳ sự may mắn nào.

mẫu của tôi trông như thế này

<%= 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> 

và html rendered (bao gồm cả javascript biên tập thực hiện) trông như thế này (thông qua các công cụ Capybara-webkit gỡ lỗi)

<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> 

Đó là một chút khó khăn để nói, nhưng tôi nghĩ rằng ban đầu textarea (id: step_update_notes) đang được thay thế bằng một số khác textarea bên trong một div với một lớp là CodeMirror, vì vậy tôi đã cố gắng nhắm mục tiêu này bằng capybara nhưng không may mắn.

Đây là thử nghiệm của tôi như bây giờ đứng

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 

Answer 1

Vì vậy, đây không phải là câu trả lời mà tôi đã mong đợi, và tôi không chắc chắn nếu điều này là cách tốt nhất để làm việc đó, nhưng tôi tìm thấy một cái gì đó hoạt động.

Một số nghiên cứu cho thấy tôi có thể điền nội dung của Trình chỉnh sửa bằng javascript, cụ thể là editor.codemirror.setValue();. Vì vậy, tôi đảm bảo biến biên tập nằm trong phạm vi toàn cục bên trong một đối tượng FTAPP (có thể hoặc không thể là ý tưởng tốt nhất), sau đó sử dụng mã Capybara sau đây.

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') 

     page.execute_script('FTAPP.editor.codemirror.setValue("My step one who notes");') 

     click_button 'Next' 

     expect(page).to have_content('Step two: Action') 
     skip 
     end 
    end 
    end 
end