entering text into CKEditor with watir webdriver

Question

this is frustrating the hell out of me.

I'm still new to ruby/watir webdriver and so learning as i go, so be gentle.

I'm using ruby v2 with watir webdriver in order to automate text entry into a ckeditor embedded in page. I've been rummaging around the web and read almost everything i can find on automating it but still getting no success on entering text.

The html around the ckeditor is;

<div class="cke_inner cke_reset" role="presentation">
<span id="cke_1_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation"> 
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;">
<span id="cke_45" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" style="width: 100%; height: 100%;" aria-describedby="cke_45" title="Rich Text Editor,contentItemHTML" src="" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr" webdriver="true">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_blocks" contenteditable="true" spellcheck="false">
<p>
entering text here
<br type="_moz">
</p>

and the code I'm using is;

$browser.iframe(:class, "cke_wysiwyg_frame cke_reset").body(:class, "cke_editable cke_editable_themed cke_contents_ltr cke_show_blocks").send_keys("TEST")

I've tried with the send_keys 'Test'

This places the cursor in the correct area, but enters no text.

any help would be greatly appreciated.

Justin Ko Justin Ko · Accepted Answer · 2014-05-22T13:28:35

I find that send_keys is finicky for rich text editors. For example, I have seen the code work correctly in Chrome, but not in Firefox. As well it is hard to control where send_keys inserts the text.

Assuming you are not trying to actually test the functionality of the CKEditor, you are better off using the suggestion from watir-webdriver.com, which is to directly set the html via javascript.

This is done by:

browser.execute_script("CKEDITOR.instances.editor1.setData('TEST');")

Where editor1 is the id of the CKEditor and TEST is the html that you want the editor to equal.

Here is a working example (using the CKEditor demo page):

browser = Watir::Browser.new
browser.goto "http://ckeditor.com/demo"
browser.execute_script("CKEDITOR.instances.editor1.setData('TEST');")
sleep(2) # So you can see the change

entering text into CKEditor with watir webdriver

1 Answers