Click Radio Button Selenium

Question

Been trying to click a radio button on website to no avail.

 <df-radio-group class="o-flex o-flex--distribute df-question ng-tns-c33-15 ng-has-value ng-touched ng-dirty ng-valid" aria-label="Title" id="title" aria-labelledby="title" role="radiogroup" style="float: left; width: 100%;"> <!----><df-radio _nghost-c40="" class="ng-tns-c33-15 is-checked" id="md-radio-93fd918"><label _ngcontent-c40="" class="df-radio-label" for="md-radio-93fd918-input"> <input _ngcontent-c40="" class="df-radio-input visually-hidden" type="radio" id="md-radio-93fd918-input" name="df-radio-group-0"> <div _ngcontent-c40="" class="md-radio-label-content"> Mr </div> </label></df-radio><df-radio _nghost-c40="" class="ng-tns-c33-15" id="md-radio-bd05b81"><label _ngcontent-c40="" class="df-radio-label" for="md-radio-bd05b81-input"> <input _ngcontent-c40="" class="df-radio-input visually-hidden" type="radio" id="md-radio-bd05b81-input" name="df-radio-group-0"> <div _ngcontent-c40="" class="md-radio-label-content"> Mrs </div> </label></df-radio><df-radio _nghost-c40="" class="ng-tns-c33-15" id="md-radio-ba9f195"><label _ngcontent-c40="" class="df-radio-label" for="md-radio-ba9f195-input"> <input _ngcontent-c40="" class="df-radio-input visually-hidden" type="radio" id="md-radio-ba9f195-input" name="df-radio-group-0"> <div _ngcontent-c40="" class="md-radio-label-content"> Miss </div> </label></df-radio><df-radio _nghost-c40="" class="ng-tns-c33-15" id="md-radio-ec973a5"><label _ngcontent-c40="" class="df-radio-label" for="md-radio-ec973a5-input"> <input _ngcontent-c40="" class="df-radio-input visually-hidden" type="radio" id="md-radio-ec973a5-input" name="df-radio-group-0"> <div _ngcontent-c40="" class="md-radio-label-content"> Ms </div> </label></df-radio> </df-radio-group> 

Been trying to click both the radio button and the label but selenium keeps throwing the no such element error and I'm kinda frustrated at this stage.

Might be easier to see on the actual website:

https://www.theaa.ie/car-insurance/journey/getting-started

Its on the page after entering the email. Trying to get some test cases going but these radio buttons dont want to be clicked.

Answer 1

Having a look to the html structure:

You could wait the presence of the web element with id "title" and then find all the elements with class name " md-radio-label-content ".

Once you have all of them, you can check the text and click the interested one.

So, for example, if you want to click on "Mr":

WebElement titleRadiogroup = (new WebDriverWait(driver, 10))
                .until(ExpectedConditions.presenceOfElementLocated(By.id("title")));


        List<WebElement> ele= titleRadiogroup.findElements(By.className("md-radio-label-content"));

        for (WebElement el : ele)
        {
            if(el.getText().equalsIgnoreCase("Mr"))
            {
                el.click();
            }
        }

Answer 2

In cases like this, I would use an XPath to click on the element by its contents. One issue you run into here is that these DIV s that contain the titles are full of whitespace (see below).

<div _ngcontent-c40="" class="md-radio-label-content">

            Mr

</div>

Because of this, we can't do something simple like

//div[.='Mr']

Another issue is that you can't use contains() because Mr and Mrs both contain the string Mr . We can avoid the whole thing by using normalize-space() which trims whitespace.

//div[normalize-space(.)='Mr']

If it were me, I would wrap this in a function since you are likely to use it repeatedly.

public void selectTitle(String title)
{
    driver.findElement(By.xpath("//div[normalize-space(.)='" + title + "']")).click();
}

and call it like

selectTitle("Miss");