Automated Testing and TinyMCE

Ever come across one of these TinyMCE editors in the stuff you have to test?  Well, it’s probably going to give you a headache when you do.  There’s a <textarea> in the page, and normally, you’d grab the element, set its value, and call it good.

Not here.

You see…  TinyMCE doesn’t use content of the text area.  Instead, it seems to be dynamically building an HTML document within an <iframe> and the text area is just there to be a placeholder.  Now, I’m sure that if you really wanted to, you can probably manipulate the HTML document in that <iframe>, but if you want to do that, there’s probably something wrong with you.  Fortunately, there’s a better way.

TinyMCE has a JavaScript API.  (Details here…)  This API lets you do all sorts of crazy things when you’re developing a page with a TinyMCE editor on it.  Of course, we’re not developing the page, but fortunately, the TinyMCE editor doesn’t know that.  JavaScript called from the test is just as valid as JavaScript called from the page in its view, so we can call the function to insert text into the document.  Like so:

window.tinyMCE.execCommand(‘mceInsertContent’,false,’contentHTML‘);

where “contentHTML” is the stuff you want to insert.

I’m assuming that all you have to do is insert a bit of content into the editor field, much like it were a regular text input box.  If you have to do more in depth testing of various TinyMCE controls, you’re either testing the wrong thing (the editor instead of your app), or you’re on the dev team for TinyMCE, in which case you shouldn’t be reading my blog post on this subject, you should be writing your own explaining this so that outside testers don’t waste the better part of their day to figure this sort of stuff out.

Now, as far as how to actually call JavaScript code when you’re automating the browser through the DOM…  I thought I’d written something about that before, but now I can’t seem to find it.  I guess that’ll have to be a topic for the future.