在 Angularjs 的量角器测试中选择单选选项

Question

我正在尝试为我针对我的 AngularJS 测试进行的量角器 e2e 测试选择一个无线电类型的输入对象。我尝试将输入元素 by.name() 称为 paymentMethodCardSettlement ，就声明而言，它似乎有效。

但是，当我尝试 .click() 之类的方法时，它会失败并显示以下消息：

失败：元素当前不可见，因此可能无法交互 与

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

我定位的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>

我的proctor测试如下：

    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

对于单选按钮，您可以单击标签标签。如果单击输入进行无线电输入，则会出现错误。 但是，如果您想验证是否选择了单选按钮，那么您无法使用标签标记来验证这一点。这次你必须检查输入。

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

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