What is a WYSIWYG HTML editor?
A WYSIWYG HTML editor provides an editing interface which resembles how the page will be displayed in a web browser. Because using a WYSIWYG editor may not require any HTML knowledge, they are often easier for an average computer user to get started with. (Wikipedia)
WYSIWYG HTML editors (an acronym for "What You See Is What You Get") are widely used in web applications as embedded text editor nowadays. The most common way of using those editors is framed editing, which uses
<iframe> instead of
<textarea> and displays the content inside the
<body> element, however, it makes the UI automation process a little bit different.
- How to automate these editors using Selenium WebDriver's native Ruby API
- WYSIWYG HTML editors' comparison
- Automate using native Selenium WebDriver API
WYSIWYG HTML editors' comparison
|License||GPL, LGPL and MPL||LGPL||MIT or GPL v2|
|Size (Distribution package)||1022 kB||291.3 kB||20.4 kB|
|Size (Core .js file)||461.2 kB||282.7 kB||12.5 kB|
CKEditor 4.3.2 Standard
Automate using native Selenium WebDriver API
Click toolbar buttons
WYSIWYG editors normally provide native methods to set raw HTML content directly through API, automating the toolbar doesn't seem to be really necessary. If it's needed to be done for some reason, it shouldn't be much of a problem, because toolbar elements are just ordinary web elements, the automating process is fairly straight-forward without any frame switching required.
- Find the elements by appropriate locators according to the HTML markup.
- Manipulate those elements see if they work or not.
Markup for CKEditor's toolbar "Numbered List" button: Show
Markup for TinyMCE's toolbar "Numbered List" button: Show
Selenium WebDriver Ruby code to click the buttons:
Switch into input iframe
Although CKEditor and TinyMCE are initialized with
<textarea> tag, the editor body is actually constructed within an
<iframe>, which is still technically a web element, but all elements inside can only be accessed by WebDriver after switching into the iframe. As seen in the HTML mark up below, CKEditor's iframe can be identified using
class, while TinyMCE's can be located by
id directly. Equivalent CSS Selectors and XPaths also exist if needed.
Markup for CKEditor's body: Show
Markup for TinyMCE's body: Show
Locate the iframes
Switch out (if necessary)
If the WebDriver instance is already inside any kind of frames, switch out the current frame to default content is required. For example, after switching into CKEditor's iframe and sending some keys, the only way to get into TinyMCE's input area is to switch back to default content first, then locate TinyMCE's iframe and switch into frame again.
After switching into the editor's
<iframe>, the text can be sent to the
<body> directly, which is possible using Selenium's native
<p> tag. As a result, sending
<h1>Heading</h1> won't show up as real WYSIWYG heading, but in plain text. Furthermore, this approach has been reported behaving incorrectly on Firefox, which might be better to avoid if possible.
<h1>Heading</h1> will actually show up as heading one.
Clear all input
A quote from Selenium Ruby's API documentation on clear() method:
If this element is a text entry element, this will clear the value. Has no effect on other elements.
clear() method is stated as not available for non-text entry elements, it seems it can actually clear the input iframe without any exceptions.
clear(), an alternative is to use Selenium's ActionBuilder to construct an action chain to mimic keyboard shortcut pressing.
Ctrl + A will select all, then push
Backspace to clear.
driver.execute_script() to call editors' built-in JS functions.
Both editors have built-in methods to set the content of entire input area. CKEditor's API provides a method called
setData(), which replaces editor data with raw input HTML data. Similar method
setContent() also exists in TinyMCE editor's API.
Instead of setting the entire content, it is also possible to insert some content to the editors. CKEditor's has a method called
insertHTML(), which inserts content at currently selected position, in TinyMCE, it's called