元素不可见错误(无法单击元素) [英] Element not visible error (not able to click an element)
问题描述
我想点击一个单选按钮,出现在网页上.代码如下:
HTML 代码:
<div class="small-checkbox red-theme raleway-regular text-muted2 position-relative"><div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}"><label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}"><input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)"><span class="mdl-radio__label position-relative font15"><img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png">孟买</span>标签>
测试用例:
//demo-test.js描述('量角器演示应用程序',函数(){茉莉花.DEFAULT_TIMEOUT_INTERVAL = 10000000;it('检查项目数', function() {browser.get('');元素(by.id('mumbaiCity')).click();});});
此测试通过错误:
<块引用>1) Protractor Demo App 检查项目数
留言:
失败:元素不可见
我也试过:
element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();
它给出了错误:
<块引用>[16:16:26] E/launcher - 参数列表后的错误:SyntaxError: missing )
请建议,单选按钮如何获得点击?
这是使用 selenium 进行自动化测试的一个相当普遍的问题.
以下是常见的解决方案:
- 确保您要单击的元素实际上是可见的.有时您需要在页面上进行额外的操作以使元素可见.例如,打开下拉菜单以显示选项或打开菜单以显示子菜单
var EC = protractor.ExpectedConditions;var mumbaiCity = element(by.id('mumbaiCity'));browser.wait(EC.visibilityOf(mumbaiCity), 5000);MumbaiCity.click();
有一个另一个元素具有相同的
id
,实际上是不可见的.在这种情况下,您需要改进定位器以匹配此特定元素.例如:element(by.css(".city-checkbox #mumbaiCity")).click();element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();
或者,如果你有多个元素匹配同一个定位器 - 你可以 过滤"一个可见元素:
var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (elm) {返回 elm.isDisplayed().then(function (isDisplayed) {返回显示;});}).第一的();MumbaiCity.click();
移动到元素,然后通过
browser.actions()
:var mumbaiCity = element(by.id('mumbaiCity'));browser.actions().mouseMove(mumbaiCity).click().perform();
滚动查看元素,然后单击:
var mumbaiCity = element(by.id('mumbaiCity'));browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement());MumbaiCity.click();
点击通过javascript(注意差异 虽然):
var mumbaiCity = element(by.id('mumbaiCity'));browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());
有时,您只需要最大化浏览器窗口:
browser.driver.manage().window().maximize();
I want to click on a radio button, appears on a webpage. Code is as follow:
HTML code:
<div class="small-checkbox red-theme raleway-regular text-muted2 position-relative">
<div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}">
<input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)">
<span class="mdl-radio__label position-relative font15"><img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png">Mumbai</span>
</label>
</div>
</div>
Tesstcase:
// demo-test.js
describe('Protractor Demo App', function() {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000000;
it('check item count', function() {
browser.get('<link>');
element(by.id('mumbaiCity')).click();
});
});
This test throughs error:
1) Protractor Demo App check item count
Message:
Failed: element not visible
I also tried with:
element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();
It gives error:
[16:16:26] E/launcher - Error: SyntaxError: missing ) after argument list
Please suggest, how the radio button will get click?
This is a rather common problem in test automation with selenium.
Here are the common solutions:
- make sure the element you want to click is actually visible. Sometimes you need to make extra actions on a page to make the element visible. For example, open up a dropdown for an option to appear or open menu for submenu to appear
wait for the visibility of the element:
var EC = protractor.ExpectedConditions; var mumbaiCity = element(by.id('mumbaiCity')); browser.wait(EC.visibilityOf(mumbaiCity), 5000); mumbaiCity.click();
there is an another element with the same
id
that is actually invisible. In this case, you need to improve your locator to match this specific element. For instance:element(by.css(".city-checkbox #mumbaiCity")).click(); element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();
Or, if you got multiple elements matching the same locator - you can "filter" out a visible element:
var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (elm) { return elm.isDisplayed().then(function (isDisplayed) { return isDisplayed; }); }).first(); mumbaiCity.click();
move to element and then click via
browser.actions()
:var mumbaiCity = element(by.id('mumbaiCity')); browser.actions().mouseMove(mumbaiCity).click().perform();
scroll into view of the element and then click:
var mumbaiCity = element(by.id('mumbaiCity')); browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement()); mumbaiCity.click();
click via javascript (beware of the differences though):
var mumbaiCity = element(by.id('mumbaiCity')); browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());
sometimes, you just need to maximize the browser window:
browser.driver.manage().window().maximize();
这篇关于元素不可见错误(无法单击元素)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!