Làm thế nào để điền ckeditor từ capybara bằng trình điều khiển webkit hoặc selen

Question

Làm cách nào để tôi có thể điền vào vùng CKEditor trong Capybara, giả sử tôi đang sử dụng trình điều khiển có khả năng javascript như capybara-webkit hoặc selenium?

Answer 1

Lấy cảm hứng từ những gì tôi đã tìm thấy here, tôi đã đưa ra giải pháp sử dụng javascript để đặt cả dữ liệu trên ẩn textarea và đối tượng CKEditor. Dường như không đủ, tùy thuộc vào hoàn cảnh.

def fill_in_ckeditor(locator, opts) 
    content = opts.fetch(:with).to_json # convert to a safe javascript string 
    page.execute_script <<-SCRIPT 
    CKEDITOR.instances['#{locator}'].setData(#{content}); 
    $('textarea##{locator}').text(#{content}); 
    SCRIPT 
end 

# Example: 
fill_in_ckeditor 'email_body', :with => 'This is my message!' 

Answer 2

RSpec + Capybara hỗ trợ tập tin để làm việc với các trường hợp ckeditor

module Ckeditor 
    class Instance 
    attr_reader :capybara 
    private :capybara 

    def initialize(instance_id, capybara) 
     @instance_id, @capybara = instance_id, capybara 
    end 

    def val(value) 
     capybara.execute_script "jQuery('textarea##{@instance_id}').val('#{value}')" 
    end 

    def reload_all 
     capybara.execute_script "for(var instance in CKEDITOR.instances) { if(CKEDITOR.instances.hasOwnProperty(instance)) {CKEDITOR.instances[instance].destroy(true);} }" 
     capybara.execute_script "CKEDITOR.replaceAll();" 
    end 
    end 
end 

# usage 
# rte = Ckeditor::Instance.new(:my_instance_id, page) 
# rte.val 'foo' 
# rte.reload_all 
# NOTE: page is provided by Capybara 

https://gist.github.com/3308129

Answer 3

Một bổ sung nhỏ để Marc-André's awesome answer

Nếu bạn đang sử dụng hình thức lồng nhau hoặc nhiều textareas trong cùng ID được tạo trang khá xấu và khó viết vào các bài kiểm tra (ví dụ: person_translations_attributes_2_biography) với phần bổ sung nhỏ này để hi s phương pháp bạn có thể xác định vị trí ckeditors sử dụng nhãn của họ thay vì ID

# Used to fill ckeditor fields 
# @param [String] locator label text for the textarea or textarea id 
def fill_in_ckeditor(locator, params = {}) 
    # Find out ckeditor id at runtime using its label 
    locator = find('label', text: locator)[:for] if page.has_css?('label', text: locator) 
    # Fill the editor content 
    page.execute_script <<-SCRIPT 
     var ckeditor = CKEDITOR.instances.#{locator} 
     ckeditor.setData('#{params[:with]}') 
     ckeditor.focus() 
     ckeditor.updateElement() 
    SCRIPT 
end 

Bằng cách này thay vì điều này

fill_in_ckeditor 'person_translations_attributes_2_biography', with: 'Some text' 

bạn có thể viết này

fill_in_ckeditor 'Biography', with: 'Some text' 

Answer 4

Đối với tôi Marc-André's answer chuyển bối cảnh khung nội tuyến trong trình điều khiển webkit. Xem this capybara-webkit issue

tôi tìm thấy một cách khác để điền vào đầu vào ckeditor mà không thay đổi bối cảnh iframe:

def fill_in_ckeditor(id, with:) 
    within_frame find("#cke_#{id} iframe") do 
     find('body').base.send_keys with 
    end 
    end 

và gọi nó là

fill_in_ckeditor 'comment', with: 'This is my message!'

trình cả với webkit và selen trình điều khiển

Lấy cảm hứng từ this post