When writing automated web tests, I find it common to come across WYSIWYG (What-you-see-is-what-you-get) editors, and because these usually are html elements embedded in an iframe, it’s not usually easy to automate entering text into these (nowhere near as easy as a text field or text area say).
I’ve found there are two ways to enter text into a WYSIWYG editor using Watir-WebDriver:
- locate the iFrame, and use .send_keys to enter text
Setting text on two types of WYSIWIG editors
Here I will show you how easy it is to set these two popular WYSIWYG editors using the two methods I mentioned.
require 'watir-webdriver' b = Watir::Browser.new :firefox b.goto 'http://ckeditor.com/demo' b.execute_script("CKEDITOR.instances['editor1'].setData('hello world');") b.frame(:title => 'Rich text editor, editor1, press ALT 0 for help.').send_keys 'hello world again'
require 'watir-webdriver' b = Watir::Browser.new b.goto 'http://tinymce.moxiecode.com/tryit/full.php' b.execute_script("tinyMCE.get('content').execCommand('mceSetContent',false, 'hello world' );") b.frame(:id => "content_ifr").send_keys 'hello world again'