Written by:
9/10/2009 6:00 AM 

In a previous post I discussed how to get the inner HTML content of a specific element within the page. It was not a function built-in to Selenium Remote Control (RC). Instead the technique used Selenium RC’s GetEval() function to execute Javascript functions within the page under test.

We can use the same approach to workaround other roadblocks or difficult testing scenarios. A good use case is the typical rich text editor (RTE) that is ubiquitous on web forms. Within DotNetNuke (DNN), FCKeditor is the primary RTE since it is shipped with DNN.

RTE’s, unlike text boxes and textareas are not standard HTML form input controls – nor are they even single controls. Really, they’re a fiction. The ‘single’ RTE you see on your page is usually a hidden textarea (or two) and an IFRAME pointing to a different page entirely, which may have additional controls. All of this is tied together using Javascript and CSS. In other words, it’s complicated – very complicated.

Because of the nature of RTE’s, you cannot simply type your text into the control. First, you need to find the actual ID of the control. Since there are multiple components, finding the ‘editor’ component takes some sniffing around. Once you find it, using Selenium to “type” text into the editor will either throw an error or simply won’t work.

Luckily most RTE’s provide an API that developers can use to interact with the editor. The API will differ based on the editor involved, but most will provide a function that returns the editor as well as methods that allow you to get and set text or HTML within the editor.

Taking a look at the API docs for FCKeditor, we find the following functions:

• FCKeditorAPI.GetInstance('InstanceName')
• Focus()
• SetHTML(html)
• GetHTML(html)

So, the first step is finding the Instance Name of the editor. This takes some sleuthing in the HTML source to find. However, if you use Firebug or another tool to Inspect the editor area of FCKeditor, you can find an IFRAME with ___Frame in its ID whose src attribute passes the InstanceName of the editor. Examining the InstanceName, you'll find it is the Client ID you set for the control with "edit" appended to it. So, my control had a server ID of "Bio". When rendered, the client ID of the control becomes something like this: "dnn_ctr370_Resume_ctl00_ctl00_ctl00_Bio" The editor ID, then is  "dnn_ctr370_Resume_ctl00_ctl00_ctl00_Bioedit". When typing in your InstanceName, if you are getting object undefined errors, check your capitalization. Javascript is case-sensitive.

Now that we've got the InstanceName we can begin work. In my Selenium RC test, written in Visual Basic (VB), I add this:

I store my Javascript in the sEval variable. The script first uses the InstanceName, passing it to the FCKeditorAPI object's GetInstance function. It stores that instance in a variable. It then calls the SetHTML function on that instance to 'type' our content into the editor. In the second of the function, I simply call GetEval() on the Selenium object and I'm done.

Trackback Print

Tags:

Categories:

Location: Blogs DNNDev_Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel