</>

Technology

Scenario-Based

Difficulty

Intermediate

Interview Question

How do you test a rich text editor like TinyMCE or CKEditor in Selenium?

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());

Follow AutomateQA

Related Topics