javascript - 在 Angularjs 的 Protractor 测试中选择单选选项

Question

我正在尝试为针对我的 AngularJS 测试所做的 Protractor e2e 测试选择类型为 radio 的输入对象。我尝试将名为 paymentMethodCardSettlement 的输入元素 by.name() 作为目标，就声明而言，它似乎有效。

但是，当我尝试类似 .click() 的操作时，它失败并显示以下消息:

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

我想知道这里的解决方案是否可能是将鼠标导航到标签并进行手动点击？

我定位的 html 如下:

          <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>

我的protactor测试如下:

    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('a@a.com');
    //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();

  });

});               

Answer 1

对于单选按钮，您可以单击标签标签。如果点击输入进行 radio 输入，那么它会给你错误。但是，如果您想验证单选按钮是否被选中，则无法使用 label 标签进行验证。这次你必须检查输入。

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

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