Wednesday, October 7, 2009

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!

6 comments:

Purpose said...

Thx, wish I had seen your post earlier!
I went the same way, selenium webDriver, loop thru iframes, etc. Nothing worked other than this simple fix.

iggy said...

Shouldn't the xpath be closed?

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

--
Kind regards,
Ignat Alexeyenko.

Glennn said...

Yes - thanks iggy. I think you're right. My typo!

Unknown said...

It is working fine for single text area. But not working, if there is multiple text areas present. So could u plz help me

jaya gupta said...

Hi,

The above code didn't work for me as I didn't have the property content Editable in my html. I used the following to type in iFrame:

selectFrame("Name/ID of the frame ");
type("//body"," how are you? this will print in next line");
selectWindow("null");

Thanks,
Jaya.

Nikolay said...

You've found the way to set value. But how to get value? (The iframe does not have any 'id').