How To Show/Hide Text Box In Selenium IDE Using Javascript

If you see selenium IDE commands with examples on COMMAND LIST PART 1 and COMMAND LIST PART 2, You will find many commands to perform different actions on web page. But still selenium IDE have not any commands to perform few actions directly like showing hidden element or hiding any
visible element. Example - To eanble or disable any element from web page, selenium IDE have not any direct command but we can do it very easily using javascript with "runScript" command as described in THIS POST.

Javascript support in selenium IDE is biggest benefit by which we can perform this kind of actions. You can view this kind of more selenium IDE - javascrpt examples on THIS PAGE.

To show hidden element we can use javascript with "runScript" command. Same way, To hide any visible element, we can use "runScript" command with javascript as shown in bellow given example.

New Test
CommandTargetValue
setSpeed2000
openhttp://only-testing-blog.blogspot.com/2013/11/new-test.html
runScriptdocument.getElementsByName('Hidden')[0].setAttribute('type', 'text')
runScriptdocument.getElementsByName('To Hide')[0].setAttribute('type', 'hidden')

In above example, setAttribute() html dom method will replace type attribute value from "hidden" to "text" for Hidden text box to show it on page. 2nd "runScript" command will do reverse thing.

2 comments: