How to display the value in the text field in CK Editor using Selenium?

| | 1 min read

Suppose you have a site to test which has the following functionality. There is a text field and an editor. When we enter text on the text field, immediately it should be displayed on the editor. To be more clear, after entering the text on the field then focusing out from it, the values should be displayed in the CK editor. And our intention is to automate it using Selenium. Lets check how this can be automated.

When I tested this functionality on Drupal site, I came up with the following issue.

The given text is not displaying on the CK editor while playing the recorded script. But when tested manually, it is working correctly.

The following commands helped me to resolve this issue.

 
Command: 	type
Target:		id=edit-message
Value:		Test Message
where edit-message is the id of text field which I find through firebug.
Command:		runScript
Target:		jQuery('#edit-message').trigger('blur'); 
 

Please refer the image attached.

editor2.jpg

The first one type the message 'Test Message' in the text field with id edit-message. The second command run-script will help us to focus out the text field. Thus the value will reflect in the CK editor. Automating of these types of functionalities saves a lot of testing time. The only challenge here is testers should have some knowledge of jQuery.