problems with TinyMCE

374 views
Skip to first unread message

eXe

unread,
May 18, 2009, 3:06:27 AM5/18/09
to webdriver
Hi everyone,

I've successfully used WebDriver for quite some time, yet now I'm
running into a unsolvable problem for me.
I try to test my comments page component which is created from the JSF
library RichFaces (<rich:editor>) which facilitates TinyMCE to do the
job.

I can't seem to get WebDriver to set any value to the WYSIWYG editor
field. Here is the rendered HTML part:
==============
<div id="commentForm:j_id362:commentInput" class="rich-editor">
<textarea id="commentForm:j_id362:commentInputTextArea"
style="visibility: hidden; display: none;"
name="commentForm:j_id362:commentInputTextArea"/>
<span id="commentForm:j_id362:commentInputTextArea_container"
class="mceEditor richfacesSimpleSkin">
<table class="mceLayout" cellspacing="0" cellpadding="0"
style="width: 811px; height: 106px;">
<tbody>
<tr>
<td>
<div class="mceIframeContainer">
<iframe
id="commentForm:j_id362:commentInputTextArea_ifr" frameborder="0"
src="javascript:""" style="width: 100%; height: 100px;">
<html>
<head>
<!-- Loading some CSS -->
</head>
<body id="tinymce" class="mceContentBody"
spellcheck="false" dir="ltr">
<p>
<br mce_bogus="1"/>
</p>
</body>
</html>
</iframe>
</div>
</td>
</tr>
<tr class="last">
<td class="mceToolbar mceLast" align="center">
</td>
</tr>
</tbody>
</table>
</span>
<!-- loading some JS -->
</div>
================

When I try to clear/sendKeys to 'commentInput' is (correctly) says it
can't find an input/textarea and when I use 'commentInputTextArea' it
throws:
================
org.openqa.selenium.ElementNotVisibleException: Element is not
visible, and so cannot be interacted with
System info: os.name: 'Linux', os.arch: 'amd64', os.version:
'2.6.27.21-170.2.56.fc10.x86_64', java.version: '1.6.0_13'
Driver info: driver.version: firefox
at org.openqa.selenium.firefox.Response.ifNecessaryThrow
(Response.java:94)
at org.openqa.selenium.firefox.FirefoxDriver.sendMessage
(FirefoxDriver.java:284)
at org.openqa.selenium.firefox.FirefoxWebElement.sendMessage
(FirefoxWebElement.java:270)
at org.openqa.selenium.firefox.FirefoxWebElement.sendKeys
(FirefoxWebElement.java:78)
at com.sunshock.portal.test.ui.api.WebComponent.set(WebComponent.java:
442)
at com.sunshock.portal.test.ui.api.WebComponent.set(WebComponent.java:
169)
================

Any ideas?

eXe

unread,
May 20, 2009, 3:46:33 PM5/20/09
to webdriver
No idea how to write any text into a TinyMCE box with WebDriver?
Maybe some workaround with some JS?

Brian Fields

unread,
May 20, 2009, 4:03:46 PM5/20/09
to webd...@googlegroups.com
I got this to work, actually. this.getDriver is simply a call to
WebDriver, replace as your needs fit.

String tinyMCEFrame = "TextEntryFrameName" // Replace as necessary
this.getDriver().switchTo().frame(tinyMCEFrame);
String entryText = "Testing entry\r\n";
this.getDriver().findElement(By.id("tinymce")).sendKeys(entryText);
//Replace ID as necessary
this.getDriver().switchTo().window(this.getDriver().getWindowHandle());
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
this.getDriver().findElement(By.partialLinkText("Done")).click();
//Replace submit as necessary

Brian Fields
Senior Developer
(760) 602-8300 x707
eDirectPublishing, Inc.
http://www.edirectpublishing.com

eXe

unread,
May 21, 2009, 6:15:37 AM5/21/09
to webdriver
Awesome! It works!

Didn't event know one could switch to a frame :-)

On May 20, 10:03 pm, Brian Fields <br...@edirectpublishing.com> wrote:
> I got this to work, actually.  this.getDriver is simply a call to
> WebDriver, replace as your needs fit.
>
> String tinyMCEFrame = "TextEntryFrameName" // Replace as necessary
> this.getDriver().switchTo().frame(tinyMCEFrame);
> String entryText = "Testing entry\r\n";
> this.getDriver().findElement(By.id("tinymce")).sendKeys(entryText);
> //Replace ID as necessary
> this.getDriver().switchTo().window(this.getDriver().getWindowHandle());
> try {
>   Thread.sleep(3000);} catch (InterruptedException e) {
>
>   e.printStackTrace();}
>
> this.getDriver().findElement(By.partialLinkText("Done")).click();
> //Replace submit as necessary
>
> Brian Fields
> Senior Developer
> (760) 602-8300 x707
> eDirectPublishing, Inc.http://www.edirectpublishing.com

Brian Fields

unread,
Jul 25, 2012, 11:06:45 AM7/25/12
to webd...@googlegroups.com
OK - So this worked for me too back in 2009, however, recently it hasn't
been. I'm running Selenium 2.24.1 with Firefox 13.0.1 on Linux, and
what happens is that I get a bunch of empty lines with carriage returns,
but other keys do not seem to get sent.

Brian Fields
Senior Developer
(760) 602-8300 x707
eDirectPublishing, Inc.
http://www.edirectpublishing.com

> --~--~---------~--~----~------------~-------~--~----~
> You received this message because you are subscribed to the Google Groups "webdriver" group.
> To post to this group, send email to webd...@googlegroups.com
> To unsubscribe from this group, send email to webdriver+...@googlegroups.com
> For more options, visit this group at http://groups.google.com/group/webdriver?hl=en
> -~----------~----~----~----~------~----~------~--~---
>

Mark Collin

unread,
Jul 25, 2012, 11:24:06 AM7/25/12
to webd...@googlegroups.com

I started writing a TinyMCE handler a while back but never got round to finishing it, you never know some of what I have done may be useful:

 

https://github.com/Ardesco/Ebselen/blob/master/ebselen-core/src/main/java/com/lazerycode/ebselen/customhandlers/TinyMCEHandler.java

 

Short Link

--

You received this message because you are subscribed to the Google Groups "webdriver" group.

To post to this group, send email to webd...@googlegroups.com.

To unsubscribe from this group, send email to webdriver+...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/webdriver?hl=en.

 

Brian Fields

unread,
Jul 25, 2012, 11:47:27 AM7/25/12
to webd...@googlegroups.com
I think I'm pretty much doing what you are - Not sure what replaceHTMLSource() is supposed to do.

Here's essentially what I'm attempting to do:

                                String targetId = targetField.getAttribute("id");
                                if (!targetId.isEmpty()) {
                                    targetId += "_ifr";
                                }

                                this.getCurrentDriver().switchTo().frame(targetId);
                                this.sleep();
                                WebElement tinyMCE = this.getPoster().findElement(this.getCurrentDriver(), By.id("tinymce"));

                                if (tinyMCE != null) {
                                    this.getLogger().debug("Filling tinyMCE frame id: " + tinyMCE.getAttribute("id"));

                                    tinyMCE.click();
                                    this.sendBlockText(tinyMCE, field.getValue());
                                    this.sleep();
                                }

                                this.setFrame(); //Returns to current frame

And here's sendBlockText():

    public void sendBlockText(WebElement element, String value) {
        // element.sendKeys(value);
        String[] lines = value.split("[\r?\n]+");

        for (String line : lines) {
            element.sendKeys(line + "\r\n");

        }
    }

Brian Fields
Senior Developer
(760) 602-8300 x707
eDirectPublishing, Inc.
http://www.edirectpublishing.com

Tarun Kumar

unread,
Jul 26, 2012, 1:12:30 AM7/26/12
to webd...@googlegroups.com
This works for me -

public void typeIntoRichTextArea(WebElement frameLocator, String value) {
        driver.switchTo().frame((frameLocator));
        
        // Js execution is the only solution which works in FF 11

        ((JavascriptExecutor) driver).executeScript("document.body.innerHTML='" + value + "'");
        driver.switchTo().defaultContent();
}


Pass on your frame locator and value to be set to this method.

~tarun

Mark Collin

unread,
Jul 26, 2012, 3:44:57 AM7/26/12
to webd...@googlegroups.com

Depending on how TinyMCE is configured there can be an HTML source button that pops up a window showing the HTML source of the text that has been put in the TinyMCE text area.  That function was supposed to interact with it.

Reply all
Reply to author
Forward
0 new messages