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

Element not visible error (not able to click an element)

提问by Rohini Choudhary

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

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

HTML code:

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

});

This test throughs error:

此测试通过错误：

1) Protractor Demo App check item count

Message:

Failed: element not visible

1) Protractor Demo App 检查项目数

信息：

失败：元素不可见

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

[16:16:26] E/launcher - 参数列表后的错误：SyntaxError: missing )

Please suggest, how the radio button will get click?

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

回答by alecxe

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

• waitfor the visibilityof the element:

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

• there is an another elementwith the same idthat 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 viewof 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 differencesthough):

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

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

• 等待元素的可见性：

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