Selenium IDE and TinyMCE
25I created a test case for creating a support ticket. Our support ticket interface has multiple tinymce editors present for the various ticket description and action update fields. I had a difficult time find a solution that would make Selenium IDE type text into one of these tinymce editors, but I found one that worked using the dom. Use command “type” and target should be “dom=document.getElementById(‘id_of_the_tinymce_frame’).contentDocument.body” and the value can be any text you want entered into the tinymce editor.
Note – if you copy and paste the dom code above, you may have to redo the single quotes around the id after you paste it somewhere else. I did this and the character changed and threw me off for a bit.
Hi I'm Nick Bartlett and thanks for visiting my blog. I'm not much of a writer; many of my posts are short and to the point while others are meant to be a reference for myself and other web developers.
By default “id_of_the_tinymce_frame” appears to be the “name” of the textarea, followed by an underscore, followed by the three letters “ifr”. Posting here since it wasn’t obvious to me. Thanks for the tip though, it works.
For me, “id_of_the_tinymce_frame” was the textarea’s “id” followed by “_ifr”. Thanks!
contentDocument doesn’t work in IE.
Those of you who are testing in IE should use:
dom=document.getElementById(’id_of_the_tinymce_frame’).contentWindow.document.body
For those that actually want to use selenium for cross browser testing (you know what it was designed for), use the following sets of commands, works in FF3, IE6 and IE7 with the latest selenium and tinymce
selectFrame(‘id_of_the_tinymce_frame’)
// TinyMCE puts an ID of ‘tinymce’ on the body tag of the frame.
// We want to send our type there for tinymce to pick it up and handle it.
focus(‘tinymce’)
type(‘tinymce’, ‘The text you want to input’)
selectFrame(‘relative=parent’)
Thanks a lot, that saved a day. Please keep this site up and running, may will find it useful. Thanks, agian.
Hi!
I just tried this code:
selectFrame(’id_of_the_tinymce_frame’)
// TinyMCE puts an ID of ‘tinymce’ on the body tag of the frame.
// We want to send our type there for tinymce to pick it up and handle it.
focus(’tinymce’)
type(’tinymce’, ‘The text you want to input’)
selectFrame(’relative=parent’)
It worked fine until you had 2 or more TinyMCEs on the same page.
This code worked with multiple TinyMCEs:
“dom=document.getElementById(’id_of_the_tinymce_frame’).contentDocument.body”
Thanks a lot!
Ola,
can you give me more details on how to enter text into multiple tinymce’s on a single page?
I don’t know if this is the best solution for the issue, but it worked for me.
In my case, the test run speed was a little too fast. So, I added a ‘wait’ for an element before the script set focus to the next mce. The solution worked.
I chose the textarea element id that was being managed by mce. (So, if my iframe ID was ‘test_ifr’ i looked up the corresponding textarea that was named ‘test’.
Examples:
waitForElementPresent ‘text_area_name’
selectFrame ‘tiny_mce_iframe_id’
focus tinymce
type tinymce, TEST Text
selectFrame relative=parent
waitForElementPresent test
selectFrame test_ifr
focus tinymce
type tinymce, TEST Text
selectFrame relative=parent
NOTE: For my code, I placed the test text inside opening and closing ‘p’ tags. If you don’t do that, you will overwrite the ‘p’ tags that are normally present within the mce iframe. My application under test actually looked for those, so I had to keep them in.
Oh, and, uh, I didn’t exactly space out my examples very well in my last post – but I hope everyone gets the idea.
Thanks guys, dom=document.getElementById(’id_of_the_tinymce_frame’).contentWindow.document.body worked for me, both in FF and IE.
My version of tinymce (2.1.3) had the following id: ‘mce_editor_0′.
im using selenium IDE 1.7.2
With in the site im working on, i have 2 tinymce
i tried to use dom exampl
Command: type
target: dom=document.getElementById(‘mce_edit_requirements_ifr’).contentDocument.body
value: MyText or MyText
When I click find for target it works
no error
but it does not write the text or value
can any help…
thanks
Thank you, It really works very good!
Any idea on how to select the text inside tinyMCE editor?
Thanks
Thanks for the silver bullet! Keep ‘em coming.
Many many thanks to Nick and Adam’s solutions! Adam’s (cross browser) solution worked for me.
I was specifically looking for a solution that could be implemented within the IDE and this was it!
I agree with torch – please keep this site up. It took FOREVER to find the best solution for this issue. THANK YOU for keeping it posted.
Cheers
Since TinyMCE 3.4.3.2, none of these solutions seem to work for me
And the weird thing is, that the resulting HTML code looks exactly the same…
Same here.. I have the same issue with the current version of tiny MCE.. The solutions above will not work with IE8.
Did you happen to find a solution?
Duane
Here is a link to the solution that has worked for me on IE8:
http://techiebyday.blogspot.com/2011/07/tinymce-and-selenium.html
Hi,
We recently upgraded to tinyMCE 3.4.7. Before the update, we could access the “id_of_the_tinymce_frame” with the following code:
“dom=document.getElementById(‘id_of_the_tinymce_frame_ifr’).contentDocument.body”
After the upgrade, the code no longer works. When it’s executed, it appears to work but nothing is written to the body of the textarea. Has anybody encountered this problem yet? I wonder if tinyMCE 3.4.7 changed the default for “id_of_the_tinymce_frame”. Will appreciate any tip to resolve this problem as it is urgent.
Thanks.
Boni
Hi Boni, any update on your issue? I am facing a similar problem
Bharat,
Sorry I have not checked back in a while. I am still having the problem and I am currently looking into other ways to achieve the same objective.
Boni
Hi I had the same issue. I fixed it like this:
runScript
tinyMCE.get(“text”).setContent(‘Selenium test page text’)
where “text” is id of tinymce textarea
This seems that it will work for pure text. How about HTML content, which is what I am trying to insert?