Answer
Testing Rich Text Editors (TinyMCE / CKEditor) in Selenium
Rich text editors render inside an <iframe> with a contenteditable body. Standard sendKeys on the visible area does not work.
TinyMCE — Type Text via iframe
Java
// Switch to TinyMCE''s iframe
driver.switchTo().frame(driver.findElement(By.cssSelector("#tinymce_ifr")));
// Click the body and type
WebElement body = driver.findElement(By.cssSelector("body#tinymce"));
body.click();
body.sendKeys("Hello from Selenium! This is a test article.");
// Switch back to main page
driver.switchTo().defaultContent();
TinyMCE — Set Content via JavaScript API
Java
// Faster and more reliable — use TinyMCE''s own API
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(
"tinymce.get(0).setContent('<p><b>Bold Text</b> and <i>Italic Text</i></p>')"
);
TinyMCE — Get Content
Java
String editorContent = (String) js.executeScript(
"return tinymce.get(0).getContent();"
);
Assert.assertTrue(editorContent.contains("Bold Text"),
"Expected text not found in editor");
CKEditor — Set Content
Java
// CKEditor 4
js.executeScript(
"CKEDITOR.instances['editor1'].setData('<p>Test content</p>')"
);
// CKEditor 5
js.executeScript(
"document.querySelector('.ck-editor__editable').ckeditorInstance" +
".setData('<p>Test content</p>')"
);
TinyMCE — Click Toolbar Buttons
Java
// Switch back to main page first
driver.switchTo().defaultContent();
// Click Bold button in toolbar
driver.findElement(By.cssSelector(".tox-tbtn[title='Bold']")).click();
// Now switch back to editor iframe and type bold text
driver.switchTo().frame(driver.findElement(By.cssSelector("#tinymce_ifr")));
driver.findElement(By.cssSelector("body#tinymce")).sendKeys("This will be bold");
driver.switchTo().defaultContent();
Quill.js Editor
Java
// Quill uses a div, not iframe
WebElement editor = driver.findElement(By.cssSelector(".ql-editor"));
editor.click();
editor.sendKeys("Test content for Quill editor");
// Or via JS
js.executeScript(
"document.querySelector('.ql-editor').innerHTML = '<p>Test content</p>'"
);
Verify Content After Submission
Java
// After saving/submitting the article
driver.findElement(By.id("saveBtn")).click();
// Verify rendered output on view page
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
WebElement articleBody = wait.until(
ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".article-content"))
);
Assert.assertTrue(articleBody.getText().contains("Bold Text"));
Assert.assertTrue(articleBody.findElement(By.tagName("b")).isDisplayed());
