Editing objects inside iframe


#1

Hi, Good day everyone!

I’m having a trouble editing a rich text field because it is inside an iframe. I already used the switch to frame function and it seems to switch to the frame but when I tried to edit the object inside, the test will fail. I also tried to use the spy web to locate the right xpath to use but no help at all. I hope somebody can help me.


This is the iframe I’m targeting and the highlighted text is the one I’m trying to change.


This is the object code for iframe and the rich text.

And this is the error.

2019-09-11 11:46:37.482 ERROR c.k.k.core.keyword.internal.KeywordMain - :x: Unable to set text ‘This is a automated functional test.’ of object ‘bodyRichText’ (Preformatted textRoot cause: com.kms.katalon.core.exception.StepFailedException: Unable to set text ‘This is a automated functional test.’ of object ‘bodyRichText’
at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:26)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.setText(SetTextKeyword.groovy:66)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.execute(SetTextKeyword.groovy:37)
at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:56)
at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.setText(WebUiBuiltInKeywords.groovy:950)
at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$setText$2.call(Unknown Source)
at Ability_to_edit_body_richtext_field.run(Ability_to_edit_body_richtext_field:53)
at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:337)
at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:328)
at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:307)
at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:299)
at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:233)
at com.kms.katalon.core.main.TestSuiteExecutor.accessTestCaseMainPhase(TestSuiteExecutor.java:169)
at com.kms.katalon.core.main.TestSuiteExecutor.accessTestSuiteMainPhase(TestSuiteExecutor.java:142)
at com.kms.katalon.core.main.TestSuiteExecutor.execute(TestSuiteExecutor.java:91)
at com.kms.katalon.core.main.TestCaseMain.startTestSuite(TestCaseMain.java:157)
at com.kms.katalon.core.main.TestCaseMain$startTestSuite$0.call(Unknown Source)
at TempTestSuite1568173470595.run(TempTestSuite1568173470595.groovy:35)
Caused by: com.kms.katalon.core.webui.exception.WebElementNotFoundException: Web element with id: ‘bodyRichText’ located by ‘By.xpath: (//iframe[@id=“react-tinymce-1_ifr”]//html//body[@id=“tinymce”]//p)[1]’ not found
at com.kms.katalon.core.webui.common.WebUiCommonHelper.findWebElement(WebUiCommonHelper.java:1097)
at com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword.findWebElement(WebUIAbstractKeyword.groovy:27)
at com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword.findWebElement(WebUIAbstractKeyword.groovy:26)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword$_setText_closure1.doCall(SetTextKeyword.groovy:51)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword$_setText_closure1.call(SetTextKeyword.groovy)
at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.setText(SetTextKeyword.groovy:66)
at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.execute(SetTextKeyword.groovy:37)
at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:56)
at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.setText(WebUiBuiltInKeywords.groovy:950)
at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$setText$2.call(Unknown Source)
at Script1567063945966.run(Script1567063945966.groovy:53)
… 13 more
)

Thanks,


#3

try to figure out does your new element exist on the web page by pressing f12 in your browser

https://stackoverflow.com/questions/22571267/how-to-verify-an-xpath-expression-in-chrome-developers-tool-or-firefoxs-firebug/22573161#22573161

by your error i can say that there are no element with such id


#4

Do you have the code that you use to switch to frame?

This part of the code is only adding property to testObject


#5

You haven’t shown how bodyRichText is defined, so I’m assuming it is an input element with that id.

String js = '''
  var iframe = document.querySelector("#react-tinymce-1_ifr");
  var doc = iframe.contentDocument || iframe.contentWindow.document;
  var bodyRichText = doc.querySelector("#bodyRichText");
  bodyRichText.value = "This is an automation test using JavaScript";
'''
WebUI.executeJavaScript(js, null)

I haven’t tested this so please let me know.


#7

Hi, thanks for the reply.

I’m using 2 chrome extension tools (ChroPath and XPath Helper). Both tools can locate the element I’m using. As you can see, (//body[@id=“tinymce”]//p)[1] is xpath I’m using to target the element. Per katalon log viewer, I successfully switch to the iframe but I can’t target anything inside the iframe.