Select radio option in Protractor test for Angularjs

Question

I am trying to select an input object of type radio for a Protractor e2e test i am doing against my AngularJS test. I have tried targeting the input element by.name() called paymentMethodCardSettlement which seems to work as far as the declaration is concerned.

However when i try something like a .click() it fails with the following message:

Failed: Element is not currently visible and so may not be interacted with

I am wondering if perhaps the solution here might be to navigate the mouse to the label and do a manual click?

the html i am targeting is as follows:

          <label class="control-label" translate=""><span class="ng-scope">Select payment method</span></label>

          <div class="radios">

            <div class="radio" id="paymentMethodBankTransfer">
              <label class="" ng-class="{checked: payment.method == paymentMethodBankTransfer,
                        disabled: !paymentMethodExists(paymentMethodBankTransfer)}">
                <div class="iradio">
                  <input style="position: absolute; opacity: 0;" class="ng-pristine ng-untouched ng-valid" ng-model="payment.method" value="PAY#10" name="paymentMethodBankTransfer" icheck="" ng-disabled="!paymentMethodExists(paymentMethodBankTransfer)" type="radio"><ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
                </div>
                <span class="icon-bankTransfer"></span>
                <span translate=""><span class="ng-scope">Bank Transfer</span></span>
              </label>
            </div>

            <div class="radio" id="&quot;paymentMethodCardSettlement">
              <label class="" ng-class="{checked: payment.method == paymentMethodCardSettlement,
                     disabled: !paymentMethodExists(paymentMethodCardSettlement)}">
                <div class="iradio">
                  <input style="position: absolute; opacity: 0;" class="ng-pristine ng-untouched ng-valid" ng-model="payment.method" value="PAY#9" name="paymentMethodCardSettlement" icheck="" ng-disabled="!paymentMethodExists(paymentMethodCardSettlement)" type="radio"><ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
                </div>
                <span class="icon-card"></span>
                <span translate=""><span class="ng-scope">Debit/credit card</span></span>
              </label>
            </div>
            <span ng-show="!payment.method &amp;&amp; userForm.paymentMethodCardSettlement.$dirty" class="icon-error form-control-feedback ng-hide" aria-hidden="true"></span>
            <span ng-show="payment.method" class="icon-success form-control-feedback ng-hide" aria-hidden="true"></span>
          </div>
        </div>

my protactor test is as follows:

    describe('Nonkyc Demo App', function() {
  var fullName = element(by.name('fullName'));
  var email = element(by.name('email'));
  var invoiceReference = element(by.name('invoiceReference'));
  var paymentMethod = element(by.model('payment.method'));
  var userAmountInCounterCurrency = element(by.model('user.amountInCounterCurrency'));
  var userCounterCurrency = element(by.model('user.countryCurrency'));
  var paymentMethodCardSettlement = element(by.input('paymentMethodCardSettlement'));
  var amountInCounterCurrency = element(by.name('amountInCounterCurrency'));
  var quoteButton = element(by.id('quoteCalculateBtn'));


  function uiSelect(model, hasText) {
      var selector = element(by.model(model)),
          toggle = selector.element(by.css('.ui-select-toggle'));

      toggle.click();

      browser.driver.wait(function(){
          return selector.all(by.css('.ui-select-choices-row')).count().then(function(count){
              return count > 0;
          });
      }, 2000);

      var choice = selector.element(by.cssContainingText('.ui-select-choices-row',hasText));
      choice.click();
  };

  beforeEach(function() {
    browser.get('http://csc.somehost.com:9000/#/');
  });

  it('should have no title', function() {
    expect(browser.getTitle()).toEqual('');
  });

  it('should create a quote with no errors', function() {
    fullName.sendKeys('Homer Simpson');
    email.sendKeys('[email protected]');
    //select United Kingdom
    uiSelect('user.country','United K');
    invoiceReference.sendKeys(12341234);
    //select Bill Payment
    uiSelect('user.purposeOfPayment','Bill Payment');
    //select GBP
    uiSelect('payment.baseCurrency','G');
    //select bank transfer
    paymentMethodCardSettlement.click();
    amountInCounterCurrency.sendKeys(253);
    uiSelect('user.counterCurrency','GBP');

    quoteButton.click();

  });

});

As a work around, i have added an id to the label and selected that by id and then called the .click() method which then selects my input. However, i would still like to understand if its possible to do this via the input element directly. — Graham

Zaman Afzal Zaman Afzal · Accepted Answer · 2016-11-22T21:23:35

For the radio button you can click on label tag. If click on input for radio input, then it will give you error. But if you want to verify that radio button is selected or not then you cant verify this with label tag. you have to check with input this time.

browser.actions().mouseMove(element(by.radioLabelId))
        .click().perform();

expect(element(by.RadioInput).isSelected()).
        toBe(true);

Select radio option in Protractor test for Angularjs

1 Answers