How to read the value of radio field using protractor

Question

I am trying to read the value of a radio button that is selected by my test case, but I am always getting an error like this:

Expected 'on' to be 'M'.

What I understand from the above error is that protractor is expecting a value 'On' instead of 'M'.

My problem is pretty straight forward: I am unable to read the input value of a radio button I am selecting.

Few scenarios for better understanding.

1. My radio buttons do not have a default value selected.
2. A radio button value will be selected by default if the user selects an already existing member.
3. isValSelected value initially is set to false and will be true if a user selects the radio button explicitly or if a user selects from a list of available names

I have been unable to resolve this issue for the past few days. Any help would be appreciated. I have tried working with promises too, but nothing works as of now.

My Markup:

     <div class="col-md-6 form-group">     
        <div class="radio-class">
          <div class="radio-field1">
           <input type="radio" [value] = "'M'" name="gender" id="radioM" class="form-control" [(ngModel)] = "radioM" [attr.disabled]="isValSelected?'':null" [checked]="isValSelected && radioM=== 'M'" />
           <label for="radioM">Male</label>
          </div>
        <div class="radio-field2">
          <input type="radio" [value] = "'F'" name="gender" id="radioF" class="form-control" [(ngModel)] = "radioF" [attr.disabled]="isValSelected?'':null" [checked]="isValSelected && radioF === 'F'" />
          <label for="radioF">Female</label>
        </div>
       </div>
      </div>

My Page Object:

MRadioLabel() {
        return element(by.css("label[for='radioM']"));
    }
    MRadioInput() {
        return element(by.id('radioM'));
    }

My Test Case:

let newForm: myPo;
it('should read selected radio button value', () => {


    expect(newForm.MRadioInput().getAttribute('checked')).toBeFalsy();

    newForm.MRadioLabel().click()

    expect(newForm.MRadioInput().getAttribute('checked')).toBeTruthy();
    expect(newForm.MRadioInput().getAttribute('value')).toBe('M');

    newForm.submitButton().click();

    browser.driver.sleep(10000);
  })

Answer 1

The value attribute is not being recognized/handled by Angular - as described here, the default value for a checkbox is "on". Your expect statement will succeed if you change the HTML to be [attr.value] = "'M'".

However, the value doesn't actually change when you check or uncheck the radio button, so if you're trying to test if the radio button is selected, looking at the checked attribute should be sufficient. I think you actually just want value = "M" since you're testing if radioM === M.