如何在Watir中选择带有标签文本的单选按钮？

Question

The cheatsheets and docs on Watir show something like this to set a radio button

b.radio(:id => "radio").set

How can I select a Radio button based on the text next to it ?

Sometimes this text is inside the label tag , sometimes its just inside some div/form tag. How do we handle this in Watir??

(Label texts in CAPS in below examples)

Example 1:

<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>

Example 2 :

<div class="isoversixteen_false_container">
<input id="isoversixteen_false" class="radio" type="radio" value="0" name="isoversixteen" autocomplete="off"/>
<label class="isoversixteen_false_label" for="isoversixteen_false">
<span class="label_main">UNDER 16</span>
</label>
</div>
<div class="isoversixteen_true_container">
<input id="isoversixteen_true" class="radio" type="radio" value="1" name="isoversixteen" autocomplete="off" checked="checked"/>
<label class="isoversixteen_true_label" for="isoversixteen_true">
<span class="label_main">16 OR OVER</span>
</label>
</div>

Answer 1

Orde's comment about using attributes of the input element is a good idea as it is the easiest to program. However, to answer the question:

Example 1 - Adjacent text node

In this example, the desired text is in an adjacent text node. Given that the radio buttons share the same parent, I think the easiest solution would be to use XPath:

browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set

The XPath says to:

1. Find an input element where
2. The following text node - ie the [1]
3. Has the text "MALE" or "FEMALE", ignoring the leading/following spaces - ie the [normalize-space(.) = "FEMALE"]

Example 2 - Label text

In this example, the checkboxes have a properly associated label element - ie the id of the checkbox matches the for attribute of the label. Watir supports locating elements by their label text through the :label locator:

browser.radio(label: 'UNDER 16').set
browser.radio(label: '16 OR OVER').set

Example - First following non-blank text node

If you want a single solution that works with both examples, the following seems to work:

browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "UNDER 16"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "16 OR OVER"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "FEMALE"]]').set

The intent here is to find the first text node after the checkbox that has text (the [normalize-space(.) != ""][1] portion) and that text matches the expected text (the [normalize-space(.) = "UNDER 16" portion).

Answer 2

This is HTML structure I have in my example:

<div class="radio-inline">
<label for="job_type">Second Type</label>
<input id="job_service" name="job" type="radio" value="remote">
</div>

Normally I'd select it with:

@browser.input(:value => 'remote').click

However, per your question, I tried to see if I could select by text. I found this works, but may be dependent on the labels being nested in a div.

@browser.label(:text => /Second Type/).click

The / around "Second Type" were due to some weird line breaks in the HTML, may work with just quotes.