How can we help?

Handle embedded text editors

You are here:

Embedded text editors like CKEditor, makes testing challanging. Mostly because it is difficult to record actions in such complex pages, especially that they use random classes for their dinamic elements. Fortuntaly, all such editors provides a JavaScript API for interacting with them. This means you can add a custom JavaScript function step in order to interact with them.

Please check the following example to change the value for a CKEditor:

function trudonJSStep(element, callbacks, builtinVars, customVars)
{
  // variables definition
  var editorInstanceName = customVars.editorInstanceName;
  var setEditorValue = customVars.setEditorValue;
  
  if (!window.CKEDITOR || !window.CKEDITOR.instances[editorInstanceName]) {
    callbacks.fail("CKEDITOR not found");
    return callbacks.done();
  }

  window.CKEDITOR.instances[editorInstanceName].setData(setEditorValue);

  callbacks.pass("Changed value to: " + setEditorValue);
  callbacks.done();
}

And the following example to retrieve and save the editor value in a new variable:

function trudonJSStep(element, callbacks, builtinVars, customVars)
{
  // variables definition
  var editorInstanceName = customVars.editorInstanceName;
  var editorValue = undefined;
  
  if (!window.CKEDITOR || !window.CKEDITOR.instances[editorInstanceName]) {
    callbacks.fail("CKEDITOR not found");
    return callbacks.done();
  }

  editorValue = window.CKEDITOR.instances[editorInstanceName].getData();

  customVars.editorValue = editorValue;
  callbacks.pass("Retrivied value from CKEDITOR: ", editorValue);
  callbacks.done();
}

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?
Previous Extract data from AJAX requests
Next SMS testing