Question

我在使用量角器在我的页面上按下隐藏的单选按钮时遇到问题。您将在下面找到一个测试，其中流程应如下所示。

也会导航页面，并确保单选按钮存在。（下面两种方法来验证存在，两种方法都有效）
尝试以各种不同的方式点击按钮。所有注释掉的方式，以及下面的真实方式都不会错误地测试，但它们也没有＆＃34; Click＆＃34;单选按钮。我能够确认这一点，因为在底部的3期望看看点击按钮时显示的表单是否实际显示，并且每次都是假的。

对此的任何帮助将不胜感激，下面我还提供了此代码正在查看的示例html。任何帮助都会很棒，不确定是否可能。感谢您提前提供任何帮助

       it('Should press one of the radio buttons and have the form pop up', function() {

    // Make sure that the value equals bank is found (This passing its test)
    expect(element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value')).toEqual('bank');

    // Another way to make sure that the element is found (This is passing the test)
    // expect(element.all(by.css('[ng-value="bank"]')).get(0).getAttribute('ng-value')).toEqual('bank');

    // browser.driver.executeScript("return arguments[0].click();", element.all(by.css('[ng-value="bank"]')).get(0).getAttribute('ng-value').getWebElement());
    //   browser.driver.executeScript("return arguments[0].click();", element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value').getWebElement());

    // #1 Way THIS WAY WORKS BUT DOESNT PRESS ANYTHING
    //  var input = element.all(by.model('bankConnection.bank')).get(0);

    // browser.driver.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', input.getWebElement());

    // #2 Way THIS WAY WORKS BUT DOESNT PRESS ANYTHING
    var input = element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value');

    browser.driver.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', input.getWebElement());

    // To verify button was pressed. 2 seconds
    browser.driver.sleep(2000);

    // Make sure that the form pops up (IT IS CURRENTLY NOT SHOWING UP)
    expect(element(by.model('bankConnect.username')).isPresent()).toBe(true);
    expect(element(by.model('bankConnect.password')).isPresent()).toBe(true);

    // Once click is figured out this should flow through properly BOA CLICK
    expect(bank_page.idText).toEqual('Online ID');

    });

单选按钮元素

<div class="col" ng-repeat="bank in firstBanks">
  <div style="font-size: 2em; ">
   <label class="bank_radio">
     <input type="radio" ng-model="bankConnection.bank" ng-value="bank" class="ng-valid ng-dirty" value="[object Object]">
     <img ng-src="img/banks/bofa.png" src="img/banks/bofa.png">
   </label>
  </div>
 </div>

弹出元素的表单

<div class="list card" style="margin-bottom: 0;margin-top:0;" ng-show="bankConnection.bank != null ">
 <div class-="list">

 <label class="item item-input">
  <span class="input-label ng-binding">Online ID</span>
   <input type="text" ng-model="bankConnection.username" class="ng-pristine ng-valid">
 </label>
 <label class="item item-input">
 <span class="input-label ng-binding">Password</span>
  <input type="password" ng-model="bankConnection.password" class="ng-pristine ng-valid" autocomplete="off" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</label>

 </div>
</div>

Answer 1

这是最终能够解决我的问题的方法。感谢：How to click on hidden element in protractor?

我将此块添加到我的代码中，将鼠标悬停在图像区域上，然后发出单击命令。

// Move mouse over the button
browser.driver.actions().mouseMove(element(by.css('[ng-src="img/banks/bofa.png"]'))).perform();

    element.all(by.css('[ng-src="img/banks/bofa.png"]')).then(function (elm) {

        elm[0].click();
    });

感谢您的帮助！

量角器按下隐藏的单选按钮时出现问题

1 个答案: