Select Angularjs 量角器测试中的单选选项

Question

我正在尝试 select 一个无线电类型的输入对象，用于针对我的 AngularJS 测试进行的 Protractor e2e 测试。我已尝试将名为 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

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

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

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

Select Angularjs 量角器测试中的单选选项

Select radio option in Protractor test for Angularjs

javascript

end-to-end

angularjs

angularjs-e2e

protractor