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

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

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

这个testing通过错误：

1）量angular器演示应用程序检查项目数量

信息：

失败：元素不可见

我也试过：

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

它给错误：

[16:16:26] E / launcher – Error：SyntaxError：missing）在参数列表后面

请build议，单选button将如何获得点击？

Answer 1

在seleniumtesting自动化中，这是一个相当普遍的问题。

以下是常用的解决scheme：

• 确保你想要点击的元素实际上是可见的。 有时您需要在页面上进行额外的操作才能看到元素。 例如，打开一个下拉菜单，出现一个选项或打开子菜单菜单

• 等待元素的可见性 ：

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