元素不可见错误（无法单击元素）

小编典典

元素不可见错误（无法单击元素）

javascript

我想单击一个单选按钮，出现在网页上。代码如下：

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">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();
    });

});

此测试通过错误：

1）量角器演示应用检查项目数

信息：

失败：元素不可见

我也尝试过：

element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();

它给出了错误：

[16:16:26] E / launcher-参数列表后出现错误：SyntaxError：缺少）

请提出建议，单选按钮将如何获得点击？

阅读 258

2020-05-01

共1个答案

小编典典

在使用硒进行测试自动化中，这是一个相当普遍的问题。

以下是常见的解决方案：

确保要单击的元素实际上是可见的。有时，您需要在页面上执行其他操作以使元素可见。例如，打开下拉菜单以显示选项，或打开菜单以显示子菜单
等待元素的可见性：
```
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) {
return elm.isDisplayed().then(function (isDisplayed) {
    return isDisplayed;
});

}).first();
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();
```

2020-05-01