How to input text into tinceMCE editior using selenium/webdriver

Question

I am trying to automatically insert some text using Selenium/Webdriver into a text box created using tinymce

The text box is not a plain vanilla textbox so following

Answer 1

The element is inside of an iframe.

You'll need to use:

inputWebDriver.switchTo().frame("input-data_ifr");
WebElement element = inputWebDriver.findElement(By.id("tinymce"));
System.out.println("Entering something in text input");
element.sendKeys(Keys.CONTROL + "a");
element.sendKeys("Test text");

Then use the following to switch back to the top of the document when you're finished.

inputWebDriver.switchTo().defaultContent();

Answer 2

There are multiple ways of doing it. Here's an article you might want to have a look.

Test WYSIWYG editors using Selenium WebDriver

Code snippets below are not tested, only provide the logic in Java.

• Send keys directly. Same as Richard's answer above.

inputWebDriver.switchTo().frame("input-data_ifr");
WebElement element = inputWebDriver.findElement(By.cssSelector("body"));
element.sendKeys("Send keys");

• Set innerHTML

inputWebDriver.switchTo().frame("input-data_ifr");
WebElement element = inputWebDriver.findElement(By.cssSelector("body"));
(JavascriptExecutor)driver.executeScript("arguments[0].innerHTML = '<h1>Set text using innerHTML</h1>'", element);

• Use TinyMCE's native API

// no need to switch iframe
(JavascriptExecutor)driver.executeScript("tinyMCE.activeEditor.setContent('<h1>Native API text</h1> TinyMCE')");

Answer 3

From @user1177636's answer above, I found that --in the Firefox driver-- I could only get the "Use TinyMCE's native API" option to work. However, that really was not what I wanted because that would overwrite everything in the textbox with the string provided to that API method. That was detrimental for me since I had a bunch of content in the editor I did not want to lose.

However, I am happy to inform you that simply using activeEditor.selection.setContent gets it to simply insert some text instead of overwriting all of it. Yeap, that extra "selection" is what I needed.

So, here is my solution, which is just a slight variation on @user1177636's tinyMce API on above and which prepends the word "changed! ":

((JavascriptExecutor)driver).executeScript("tinyMCE.activeEditor.selection.setContent('changed! ')");

Do not forget that you'll need this import for that to work

import org.openqa.selenium.JavascriptExecutor;

Hope this helps someone else who might have the same predicament I had and saves them some time (not having to hunt as long as I did to discover this).