要素が表示されないエラー（要素をクリックできません）

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> 

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) Protractor Demo App check item count

Message:

Failed: element not visible

私もしてみました：

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

それはエラーを与える：

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

ラジオボタンをクリックしてくださいでしょうか、提案してください？

Answer 1

これはセレンのテスト自動化ではかなり一般的な問題です。ここで

は、一般的なソリューションです：

• あなたがクリックする要素が実際に表示されていることを確認してください。場合によっては、要素を可視にするために、ページ上で余分なアクションを行う必要があります。
  が

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

• と他の要素があります：たとえば、要素のvisibilityため

• waitを見えるように表示するオプションまたはサブメニューのオープンメニューがドロップダウンを開きます同じidは実際には見えません。この場合、この特定の要素と一致するようにロケータを改善する必要があります。例えば：

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

• それとも、あなたが同じロケータを一致する複数の要素を持っている場合 - あなたは見える要素アウト"filter"することができます：要素に

  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のt彼要素をクリックします：javascriptの経由

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

• クリック（ただしdifferencesには注意してください）：

  ：

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

• 時には、あなただけのブラウザのウィンドウを最大化に必要

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