元素不可见错误（无法单击元素） [英] Element not visible error (not able to click an element)

问题描述

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

I want to click on a radio button, appears on a webpage. Code is as follow:

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）量角器演示应用程序检查项目计数

1) Protractor Demo App check item count

消息：

失败：元素不是可见

我也尝试过：

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

它给出错误：

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

[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.

以下是常见解决方案：

• 确保您要点击的元素实际上是可见的。有时您需要在页面上执行额外操作以使元素可见。例如，打开下拉菜单以显示子菜单或打开菜单以显示子菜单



• 可见性 ：

var EC = protractor.ExpectedConditions;
var mumbaiCity = element(by.id('mumbaiCity'));
browser.wait(EC.visibilityOf(mumbaiCity), 5000);
mumbaiCity.click();

另一个元素具有相同的 id 实际上是不可见的。在这种情况下，您需要改进定位器以匹配此特定元素。例如：

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

或者，如果你有多个匹配相同定位器的元素 - 你可以过滤 可见元素：

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

这篇关于元素不可见错误（无法单击元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！