量角器在按下隐藏的单选按钮时遇到问题
Protractor having problems pressing a hidden radio button
我在使用量角器按下页面上隐藏的单选按钮时遇到问题。您将在下面找到一个测试,其中流程应按如下方式工作。
页面也被导航,并确保单选按钮存在。 (下面两种验证存在的方法,都有效)
尝试以各种不同的方式单击按钮。所有注释掉的方法,以及下面的真实方法都不会在测试中出错,但它们也不会 "Click" 单选按钮。我能够确认这一点,因为底部的 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>
这是最终能够解决我的问题的方法。礼貌: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();
});
感谢您的帮助!
我在使用量角器按下页面上隐藏的单选按钮时遇到问题。您将在下面找到一个测试,其中流程应按如下方式工作。
页面也被导航,并确保单选按钮存在。 (下面两种验证存在的方法,都有效)
尝试以各种不同的方式单击按钮。所有注释掉的方法,以及下面的真实方法都不会在测试中出错,但它们也不会 "Click" 单选按钮。我能够确认这一点,因为底部的 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>
这是最终能够解决我的问题的方法。礼貌: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();
});
感谢您的帮助!