Element nicht sichtbar Fehler (kann nicht auf ein Element klicken)

Question

Ich möchte auf ein Optionsfeld klicken, erscheint auf einer Webseite. Code ist wie folgt:

HTML-Code:

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

}); 

Dieser Test Durch Fehler:

1) Protractor Demo App check item count

Message:

Failed: element not visible

ich auch versucht, mit:

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

Es gibt Fehler:

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

Bitte vorschlagen, wie der Radiobutton wird anklicken?

Answer 1

Dies ist ein häufiges Problem in der Testautomatisierung mit Selen.

Hier sind die gemeinsamen Lösungen:

• das Element, das Sie tatsächlich sichtbar klicken möchten sicherstellen ist. Manchmal müssen Sie auf einer Seite zusätzliche Aktionen ausführen, um das Element sichtbar zu machen. Öffnen Sie zum Beispiel ein Dropdown für eine Option bis zu oder öffnen Sie das Menü für Untermenü angezeigt

• wait für die visibility des Elements erscheinen:

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

• dort ein ist ein weiteres Element mit der das gleiche id das ist eigentlich unsichtbar. In diesem Fall müssen Sie Ihren Locator so anpassen, dass er diesem bestimmten Element entspricht.Zum Beispiel:

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

• Oder, wenn Sie mehrere Elemente passend zu dem gleichen Locator bekommen - Sie sichtbares Element ein "filter" aus können:

  var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (elm) { 
      return elm.isDisplayed().then(function (isDisplayed) { 
       return isDisplayed; 
      }); 
  }).first(); 
  mumbaiCity.click(); 
  

• Umzug nach Elemente und klicken Sie dann auf über browser.actions():

  var mumbaiCity = element(by.id('mumbaiCity')); 
  browser.actions().mouseMove(mumbaiCity).click().perform(); 
  

• scroll into view von t er Element und klicken Sie dann auf:

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

• Klick über Javascript (achten Sie auf die differences obwohl):

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

• manchmal, Sie müssen nur das Browser-Fenster maximieren:

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