Protractor: How do I select a Radio Button using 'by.repeater'?

Question

I am trying to select a radio button from a list of radio buttons by using "by.repeater. The radio buttons have the ng-repeat attribute. I tried to click on a specific radio button by retrieving it like this : - element.all(by.repeater('')).get(i).click(), where i is the index of the radio button that I want to select, but it is not getting selected successfully.

I tried locating the exact radio button by using mouseMove() and mouseDown(), but nothing works. I know I am locating the correct radio button that I want to click on because when I run a getText() on the above element.all....get(i) value and display it on the Console, the label/ text corresponding to the correct radio button is displayed.

Here is my HTML code:

<div class="radio ng-scope" ng-repeat="test in tests">
<label class="ng-binding">
<input type="radio" name="test" ng-click="setTest(test)" ng-checked="((test.length == 1 && !type.defaultSelectChoice) || (test.length != 0 && test.defaultSelectChoice))" checked="checked">
Sonia
</label>
</div>
<div class="radio ng-scope" ng-repeat="test in tests">
<label class="ng-binding">
<input type="radio" name="test" ng-click="setTest(test)" ng-checked="((test.length == 1 && !type.defaultSelectChoice) || (test.length != 0 && test.defaultSelectChoice))">
Sammy
</label>
</div>

I want to select the radio button for Sammy. You will notice Sonia is already checked/ selected. I tried - element.all(by.css('.radio.ng-scope')).get(1).click() to select Sammy and several variations with element. all, but nothing worked -

element.all(by.repeater('test in tests')).get(1).click()
element(by.css('.radio.ng-scope')).all(by.repeater('type in types')).get(1).click();
browser.actions().mouseMove(element.all(by.css('.radio.ng-scope')).get(1)).click().perform();

element.all(by.css('.radio.ng-scope')).get(1).getText() does return Sammy, but not able to click on the actual radio button that corresponds to the label Sammy. Also tried setAttribute('checked'), but no luck.

I have researched almost all posts on selecting a radio button in Protractor on Stack Overflow, but haven't been able to resolve this. Any inputs will be greatly appreciated. Thank you!

Sudharsan Selvaraj Sudharsan Selvaraj · Accepted Answer · 2017-04-05T14:24:18

All the locators you have used doesn't locate the radio buttons. They all refer to the parent div element. To find the radio button inside each repeater, try the below code.

element.all(by.repeater("test in tests")).all(by.css ("input[type='radio']")).get(0).click();

Protractor: How do I select a Radio Button using 'by.repeater'?

1 Answers