Erreur d'élément non visible (impossible de cliquer sur un élément)

Question

Je veux cliquer sur un bouton radio, apparaît sur une page web. Le Code est comme suit:

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

});

Ce test des enchaînements d'erreur:

1) Rapporteur de Démonstration App vérifier le nombre d'éléments

Message:

A échoué: l'élément n'est pas visible

J'ai aussi essayé avec:

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

Il donne une erreur:

[16:16:26] E/lanceur - Error: SyntaxError: manquant ) après la liste des arguments

S'il vous plaît suggérer, comment le bouton radio permet d'obtenir sur?

Answer 1

C'est plutôt un problème commun à l'automatisation des tests avec selenium.

Voici les solutions communes:

• assurez-vous que l'élément que vous souhaitez, cliquez est réellement visible. Parfois, vous avez besoin de faire plus d'actions sur une page l'élément visible. Par exemple, ouvrir un menu déroulant pour une option à comparaître ou d'ouvrir le menu de sous-menu à apparaître

• attendre pour la visibilité de l'élément:

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

• il y a un autre élément avec le même id qui est en fait invisible. Dans ce cas, vous avez besoin pour améliorer votre localisateur pour correspondre à cet élément. Par exemple:

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

• Ou, si vous avez plusieurs éléments correspondant à la même locator - vous pouvez "filtre" d'un élément visible:

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

• déplacer l'élément, puis cliquez sur via browser.actions():

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

• faites défiler l'affichage de l'élément, puis cliquez sur:

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

• cliquez sur via javascript (méfiez-vous des différences tout de même):

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

• parfois, vous avez juste besoin de maximiser la fenêtre du navigateur:

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