How to add css in to HTML element at the execution?

Product Forums Katalon Studio
,
1

Hi there,

I have html element as below:

<div class>
    <section>
        <div class="section-container section">..</div>
        <div class="grid-control-1-col section">..</div>
        <div class="grid-control-1-col section">..</div>
        <div class="section-container section">..</div>
        <div class="html-script section">..</div>
    </section>
</div>

I want to hide the first div class in side the section:

<div class>
    <section>
        <div class="section-container section" hidden>..</div>
        <div class="grid-control-1-col section">..</div>
        <div class="grid-control-1-col section">..</div>
        <div class="section-container section">..</div>
        <div class="html-script section">..</div>
    </section>
</div>

Is it possible to do it?

Thanks in advance,

Tarmizi

2

I already can got all these elements with script below:

List<WebElement> containers=CustomKeywords.'com.myproject.utils.WebUIUtil.findElementByXpath'("//*[@class='section-container section']")

for(WebElement container : containers){
	//I want to execute javascript here to add css property for first container only
    //using WebUI.executeJavaScript
    //is there any suggestion?
    //
	break
}

My expected result, css should be like:

element.style {
   display:none;
}

for the first container.

3 
String js = '''
 var elem = document.querySelector("section > div.section-container");
 elem.style.display = "none";
'''
WebUI.executeJavaScript(js, null)
4

Thanks @Russ_Thomas for spending your times. It worked :slight_smile:

1 Like
5

I am honor bound to tell you (and anyone reading this in the future) I do NOT recommend this solution. While it works, it is considered bad practice to modify the AUT like this.

1 Like
6

Noted @Russ_Thomas.

Thanks for your advice