How to enter text into tinymce text area using Selenium RC for Eclipse Java

Question

I'm currently trying to automate test cases where I need to enter values for a required Text Area field.

The text area uses TinyMCE 3.4.9

I found a blog online that suggested selectFrame (iFrame containing tinymce) focus (tinymce) type (tinymce, text)

that didn't help since Selenium RC can't locate the iframe. However, I tried this with the Firefox plugin and at the very least I can select the iframe and focus the editor, but I can't enter any text. With RC, nothing I do seems to work

I also tried entering text using the html editor. So selenium can emulate clicking the button to open the html editor, then RC would either fail to find the text area or I'll get an error such that the element is no longer attached to the DOM (something along that line)

Sorry if this sounds confusing.

score 11 · Answer 1 · answered Nov 27 '12 at 00:10

11

This worked for me:

command: runScript target: tinyMCE.activeEditor.setContent('Replace with your text')

Got it from http://www.tinymce.com/forum/viewtopic.php?id=27960

answered Nov 27 '12 at 00:10

Dejan

9,150
8
69
117

Link is broken. – Moesio Nov 08 '16 at 13:33

score 3 · Answer 2 · answered Apr 02 '14 at 15:38

3

If you have multiple tinyMCE forms on one page, I recommend
Command: runScript
Target: tinyMCE.get('textarea_id').setContent('Your Text')

answered Apr 02 '14 at 15:38

ljavor

116
7

score 2 · Answer 3 · edited Mar 19 '14 at 01:13

2

Firstly you switch to frame

// driver is type of IWebDriver
driver.switchTo().frame(frameName or frameIndex);

Then you get element by id and fill it with your text

 var el = driver.findElement(By.id("tinymce"));
 el.sendKeys("YOUR TEXT");

edited Mar 19 '14 at 01:13

Dave Jarvis

30,436
41
178
315

answered Feb 03 '13 at 16:41

312k1t

269
1
4
10

score 1 · Answer 4 · answered Aug 30 '14 at 09:37

1

WebElement bodyIframe = driver.findElement(By.tagName("iframe")); driver.switchTo().frame(bodyIframe); WebElement mce = driver.findElement(By.id("tinymce")); mce.sendKeys("This is for testing!!!!");

This worked perfectly for me

answered Aug 30 '14 at 09:37

Vicky

2,999
2
21
36

score 0 · Answer 5 · answered Aug 16 '12 at 14:54

0

The only way I am able to get Selenium testing to work with TinyMCE is to not use TinyMCE for the test.

Use some server-side wizardry to selectively disable the TinyMCE plugin under test conditions.

This will not help you with testing the use of TinyMCE itself, but you will at least be able to fill in the form to completion and move your tests forward... :)

answered Aug 16 '12 at 14:54

datashaman

8,301
3
22
29

Ok so at least I know TinyMCE and SleniumRC are destined to not get along. – Josh Aug 16 '12 at 16:54
TinyMCE can indeed be used in Selenium RC tests. We do it all the time. And @pents90 already showed one way to do it here. – Ross Patterson Aug 28 '12 at 15:22

score 0 · Answer 6 · answered Aug 23 '12 at 20:44

For TinyMCE 3.4.x and Selenium IDE in Firefox, this is working for me. Substitute the id of your TinyMCE instance for NAME below:

<tr>
    <td>type</td>
    <td>dom=document.getElementById('NAME_ifr').contentDocument.body</td>
    <td>Editor content</td>
</tr>

This is based on https://gist.github.com/809728

score 0 · Answer 7 · answered Aug 28 '12 at 15:27

We use the process described at techiebyday.blogspot.com, and it works great in current versions of Selenium RC (at least up to 2.20) and TinyMCE (post-3.4). In C#, it looks like this:

string editorFrameId = editorId + "_ifr";
selenium.Focus(String.Format("dom=document.getElementById('{0}').contentWindow.document.body", editorFrameId));
selenium.GetEval(String.Format("selenium.browserbot.getCurrentWindow().document.getElementById('{0}').contentWindow.document.body.innerHTML = '{1}';", editorFrameId, fillString));

score 0 · Answer 8 · answered Sep 17 '12 at 10:16

I've been trying to use this solution:

<tr>
  <td>type</td>
  <td>dom=document.getElementById('NAME_ifr').contentDocument.body</td>
  <td>Editor content</td>
</tr>

Replaced 'name_ifr'. First to frame name and inserted before entering into the tinymce frame and then replaced name with 'tinymce' and inserted after entering the frame where accoring to all the rules typing must happen. But all I get is errors. Somehow, I never make DOM or js commands work in my script. Is there something I am missing?

score 0 · Answer 9 · answered Apr 12 '13 at 17:02

0

If you have one TinyMCE element in page:

var obj = ((IJavaScriptExecutor)webDriver).ExecuteScript("tinyMCE.activeEditor.setContent('" + text + "');");

answered Apr 12 '13 at 17:02

Babak

3,716
6
39
56

score 0 · Answer 10 · answered May 02 '13 at 07:34

I was having problems entering text in a tinyMCE editor too:

FireFox 20.01
tinyMCE 3.4.9
Selenium IDE 1.10.0

I have multiple tinyMCE editors in my form.

Solution (using Selenium IDE, which can be ported to Selenium RC easily):

Using firebug, find out the id of the tinymce iframe that replaces the textarea, e.g. form_editor1_ifr
Strip the "_ifr" from this id to get the id of the original textarea
Use this id in the target for the runScript command in Selenium IDE: tinyMCE.get('form_editor1_ifr').setContent('the content');

score 0 · Answer 11 · edited May 15 '14 at 09:55

0

In Selenium webdriver PHPUnit_Extensions_Selenium2TestCase, this works when you use:

$this-> execute(array('script' => "tinymce.get('cms_cpg_content').setContent('Lorem ipsum dolor sit amet,...')", 'args' => array()));

When you want to add text.

edited May 15 '14 at 09:55

jam

3,640
5
34
50

answered May 15 '14 at 09:35

user3640145

21
2

score 0 · Answer 12 · answered Sep 09 '15 at 11:21

I was able to solve this problem using Selenium RC, have done following steps(attached screenshot for your referral)

on tinyMCE editor, click on Advanced option icon
Click on "<>" source code icon
Source code popup appears, enter text and click Ok
text appears in TinyMCE editor

Just for your reference I have given steps with CSS locator

click on advaced option button: css= tr[id*='tinymce'] td * div[aria-label='Advanced Options'] button
click on source code: css= tr[id*='tinymce'] td * div[aria-label='Source code'] button
click on popup textarea css= div[class*='mce-floatpanel'][aria-label='Source code'] * textarea
click on ok button on popup css= div[class*='mce-floatpanel'][aria-label='Source code'] * div>button:contains('Ok')
verify text present in tinymce css=body p:contains(this is testing)

Hope this will solve your problem :)

score -1 · Answer 13 · answered Aug 14 '12 at 22:56

-1

http://odino.org/typing-into-tinymce-with-selenium/ ...looks like TinyMCE and selenium IDE hook ups don't work on 3.4.5, so my presumption is that this issue has been carried over into 3.4.9.

answered Aug 14 '12 at 22:56

Greg

5,422
1
27
32

Yes, I saw that page/comment. I guess there isn't a fix for this currently. Thank you – Josh Aug 15 '12 at 14:50
Check out http://techiebyday.blogspot.com/2011/07/tinymce-and-selenium.html - that works even after 3.4.5. – Ross Patterson Aug 28 '12 at 15:28

How to enter text into tinymce text area using Selenium RC for Eclipse Java

13 Answers13