TinyMCE and Selenium

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control that can be embedded in web pages. Selenium is an open source automation framework that can drive tests on most web browsers.

The web page that I wanted to test using Selenium consisted of multiple tinymce editors used for various rich textareas. Internet Explorer 8 was the target browser. Obviously simply using the type command with input text did not work. So googled on how other people achieved this, found following two solutions:

1. Select frame and then type text

selectFrame id_of_tinymce_iframe
focus tinymce
type tinymce Text_text
selectFrame relative=parent

2. Identify the text area using DOM locator

type dom=document.getElementById('id_of_tinymce_iframe').contentWindow.document.body Test_text

Both of them seem to work on Firefox where I develop my test using Selenium IDE. But on IE 8 I would not see the "Test_text" in the TinyMCE textarea even though the steps would run fine. The way I ended up achieving this was by using the following:

focus dom=document.getElementById('id_of_tinymce_iframe').contentWindow.document.body
getEval selenium.browserbot.getCurrentWindow().document.getElementById('id_of_tinymce_iframe').contentWindow.document.body.innerHTML = 'Test_text';

Yes and this did work on IE 8.


Click here to read "Selenium tips for better automation".