org.openqa.selenium.ElementNotVisibleException: element not interactable on radio buttons - selenium

Question

I've looked through all the previous solutions, but nothing seems to help. Your my only hope Obiwan. Any suggestions would be greatly appreciated. Thank you.
I'm writing some long overdue integration tests for our site. This is an assessment asking hundreds of questions, each requesting the user to select one out of x answers using radio buttons. When I go to click on one of these radio buttons, I get the error:
org.openqa.selenium.ElementNotVisibleException: element not interactable
(Session info: chrome=74.0.3729.169)
(Driver info: chromedriver=74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729#{#29}),platform=Windows
...
I've tried updating to the newest ChromeDriver and Selenium, adding waits, verifying I have the proper button, etc.
I've also tried the Gecko driver and get this error:
org.openqa.selenium.ElementNotInteractableException: Element
could not be scrolled into view
HTML (a fragment of) that I'm browsing:
<td width="100%" align="left">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="middle"><span class="radio"
style="background-position: 0px -80px;"></span><input
tabindex="5" type="radio"
style="align: center; vertical-align: middle;"
class="styled" name="PID9.QID1.RID1" id="PID9.QID1.RID1"
value="6"></td>
<td valign="middle"><span class="std_size2"> </span></td>
<td valign="middle"><span class="std_size2">Married</span></td>
</tr>
</tbody>
</table>
</td>
Testing code (including some of my alternative attempts commented):
private String doAssesment()
{
assertTrue(driver.getTitle().equals("Couple Assessment"));
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
WebElement decisionTree = driver.findElement(By.name("decision_tree"));
List<WebElement> inputs = decisionTree.findElements(By.tagName("input"));
for (WebElement button : inputs)
{
System.out.println("type=" + button.getAttribute("type"));
if (button.getAttribute("type").equals("radio"))
{
// wait.until(ExpectedConditions.visibilityOf(button));
// new Actions(driver).moveToElement(button).perform();
button.click();
break;
}
}
return driver.getTitle();
}
One possible gotchya that I see is that the radio buttons have an onchange javascript injected (is that the right term?).
Javascript:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"),
span = Array(),
textnode, option, active;
for (a = 0; a < inputs.length; a++) {
if ((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if (inputs[a].checked == true) {
if (inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight * 2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight * 2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
document.onmouseup = Custom.clear;
}
}
inputs = document.getElementsByTagName("select");
for (a = 0; a < inputs.length; a++) {
if (inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for (b = 0; b < option.length; b++) {
if (option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.choose;
}
}
},
pushed: function() {
element = this.nextSibling;
if (element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight * 3 + "px";
} else if (element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight * 3 + "px";
} else if (element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if (element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if (element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight * 2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for (a = 0; a < inputs.length; a++) {
if (inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for (var b = 0; b < inputs.length; b++) {
if (inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px";
} else if (inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if (inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight * 2 + "px";
} else if (inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for (d = 0; d < option.length; d++) {
if (option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
<
/script>

Answer 1

Turns out that the radio button was in a span that was "hiding" the button. Changed the code to click in the span and it seems to be working.
private String doAssesment()
{
assertTrue(driver.getTitle().equals("Couple Assessment"));
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
WebElement decisionTree = driver.findElement(By.name("decision_tree"));
List<WebElement> inputs = decisionTree.findElements(By.className("radio"));
WebElement button = inputs.get(4);
button.click();
return driver.getTitle();
}