Selenium Testing page with iframe/GWT RichTextArea

Recently we've been using Selenium to do integration/acceptance testing of a new web-application.

The web-application uses Google Web Toolkit (GWT) for the view layer. One of the key components is a GWT RichTextArea for user input. GWT RichTextAreas are implemented in Javascript using an iframe with designMode=On, to allow user input.

This works fine, however when we came to testing we couldn't seem to get Selenium to input text into the RichTextArea (iframe) component.

A number of websites (for example http://www.hietavirta.net/blog/item/2008/08/gwt-15-tree-and-richtextarea-testing-with-selenium) suggested something like "select the right frame with Selenium's selectFrame, type text to //html/body and finally select the top frame again."

However, this didn't work for us. We tried a combination of options for selecting the frame and then trying to select the body (or other elements) within the iframe, but all to no avail.

In the end, we didn't need to select the iframe/richtextarea separately first (and, indeed, this selecting didn't seem to work, even though the GWT "ensureDebugId" did correctly attach the id to the iframe element).

The final solution to get selenium to type into the RichTextArea was to include in our tests the code:

selenium.type("//*[@contentEditable='true'","This text is to be typed");

The first argument of the selenium.type command is a locator that finds the correct iframe (RichTextArea) element, based on the fact that GWT creates this element with a parameter indicating the content is editable. The second command is the text you want typed in your test.

Seems so simple here, but getting that to work took hours! We tried a bunch of much more "obvious" options to locate that element (including a bunch that other bloggers said worked), but in our case this was the only thing that we could find that did the job!!

So... now ya know what worked for us, too!