web-dev-qa-db-fra.com

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

Je veux cliquer sur un bouton radio, apparaît sur une page Web. Le code est le suivant:

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 est dû à une erreur:

1) Compte d'éléments de vérification de Demo App de rapporteur

Message:

Failed: élément non visible

J'ai aussi essayé avec:

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

Cela donne une erreur:

[16:16:26] E/launcher - Erreur: SyntaxError: manquant) après la liste d'arguments

S'il vous plaît suggérer, comment le bouton radio obtiendra un clic?

javascriptangularjsseleniumselenium-webdriverprotractor
38
Rohini Choudhary

Ceci est un problème assez courant dans l'automatisation de test avec Selenium.

Voici les solutions communes:

  • assurez-vous que l'élément sur lequel vous souhaitez cliquer est bien visible. Parfois, vous devez effectuer des actions supplémentaires sur une page pour rendre l'élément visible. Par exemple, ouvrez un menu déroulant pour qu'une option apparaisse ou ouvrez un menu pour que le sous-menu apparaisse

  • attendez pour le 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 réalité invisible. Dans ce cas, vous devez améliorer votre localisateur pour qu'il corresponde à cet élément spécifique. 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 au même localisateur, vous pouvez "filtrer" sur 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éplacez à l'élément et puis cliquez via browser.actions() :

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

  • défilez dans la vue 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 bien):

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

  • parfois, il vous suffit de agrandir la fenêtre du navigateur :

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