How to find radio button value and ID with xpath

Question

<rhr-radio-button element-id="tenderValidType" model="$ctrl.additionalData.procProcedure.tenderValidType" value="UNTIL_DATE" label="additionalData.tenderValidUntil" required="::$ctrl.requiredFields['tenderValidType']" read-only="$ctrl.isReadOnly" class="ng-scope ng-isolate-scope">
   <!-- ngIf: $ctrl.horizontal !== 'true' && !$ctrl.readOnly -->
   <div class="radio ng-scope" ng-if="$ctrl.horizontal !== 'true' &amp;&amp; !$ctrl.readOnly">
      <label>
         <input type="radio" class="px ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" name="tenderValidType" ng-value="::$ctrl.value" ng-model="$ctrl.model" ng-required="$ctrl.innerRequired" ng-disabled="$ctrl.disabled" ng-change="$ctrl.onChange()" value="UNTIL_DATE" required="required"> <span class="lbl ng-binding" ng-bind="::($ctrl.label | translate) + '&nbsp;'">Pakkumus peab olema jõus kuni&nbsp;</span><!-- ngIf: $ctrl.showHelpText === 'true' -->
      </label>
   </div>
   <!-- end ngIf: $ctrl.horizontal !== 'true' && !$ctrl.readOnly --><!-- ngIf: $ctrl.horizontal === 'true' && !$ctrl.readOnly --><!-- ngIf: $ctrl.readOnly && $ctrl.value == $ctrl.model -->
</rhr-radio-button>

I've tried everything here, like this:

 await element(by.xpath((//label[contains(@for,'rhr-radio-button')])[1])).click();

and this

await element(by.id('tenderValidType')).all(by.tagName('rhr-radio-button')).get(1).click();

But nothing.. I think I should combine the ID and the value into one xpath, but I don't know how. Any ideas?

Answer 1

It is difficult to suggest things without being able to test or check them, but, according to the information we have and taking into account that there could be multiple rhr-radio-button elements on a page, I'd combine the tag name check and the element-id check:

$('rhr-radio-button[element-id=tenderValidType]').click();

Note that element-id attribute could not be targeted with the by.id() locator as by.id() looks for id attributes.

One other option, you may try to look for the input element directly:

$('input[name=tenderValidType]').click();

Note: $('...') here is a shortcut to element(by.css('...')).