Knowledge Base Article

Home Page > Knowledge Base > Rapise

Home Page > Knowledge Base > Rapise > Rapise Web

Article How to automate the testing of TinyMCE Rich Text Boxes using Rapise

by Adam S on Wednesday, December 16, 2015

When you have a rich text box in a web application, the process for recording a test and playing it back will be different to a standard HTML plain text box. When you are using the popular TinyMCE rich text box you have more options to automate it by using its special client-side JavaScript API.


Our knowledge base article on automating rich HTML text boxes in general -  suggests using mouse movements and clicks and SendKeys to access and input text into rich text boxes that use iframe. This is a good general purpose solution for most cases.

Automating TinyMCE

However in the case of tinyMCE, which several of our customers use, it can be done in a more reliable and robust way -- using tinyMCE's API.

Here's an example:

var browserLib = {
    "Internet Explorer HTML": 'iexplore.exe',
    "Firefox HTML": 'firefox.exe',
    "Chrome HTML": 'chrome.exe'

Navigator.Find('/html', null, 'OBA Questionnaire', {executable:browserLib[g_browserLibrary]});
Navigator.ExecJS("window.tinyMCE.editors[1].setContent('<h1>Rich text</h1> Plain text');");

var gotIt = Navigator.ExecJS("window.tinyMCE.editors[2].getContent();");

The key to this solution is:
  • Use the g_browserLibrary Rapise variable to get the browser executable name (I only tested this with IE).
  • The Find() command only needs to be executed once for each open page...
  • ... after which you can work with multiple TinyMCE editor boxes
  • You can set formatted text using HTML if you want to, or plain text without formatting
  • It's easy to get the current text too!
Note: The example above uses the syntax of ExecJS used above is designed for Internet Explorer (IE). So there is a slightly different syntax per browser in Rapise (to be standardized in Rapise v4.1):
Internet Explorer
var gotIt = Navigator.ExecJS("window.tinyMCE.editors[2].getContent();");

This will not produce result in Firefox or Chrome. The result will be "undefined". To get the result in Chrome and Firefox the syntax must be:

Firefox or Chrome
var gotIt = Navigator.ExecJS("execResult = window.tinyMCE.editors[2].getContent();");

If using the new Rapise 4.x Selenium browser profiles:

Selenium WebDriver
var gotIt = Navigator.ExecJS("return window.tinyMCE.editors[2].getContent();");

Thanks to Erik Sunguryan who suggested this method and generously allowed us to publish it to help other customers.

Article Info
Last Updated: 12/16/2015
Article ID: KB182
# Views: 542
Powered by KronoDesk v1.1.0.15 | © Copyright Inflectra Corporation 2011-2016 | Licensed to Inflectra Corporation.