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

Posted 2023-02-23

【中文标题】元素不可见错误（无法单击元素）

【英文标题】：Element not visible error (not able to click an element)

【发布时间】：2016-10-15 01:29:34

【问题描述】：

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

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>

测试用例：

// 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) Protractor Demo App检查项目数

消息：

失败：元素不可见

我也尝试过：

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

报错：

[16:16:26] E/launcher - 错误：SyntaxError: missing ) after argument list

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

【问题讨论】：

为什么不用angularjs来写这个js代码呢？

它是 angularjs 代码的 html 部分

您是否尝试过在执行之前等待元素变得可见？见Expected Conditions

看我的问题：***.com/questions/36871071/…

谢谢艾玛，你的问题也帮助了我。

【参考方案1】：

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

以下是常见的解决方案：

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

wait 为元素的visibility：

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

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

element(by.css(".city-checkbox #mumbaiCity")).click();
element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();

或者，如果你有多个元素匹配同一个定位器 - 你可以"filter" out 可见元素：

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

scroll into view的元素然后点击：

var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement());
mumbaiCity.click();

点击 通过 javascript（请注意 differences）：

var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());

有时，您只需要最大化浏览器窗口：

browser.driver.manage().window().maximize();

【讨论】：

@DoomVroom 缺少function 声明，感谢您的提醒。