C#- Selenium Webdriver, Not able to select radiobutton as a label is displayed over it

Question

I am new to Selenium webdriver and i am using C# to write the script. I have a field Gender having Male and Female option, these options are actually radio buttons but are displayed like labels.

I tried million ways to have it selected:

1. driver.FindElement(By.CssSelector("[value='Female']")).Click();
2. driver.FindElement(By.XPath("//input[contains(@value,'Male']")).Click();
3. driver.FindElement(By.CssSelector("input[type='radio'][value='Male']")).Click();
4. driver.FindElement (By.XPath ("//input[@value='Female']")).Click ();

But NONE worked from above. The html for the Gender fields looks like this:

<li class="radiobutton-yesno ui-buttonset">
	<span class="label">
	Gender                        
		<span class="help-icon" data-title="Your gender is a factor in determining your cost.">
		</span>
	</span>
	<input type="radio" id="genderNo_1" name="gender_1" value="Male" class="reqCntrl ui-helper-hidden-accessible">
		<label for="genderNo_1" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button">
			<span class="ui-button-text">Male</span>
		</label>
	<input type="radio" id="genderYes_1" name="gender_1" value="Female" class="ui-helper-hidden-accessible">
		<label for="genderYes_1" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button">
			<span class="ui-button-text">Female</span>
		</label>
</li>

and the field on page appears like this:enter image description here

Answer 1

The <input> type is probably being hidden via css/js rules. So you can't click on those - Selenium doesn't let you do something that a user can't.

The @value attribute also belongs to the radiobutton <input>s so using that in the selector won't work, since that entire element is hidden.

Instead, use the <label> or the <span> under label and match with it's text:

1. //label/span[text()='Female']
2. //label/span[text()='Male']

PS: this is a bit worrying wrt the nature of this question:

"Your gender is a factor in determining your cost."

Answer 2

It's a good UX practice to put radio inside a label. Try to change your markup to obey that rule. After that you should be able to select radio by performing click action on the label (select label by text as @aneroid shown you).

Answer 3

Can you tell what error Selenium is throwing?

You can try using a script instead.

var temp = "var elt = document.getElementById('#myRadioButton'); elt.click();";
driver.executeScript(temp);