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.

Hi Jacqueline

Find the name of the CSS identifier for it (and if there are multiple instances of the identifier specify which instance it is) and then use a command similar to this:

runScript | document.getElementsByClassName(“textfield-classname”)[1].style.visibility= “block” ; |

This example finds the element that uses the first instance of a class named “textfield-classname” (e.g. in case there are many fields in this same page with the same class name).

You can also use getElementsByName or other similar JavaScript commands to select the DOM element.

Hope that this helps!

Cybes said:

Hi Jacqueline

Find the name of the CSS identifier for it (and if there are multiple instances of the identifier specify which instance it is) and then use a command similar to this:

runScript | document.getElementsByClassName(“textfield-classname”)[1].style.visibility= “block” ; |

This example finds the element that uses the first instance of a class named “textfield-classname” (e.g. in case there are many fields in this same page with the same class name).

You can also use getElementsByName or other similar JavaScript commands to select the DOM element.

Hope that this helps!

Hi Cybes,

Thanks for your reply but I’m not very familiar on how to use that method you’ve suggested. I’ve attached the screenshot to this reply and could you please help me with the script?

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

Inspect Element.JPG

Without having the site physically available to verify this with, I can only give a suggestion, but based upon the above HTML I’d say this should work:

runScript | document.getElementsByName(“HeaderLine”).style.visibility= “block” ; |
type | name=HeaderLine | 1

BTW. Theoretically speaking, tools such as this don’t necessarily need for the item to be visible to input data into a field, but visually it is better, as you can then monitor what it does better.

Cybes said:

Without having the site physically available to verify this with, I can only give a suggestion, but based upon the above HTML I’d say this should work:

runScript | document.getElementsByName(“HeaderLine”).style.visibility= “block” ; |
type | name=HeaderLine | 1

BTW. Theoretically speaking, tools such as this don’t necessarily need for the item to be visible to input data into a field, but visually it is better, as you can then monitor what it does better.

How do you write that in script mode? Do I need to create any keywords too? Thanks.

No need to create (define) any keywords to use the above example (Variables I take it is what you really mean).

To write the above, it just involves adding in new steps to your script (via the + button that sits under your existing script) and then fill out the values as above.

For the first line fill it in as follows:
- For the “Command” field put in: runScript
- For the “Target” field put in: document.getElementsByName(“HeaderLine”).style.visibility= “block”;
- For the "Value field, leave it blank

For the second line fill it in as follows:
- For the “Command” field put in: type
- For the “Target” field put in: name=HeaderLine
- For the "Value field, put in: 1

Cybes said:

No need to create (define) any keywords to use the above example (Variables I take it is what you really mean).

To write the above, it just involves adding in new steps to your script (via the + button that sits under your existing script) and then fill out the values as above.

For the first line fill it in as follows:
- For the “Command” field put in: runScript
- For the “Target” field put in: document.getElementsByName(“HeaderLine”).style.visibility= “block”;
- For the "Value field, leave it blank

For the second line fill it in as follows:
- For the “Command” field put in: type
- For the “Target” field put in: name=HeaderLine
- For the "Value field, put in: 1

Hi Cybes,

I’m using Katalon Studio instead of Katalon Recorder. Would you mind if you can help me with the script over there? Thanks.

Hi Jacqueline

This is actually the forum just for Katalon Recorder, you will want one of the forum areas found here instead: http://forum.katalon.com/categories/katalon-studio

Unfortunately, I have no experience with Katalon Studio myself to be able to assist you there sorry.

Cybes said:

Hi Jacqueline

This is actually the forum just for Katalon Recorder, you will want one of the forum areas found here instead: http://forum.katalon.com/categories/katalon-studio

Unfortunately, I have no experience with Katalon Studio myself to be able to assist you there sorry.

Hi Cybes,

Thanks for the notifications and your help. Appreciated it. I will post it at the other forum. Thanks.