How to fill data in CKeditor. getting WebElement not found exception

Web Testing
1

Add a Note

Rich Text Editor, thePg:theForm:Body
2

Have you reviewed the HTML to ensure that the pathway, //bodyonly returns your one object? To do this, hit the F12 key and then click on ‘Open DevTools’. This should open part of your browser to review the HTML. Click on the top left icon in this section that allows you to review the attributes of specific objects (or use CTRL + SHIFT + C and click on the object). Click into the HTML area and then use CTRL + F to open the Find box. Copy and paste your pathway into the Find box. To the right of this box, do you see a 1 of 1? If you do, all’s good. If you don’t, you need to fix your pathway.

Now, maybe you can try:

WebUI.waitForElementVisible(findTestObject('Object Repository/JS-SalesForce/Page_New Intake  Salesforce/Create_Intake_Citizenship/iframe_CitizenshipNote'), 10)

WebUI.switchToFrame(findTestObject('Object Repository/JS-SalesForce/Page_New Intake  Salesforce/Create_Intake_Citizenship/iframe_CitizenshipNote'),20)

What this is trying is to ensure your <iframe> is on the page before you go searching for it and the contents on it.

4

This code looks strange.

The setText can send a text into a HTML <input type="text"> element, <textarea> element or a few other limited types of HTML elements. A <body> element will never receive a text sent by setText. This code will never work.

5

I started 14 days trial of CKeditor, opened it on my desktop. In a editor pane, I added a text “Foo bar buz”. Then I opend the “Dev Tool” to see how the DOM of the viewport looks like. Please find the following screenshot.

スクリーンショット 2025-11-25 8.52.14
スクリーンショット 2025-11-25 8.52.143104×1974 1.31 MB

Well, the DOM is far more complicated than what @rjadhav would expect.

I think that @rjadhave should abondon the idea of automating actions on CKeditor using Selenium-based tools including Katalon Studio.

Instead, CKeditor provides a JavaScript API:

If @rjadhav desperately needs to automate something on CKeditor, he/she should follow their published API.

6

I asked a question to the CKeditor Help:

Is it possible for me to automate putting texts in KEditor using Selenium?

image
image1357×792 114 KB

They answered as follows:

I’m sorry, but the knowledge sources do not contain information about automating text input in CKEditor using Selenium. The documentation covers CKEditor integration with HTML forms, clipboard handling, and server-side automation via the Server-side Editor API, but does not mention Selenium or browser automation tools for this purpose. If you need automation, you might want to explore the Server-side Editor API, which allows manipulation of document content programmatically from the server side, but this is different from browser automation with Selenium Server-side editor API.

I looked at

This document presents a lot of sample cases working with the text content in CKeditor.

7

@rjadhav the toolbar text in your post (“Rich Text Editor, thePg:theForm:BodyEditor toolbars, Undo, Keyboard shortcut Ctrl+Z …”) is the aria label of the classic ckeditor 4 that salesforce visualforce ships, so you do not need to give up on it. two things that work for me on that editor.

first, setText is the wrong keyword for a contenteditable body. after switchToFrame, click the body and use sendKeys instead:

WebUI.switchToFrame(findTestObject('.../iframe_CitizenshipNote'), 20)
TestObject body = new TestObject('body').addProperty('xpath', ConditionType.EQUALS, '//body[@contenteditable="true"]')
WebUI.waitForElementPresent(body, 10)
WebUI.click(body)
WebUI.sendKeys(body, 'This is an automated note.')
WebUI.switchToDefaultContent()

if that is still flaky, skip the iframe completely and talk to the editor api from the parent page, which is what ckeditor itself recommends for automation:

WebUI.switchToDefaultContent()
WebUI.executeJavaScript("CKEDITOR.instances['thePg:theForm:BodyEditor'].setData(arguments[0]);", ['This is an automated note.'])

the instance name is the id of the hidden textarea ckeditor replaced, you can confirm it in devtools with Object.keys(CKEDITOR.instances). setData also updates the underlying textarea so the value is submitted with the form.