Using Selenium to Test ColdFusion Richtext

In the course of trying to get ready to release the code for Yet Another ColdFusion CMS, or Yacc, I was trying to test working with the CMS. In order to do that, I needed to get Selenium to work with it. It worked fine until I tried to edit content. I’m using cftextarea richtext=true to provide CMS editing capabilities. However, when I went to record the test in Selenium, it couldn’t handle working with FCKeditor which provides the richtext capabilities for ColdFusion. After a few hours of trial and error, I was able to test them.

Here’s how you do it:

First you have to do it via Selenium-RC, the Selenium Firefox IDE doesn’t seem to be able to do it. You can launch pretty easily via ANT:

<!–
Prerequsites
for
selenium–>    

<taskdef
resource=“selenium-ant.properties”>

    <classpath>

        <pathelement
location=“${selenium.jar}”/>

    </classpath>

</taskdef>

<target
name=“template.test.selenium”>

    <echo
message=“Running Selenium Tests.”
/>

            

    <selenese

        suite=“${template.test.selenium.suite}”

        browser=“*pifirefox”

        results=“${log.dir}templateuitestresults.html”

        haltOnFailure=“true”

        timeoutInSeconds=“240”

        startURL=“${host.url}”

     />

                

</target>

Where:

 

Now you’re launching your Selenium tests automatically in ANT, but you have to write your tests to actually interact with the FCKEditor. By default Selenium runs its tests as soon as the page loads. But in order to test the FCKEditor, you have to wait for it to exist. Here’s the Selenese to do that:

<tr>

    <td>waitForCondition</td>

    <td>typeof(window.ColdFusion) != ‘undefined’</td>

    <td>5000</td>

</tr>

<tr>

    <td>waitForCondition</td>

    <td>typeof(window.ColdFusion.RichText) != ‘undefined’</td>

    <td>5000</td>

</tr>

<tr>

    <td>waitForCondition</td>

    <td>typeof(window.FCKeditorAPI) != ‘undefined’</td>

    <td>5000</td>

</tr>        

<tr>

    <td>waitForCondition</td>

    <td>typeof(window.ColdFusion.RichText.getEditorObject(‘content’))
!= ‘undefined’</td>

    <td>5000</td>

</tr>            

<tr>

    <td>storeEval</td>

    <td> selenium.browserbot.getCurrentWindow().ColdFusion.RichText.
getEditorObject(‘content’).SetHTML(‘&lt;div
id=”testSection”&gt;
&lt;h2&gt;Welcome&lt;/h2&gt;
&lt;p&gt;Test page added.&lt;/p&gt; &lt;/div&gt;‘) </td>

    <td></td>

</tr>

<tr>

    <td>waitForElementPresent</td>

    <td>id=testSection</td>

    <td></td>

</tr>

 

Assuming that “content” is the name of your cftextarea, this is how you do it. You test for the “Coldfusion” object exists, then the “Coldfusion.RichText”, then the “FCKeditorAPI” and finally the actual richtext area. Once everything exists, you have to set the HTML of the FCKeditor. There is no input element to type into, so you have to use the FCKEditor setHTML method. To do that you have to use a storeEval command, and then you wait for the typed element you added to appear.

Hopefully this saves a few hours of work for someone else at some point.