Editing texts inside tinyMCE editor in an iFrame

[ThanhTo]

I agree that there are many moving parts here. However breadth-first exploration is rarely a bad thing in problem solving and thus laying out the possible directions (no matter how unlikely they seem) is beneficial. Timings and unlikely events are usually the cause of many problems after all.

That said, @saumil.sah, I’d like to strongly advise you dive into @Russ_Thomas’s way first. Since the API documentation already exposed the necessary commands that can be executed from Javascript, the best way is to just use them.

After that if things don’t work (or it works but it doesn’t abide the level of abstraction you want (executing javascript is kinda like voodoo) then you can explore other directions.

[Russ_Thomas]

@saumil.sah

Here’s a fully worked (and tested) Test Case using the demo website:

    WebUI.navigateToUrl("https://www.tiny.cloud/")
    
    WebUI.waitForPageLoad(10)
    
    TestObject tiny = makeTO("#tiny-react_24806645131568596486738_ifr")
    
    WebUI.waitForElementVisible(tiny,10)
    
    String js = '''
      var doc = document.querySelector("#tiny-react_24806645131568596486738_ifr").contentDocument;
      var p = doc.querySelector("#tinymce p:nth-child(2)");
      p.innerHTML = "<b>Hello, World!";
    '''
    
    WebUI.executeJavaScript(js, null)

The code for makeTO is available here:

https://docs.katalon.com/katalon-studio/docs/creation-of-test-object-in-object-repository-in-runtime.html

This proves:

1. You can test your tinyMCE instance object.
2. The iframe is not an issue.
3. It takes very little code (the JavaScript is the same as the code I pasted into the browser console in the previous example/screenshot).
4. YOU CAN DO THIS!

[Russ_Thomas]

That said, @saumil.sah, I’d like to strongly advise you dive into @Russ_Thomas’s way first. Since the API documentation already exposed the necessary commands that can be executed from Javascript, the best way is to just use them.

100% agree. Those CSS selectors are going to bite you soon.

@ThanhTo is referring to this:

There is an API documented at https://www.tiny.cloud/docs-3x/reference/TinyMCE3x@Command_identifiers/ (search for mceInsertContent ) which you can use from JavaScript to update the editor. You should use that to help position the cursor. If you don’t, you’ll need very specific and hence very fragile selectors to access the editor content.

[saumil.sah]

@Russ_Thomas, following your lead and doing the following:

1 Using TinyMCE editor as follows:

Below is the HTML code for the editor:

2. The script in Katalon is:

and the CustomKeywords created are being created as follows:

3. After executing the script, these are the errors that I get:

waitForElementVisible throws the following error below:

and executeJavaScript throws the following:

[Russ_Thomas]

That’s a lot to digest. First, let’s clean things up:

In your test case:

import static newiframepackage.newiframepackage.*

You might want to rename it to something like mycompany.utils since you may have more keywords in future which have nothing to do with iframes.

Then…

TestObject tiny = makeTO(your_xpath)

Now you don’t need @Keyword

Make those changes and let’s see how it goes. And from here, post your TC code and any errors (I already know the rest).

[Ibus]

@saumil.sah and kindly post code as formated code. pictures are awfull. thank you!

[saumil.sah]

Have done the changes:

(Also posting the code below:)

WebUI.switchToFrame(findTestObject(‘Object Repository/TC2_OR/Page_Edit Email Cloud TA Content Studio 2/iframe_New_Insert_Attribute’), 10)
WebUI.delay(10)
WebUI.scrollToElement(findTestObject(‘Object Repository/TC2_OR/Page_Edit Email Cloud TA Content Studio 2/td_PleaseExperience’), 5)
WebUI.waitForPageLoad(10)
TestObject tiny = makeTO(“#__editor5-textarea_ifr”)
WebUI.delay(10)
WebUI.waitForElementVisible(tiny,10)

String js = ‘’’
var doc = document.querySelector(“#__editor5-textarea_ifr”).contentDocument;
var p = doc.querySelector(“.flexible.mce-item-table .mce-item-table tr:nth-child(4) td”);
p.innerHTML = “Hello world!!”;
‘’’

WebUI.executeJavaScript(js, null)

The errors are:

[saumil.sah]

My bad. Will take care of it next time

[saumil.sah]

Had already tried increasing the delay in between the steps (went as high as 20 sec) initially.

[Russ_Thomas]

@saumil.sah

Please pay attention:

1. You modified makeTO to use xpath selectors. That’s okay.
2. You are calling makeTo with a CSS selector. Not okay.

Repeat:

Then…

TestObject tiny = makeTO(your_xpath)

your_xpath means your xpath.

Once again, try to keep the moving targets to a minimum. It takes a while to dig through all your stuff looking for anything that could be wrong. I was just about to give up when I noticed that.

Reminder: the code works as I posted it. If it goes wrong with your modifications, you need to spend time staring at it, line by line, before posting yet-another-error.

You can do this!

[marketing.liamsmith]

Hey

Check this hope this will help you

WebUI.navigateToUrl(“https://www.tiny.cloud/”)

WebUI.waitForPageLoad(10)

TestObject tiny = makeTO("#tiny-react_24806645131568596486738_ifr")

WebUI.waitForElementVisible(tiny,10)

String js = '''
  var doc = document.querySelector("#tiny-react_24806645131568596486738_ifr").contentDocument;
  var p = doc.querySelector("#tinymce p:nth-child(2)");
  p.innerHTML = "<b>Hello, World!";
'''

WebUI.executeJavaScript(js, null)

Also, If you want to copy/paste the text to the editor you need to install the plugins. I am using pasteitcleaned for this thing. It handles copy/paste from Word, Excel, PowerPoint, PDF, Websites, Paint, etc. You should try it once.