Unsure how to get this to work within an iframe

Product Forums Katalon Studio
1

Hi there,
I use the following within Katalon Studio to Hide/Show certain elements. These elements also exist within iframes, but I am unsure how to get this to work within the Iframe. Any suggestions?

WebUI.executeJavaScript('$(\'<style type="text/css">select[style*="display: none"] {display:block !important;} select + div.fastcombo {display:none !important;}</style>\').appendTo(\'html > head\');', 
    null)
2

Firstly, I have strong feelings about modifying the AUT through test code: http://forum.katalon.com/discussion/7806/tip-do-not-change-the-aut-through-test-code

That said, it would be easier to manage your JavaScript if you separate it out as a triple-quoted string…

'''
  Like this;
'''

That’s THREE SINGLE QUOTES. You can then do individual lines of JavaScript easily and make your code more readable:

String js = '''
  var x = 1;
  x = x * 2;
'''
WebUI.executeJavaScript(js, ...)

Accessing an iframe requires something like this:

'''
var iframe = document.getElementById("my_iframe");
var iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.querySelector("your selector here");
'''

However, it appears you are using jQuery, in which case you can do something like this instead:

'''
$("#my_iframe").contents().find("your selector here");
'''

I have to repeat - if you’re modifying your page through a test, you are no longer testing your page – you are testing something else. Your call.

2 Likes
3

Russ Thomas said:

Firstly, I have strong feelings about modifying the AUT through test code: Tip: DO NOT CHANGE THE AUT THROUGH TEST CODE - Tips & Tricks - Katalon Community

That said, it would be easier to manage your JavaScript if you separate it out as a triple-quoted string…

'''

Like this;
‘’’


  

That's THREE SINGLE QUOTES.  You can then do individual lines of JavaScript easily and make your code more readable:

String js = ‘’’
var x = 1;
x = x * 2;
‘’’
WebUI.executeJavaScript(js, …)


  

Accessing an iframe requires something like this:

‘’’
var iframe = document.getElementById(“my_iframe”);
var iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.querySelector(“your selector here”);
‘’’


  

However, it appears you are using jQuery, in which case you can do something like this instead:

‘’’
$(“#my_iframe”).contents().find(“your selector here”);
‘’’


  

I have to repeat - if you're modifying your page through a test, you are no longer testing your page -- you are testing something else.  Your call.

Thanks for getting back to me. The reason I am making these changes is because we currently have elements that are set to ‘Show’ that reference Hidden elements, This being said, if we update the UI some of the elements might change and I will need to rebuild my test case, the hidden elements that are referenced are always static and never change so we want to hide the elements that are visible on our site, and utilize the Hidden elements to preform clicks. So on the back end if all the elements are set to “Show” you would see two drop down menus for each action within our webpage. I shall give your adjustments a test. Thanks again for all the help.

4

You’re welcome. And thanks for the BA B)