Automate entering text into WYSIWYG editors using Watir-WebDriver

When writing automated web tests, I find it common to come across WYSIWYG (What-you-see-is-what-you-get) editors, and because these usually are html elements embedded in an iframe, it’s not usually easy to automate entering text into these (nowhere near as easy as a text field or text area say).

I’ve found there are two ways to enter text into a WYSIWYG editor using Watir-WebDriver:

  • locate the iFrame, and use .send_keys to enter text
  • execute javascript on the browser object that sets the value of the WYSIWYG editor

The benefit of using the iFrame is that you can use the same code across the different WYSIWYG editors and don’t need to understand the javascript, but the downside is that when running your tests in Firefox, the browser needs to be in focus or your test will not work. This is a big issue for me, as I often do other things while tests are running, so I avoid this method completely.

The benefit of the method that executes javascript is I have found it more reliable as you don’t need to ensure focus, but the downside is working out what the javascript is that you need to execute.

Setting text on two types of WYSIWIG editors

Here I will show you how easy it is to set these two popular WYSIWYG editors using the two methods I mentioned.


require 'watir-webdriver'
b = :firefox
b.goto ''
b.execute_script("CKEDITOR.instances['editor1'].setData('hello world');")
b.frame(:title => 'Rich text editor, editor1, press ALT 0 for help.').send_keys 'hello world again'

TinyMCE Editor

require 'watir-webdriver'
b =
b.goto ''
b.execute_script("tinyMCE.get('content').execCommand('mceSetContent',false, 'hello world' );")
b.frame(:id => "content_ifr").send_keys 'hello world again'


I have switched to using the JavaScript method as I find it much more reliable, and once you understand the JavaScript API for common editors, it is reasonably straightforward to do.

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

11 thoughts on “Automate entering text into WYSIWYG editors using Watir-WebDriver”

  1. Hello, i have been searching for this problem i have, i run the watir in the CKEditor page, and it works good, but in my page i have for iframe:

    So, when i change the b.frame:
    @browser.execute_script(“CKEDITOR.instances.editor1.setData(‘hello world’);”)
    @browser.frame(:name, ‘englishDescEditor’).send_keys (arg1)

    I receive this error:
    unknown error (Selenium::WebDriver::Error::UnexpectedJavascriptError)

    Can you help me please? I postedi in google groups:


  2. Alister, every time I try to use the tinyMCE API calls I get this error:

    Selenium::WebDriver::Error::JavascriptError: ReferenceError: tinyMCE is not defined

    What could be a likely cause of that?


  3. Hi, I want to input some text to the textarea in iframe with watir-webdriver, I use the @browser.iframe(:id, id).send_keys content, but the content can’t be input.


  4. If you want to use the send_keys method, but still want to do other things while you test, you can simply click the frame first (this worked flawlessly on our WYSIWYG editor).


Comments are closed.