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

Question

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

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

消息：

失败：元素不可见

我也尝试了：

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

出现错误：

[16:16:26] E/launcher - Error: SyntaxError: missing ) after argument list

请建议如何单击单选按钮？

- Rohini Choudhary

---

为什么你不使用AngularJS来编写这段JS代码呢？ - Python Basketball

这是AngularJS代码的HTML部分。 - Rohini Choudhary

你尝试过在执行之前等待元素变为可见吗？请参阅预期条件。 - Gunderson

请看我的问题：https://dev59.com/uJbfa4cB1Zd3GeqPuHmB - Emna Ayadi

谢谢Emma，你的问题也帮助了我。 - Rohini Choudhary

Answer 1

在使用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) {
    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();
  

- alecxe

---

@DoomVroom 在那里缺少了一个 function 语句，感谢您的提醒。 - alecxe