Error de elemento no visible (no se puede hacer clic en un elemento)

Question

Error de elemento no visible (no se puede hacer clic en un elemento)

Quiero hacer clic en un botón de opción, aparece en una página web. El código es el siguiente:

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

});

Esta prueba a través de error:

1) Aplicación de demostración de transportador compruebe el recuento de elementos

Mensaje:

Falló: elemento no visible

También intenté con:

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

Da error:

[16:16:26] E / launcher-Error: SyntaxError: missing ) después del argumento list

Por favor, sugiera, cómo el botón de opción obtendrá clic?

32

angularjs javascript selenium selenium-webdriver protractor

Author: alecxe, 2016-06-14

Source

1 answers

score 78 · Accepted Answer

Este es un problema bastante común en la automatización de pruebas con selenium.

Aquí están las soluciones comunes:

asegúrese de que el elemento en el que desea hacer clic sea realmente visible. A veces es necesario realizar acciones adicionales en una página para hacer visible el elemento. Por ejemplo, abra un menú desplegable para que aparezca una opción o abra el menú para que aparezca el submenú

espere para visibilidad de la elemento :

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

Hay un otro elemento con el mismo id que es realmente invisible. En este caso, debe mejorar su localizador para que coincida con este elemento específico. Por ejemplo:
```
element(by.css(".city-checkbox #mumbaiCity")).click();
element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();
```

O, si tienes varios elementos que coinciden con el mismo localizador, puedes "filtrar" sacar un elemento visible :

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

Mover al elemento y luego hacer clic a través browser.actions():

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

Desplácese hasta view del elemento y luego haga clic en:

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

Haga clic en a través de javascript (tenga cuidado con las diferencias aunque):

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

A veces, solo necesita maximizar la ventana del navegador :
```
browser.driver.manage().window().maximize();
```