Common Selenium Challenges - Interacting with the hidden elements in a webpage

Like we see some of the applications are the webelements overlapped on top of the actual elements like text box, combox box etc. Refer the image below.

We have the combo box with Yes/No values, but actually “select” html tag is hidden and added a span over it with anchor <a> tag to select the items in it.

Using Webdriver, we are having the challenge to invoke the elements which are hidden. To handle such elements we need to rely on java script executor as shown below.

String javascript = " javascript:var s = document.getElementById('testobject');"

+ ln + "for (i = 0; i< s.options.length; i++){"

+ ln + " if (s.options[i].text.trim().toUpperCase() == '"+valuetomatch+"') {"

+  ln + " s.options[i].selected = true;"

+  ln + " s.click();"

+  ln + " if (s.onchange) {"

+  ln + " s.onchange();"

+ ln + " }"

+  ln + " break;"

+  ln + " }"

+   ln + "}";                                                                                                         ((JavascriptExecutor) webdriver).executeScript(javascript);

To click on any hidden element

String Script = "javascript:document.getElementById('testobject').click();";

((JavascriptExecutor) webdriver).executeScript(Script);

Here the java script command is formed as a string and being executed by the javascriptExecutor. As every browser we use has in built capability of executing the java script commands.