Change display element from "None" to "Block"

Hi,

May I know how to change an element in
display:none to block and then click on the field to enter values? This
is for an input textbox. Thanks.

I would like to input a value of “1” in the “Header
Line/Row No.” which is not only an input textbox but I can also select
the up and down arrows on the right side to increase the numbers. Please
find below the highlighted portion upon clicking on inspect element.

Import File Header Info.jpg

CSS Element.jpg

Is there anyone who can help?

is the highlighted element definition of arrows? if yes, just try to send click on it to see what’s happen

Andrej Podhajský said:

is the highlighted element definition of arrows? if yes, just try to send click on it to see what’s happen

Hi,

The highlighted element is the definition of the “Header Line/Row No.” textbox field, not the arrows. I would like to input value of “1” in this particular textbox field but I’m not sure how to go about doing it.

did you try?:

WebUI.setText(tObject, "1")
WebUI.sendKeys(tObject, "1")

Andrej Podhajský said:

did you try?:

WebUI.setText(tObject, "1")

WebUI.sendKeys(tObject, “1”)


  

Tried both before but can’t work. Here’s my script:

WebUI.waitForElementVisible(findTestObject(‘Manufacturer Preference/input_HeaderLine1’), 30)

WebUI.click(findTestObject(‘Manufacturer Preference/input_HeaderLine1’))

WebUI.sendKeys(‘Manufacturer Preference/input_HeaderLine1’, “1”)

If I run in Chrome browser, the error displayed is “Unable to click on object ‘Object Repository/Manufacturer Preference/input_HeaderLine1’ (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible”

If I run in Firefox browser, the error displayed is “Unable to click on object ‘Object Repository/Manufacturer Preference/input_HeaderLine1’ (Root cause: org.openqa.selenium.ElementNotInteractableException: Element could not be scrolled into view”

I think this is due to the element display style=none.

one of last resorts is to try it from javascript:

WebUI.executeJavaScript("document.getElementById('[0]').value = '[1]';", [tObject, '1'])

you can try also getByXpath but in that case just put xpath in 1st parameter

Andrej Podhajský said:

one of last resorts is to try it from javascript:

WebUI.executeJavaScript("document.getElementById('[0]').value = '[1]';", [tObject, '1'])

you can try also getByXpath but in that case just put xpath in 1st parameter

My element ID is ‘HeaderLine’. Just to confirm for ‘[0]’ I will put HeaderLine and how about ‘[1]’?

1 Like
WebUI.executeJavaScript("document.getElementById('[0]').value = '[1]';", ['HeaderLine', '1'])orWebUI.executeJavaScript("document.getElementById('HeaderLine').value = '1';")

Andrej Podhajský said:

WebUI.executeJavaScript("document.getElementById('[0]').value = '[1]';", ['HeaderLine', '1'])orWebUI.executeJavaScript("document.getElementById('HeaderLine').value = '1';")

This error is displayed if I used the second option:

WebUI.executeJavaScript("document.getElementById('HeaderLine').value = '1';")

Error Msg: Test Cases/Create Preference FAILED because (of) groovy.lang.MissingMethodException: No signature of method: static com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.executeJavaScript() is applicable for argument types: (java.lang.String) values: [document.getElementById(‘HeaderLine’).value = ‘1’;]
Possible solutions: executeJavaScript(java.lang.String, java.util.List), executeJavaScript(java.lang.String, java.util.List, com.kms.katalon.core.model.FailureHandling)

forgot 2nd parameterWebUI.executeJavaScript("document.getElementById('HeaderLine').value = '1';",null)

Andrej Podhajský said:

forgot 2nd parameterWebUI.executeJavaScript("document.getElementById('HeaderLine').value = '1';",null)

Hi,

The test case can be run successfully without any errors. However, the value of “1” is still not showing in the web application. After completed running the script, the value of “1” only appears when I manually click on the textbox.

I tried to add WebUI.click(findTestObject(‘Manufacturer Preference/input_HeaderLine1’)) but then I will get an error “element is not visible”. If I add the WebUI.waitForElementVisible, it will display the same error too.

WebUI.executeJavaScript(“document.getElementById(‘HeaderLine’).value = ‘1’;”,null)

WebUI.waitForElementVisible(findTestObject(‘Manufacturer Preference/input_HeaderLine1’), 30)

WebUI.click(findTestObject(‘Manufacturer Preference/input_HeaderLine1’))

hello

The test case can be run successfully without any errors. However, the value of “1” is still not showing in the web application. After completed running the script, the value of “1” only appears when I manually click on the textbox.

this is actually expected, since you are changing value “behind scene”

i’m not sure if this helps, but try to use WebUI.focus() function if value will show itself

Andrej Podhajský said:

hello

The test case can be run successfully without any errors. However, the value of “1” is still not showing in the web application. After completed running the script, the value of “1” only appears when I manually click on the textbox.

this is actually expected, since you are changing value “behind scene”

i’m not sure if this helps, but try to use WebUI.focus() function if value will show itself

Hi,

Using WebUI.focus() function will also displays the error “element not visible”. Previously, I get some help from other users that this is due to the textbox is a hidden element and I’m advised to use scripts like this but I just can’t make it work. Can you please advise? Thank you so much for your help.

WebElement element = WebUiCommonHelper.findWebElement(findTestObject(‘Manufacturer Preference/input_HeaderLine1’), 30)

WebUI.executeJavaScript(“arguments[0].setAttribute(\“style\”,\“display: block\”)”, element)

println (WebUI.getAttribute(findTestObject(‘Manufacturer Preference/input_HeaderLine1’), “style”))

i just rewrite it so you can see what’s going on:

WebUI.executeJavaScript("document.getElementById('HeaderLine').setAttribute('style','display: block')", element)

after this, element should be clickable
also you can try this:

WebUI.executeJavaScript("document.getElementById('HeaderLine').removeAttribute('style')",null)

but by that you are changing what you are testing and that’s not good habbit

2 Likes

Andrej Podhajský said:

i just rewrite it so you can see what’s going on:

WebUI.executeJavaScript("document.getElementById('HeaderLine').setAttribute('style','display: block')", element)

after this, element should be clickable
also you can try this:

WebUI.executeJavaScript("document.getElementById('HeaderLine').removeAttribute('style')",null)

but by that you are changing what you are testing and that’s not good habbit

Hi,

I’ve tried the setAttribute method and now it is able to click and enter the value of ‘1’. Thank you so much for your help! Really appreciates it! :slight_smile:

you are welcome

Andrej Podhajský said:

i just rewrite it so you can see what’s going on:

WebUI.executeJavaScript("document.getElementById('HeaderLine').setAttribute('style','display: block')", element)

after this, element should be clickable
also you can try this:

WebUI.executeJavaScript("document.getElementById('HeaderLine').removeAttribute('style')",null)

but by that you are changing what you are testing and that’s not good habbit

This is the exact issue I am having. But I am unable to get either of those to work. Is there something I am missing?

“Test Cases/Test Select Styles FAILED because (of) (Stack trace: groovy.lang.MissingPropertyException: No such property: element for class: Script1538054289887”

hard to tell unless you share more informations with us … like HTML, exact console log etc…