angularjs - ocultar - ¿Cómo usar el transportador para verificar si un elemento es visible?

ngshow angular 4

Question

Estoy tratando de probar si un elemento es visible usando un transportador. Así es como se ve el elemento:

<i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i>

Cuando estoy en la consola de Chrome, puedo usar este selector de jQuery para probar si el elemento está visible:

$(''[ng-show=saving].icon-spin'')
[
<i class=​"icon-spinner icon-spin ng-hide" ng-show=​"saving">​</i>​
]
> $(''[ng-show=saving].icon-spin:visible'')
[]

Sin embargo, cuando trato de hacer lo mismo en transportador, obtengo este error en tiempo de ejecución:

InvalidElementStateError:
invalid element state: Failed to execute ''querySelectorAll'' on ''Document'':
''[ng-show=saving].icon-spin:visible'' is not a valid selector.

¿Por qué esto no es válido? ¿Cómo puedo verificar la visibilidad usando el transportador?

Answer 1

Esperar a la visibilidad

const EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.css(''.icon-spinner icon-spin ng-hide'')))).then(function() {
//do stuff
})

Truco de Xpath para solo encontrar elementos visibles

element(by.xpath(''//i[not(contains(@style,"display:none")) and @class="icon-spinner icon-spin ng-hide"]))

Answer 2

Esta respuesta será lo suficientemente robusta como para funcionar para los elementos que no están en la página, por lo que fallará correctamente (sin lanzar una excepción) si el selector no pudo encontrar el elemento.

const nameSelector = ''[data-automation="name-input"]'';
const nameInputIsDisplayed = () => {
return $$(nameSelector).count()
.then(count => count !== 0)
}
it(''should be displayed'', () => {
nameInputIsDisplayed().then(isDisplayed => {
expect(isDisplayed).toBeTruthy()
})
})

Answer 3

Esto debería hacerlo:

expect($(''[ng-show=saving].icon-spin'').isDisplayed()).toBeTruthy();

Recuerde $ del transportador no es jQuery y :visible aún no forma parte de los selectores de CSS disponibles + pseudo-selectores

Más información en https://.com/a/13388700/511069

Answer 4

La forma correcta de verificar la visibilidad de un elemento con transportador es llamar al método isDisplayed . Sin embargo, debe tener cuidado ya que isDisplayed no devuelve un booleano, sino una promise proporciona la visibilidad evaluada. He visto muchos ejemplos de código que usan este método incorrectamente y, por lo tanto, no evalúan su visibilidad real.

Ejemplo para obtener la visibilidad de un elemento:

element(by.className(''your-class-name'')).isDisplayed().then(function (isVisible) {
if (isVisible) {
// element is visible
} else {
// element is not visible
}
});

Sin embargo, no es necesario si solo está comprobando la visibilidad del elemento (en lugar de obtenerlo) porque los parches de transportador Jasmine esperan () por lo que siempre espera a que se resuelvan las promesas. Ver github.com/angular/jasminewd

Entonces puedes hacer lo siguiente:

expect(element(by.className(''your-class-name'')).isDisplayed()).toBeTruthy();

Dado que está utilizando AngularJS para controlar la visibilidad de ese elemento, también puede verificar su atributo de clase para ng-hide esta manera:

var spinner = element.by.css(''i.icon-spin'');
expect(spinner.getAttribute(''class'')).not.toMatch(''ng-hide''); // expect element to be visible

Answer 5

Si hay varios elementos en DOM con el mismo nombre de clase. Pero solo uno de los elementos es visible.

element.all(by.css(''.text-input-input'')).filter(function(ele){
return ele.isDisplayed();
}).then(function(filteredElement){
filteredElement[0].click();
});

En este ejemplo, filter toma una colección de elementos y devuelve un único elemento visible usando isDisplayed () .

Answer 6

Tuve un problema similar, en el sentido de que solo quería elementos de devolución que fueran visibles en un objeto de página. Descubrí que puedo usar el CSS :not . En el caso de este problema, esto debería hacer ...

expect($(''i.icon-spinner:not(.ng-hide)'')).isDisplayed().toBeTruthy();

En el contexto de un objeto de página, puede obtener SÓLO aquellos elementos que también son visibles de esta manera. P.ej. dada una página con múltiples elementos, donde solo algunos son visibles, puede usar:

this.visibileIcons = $$(''i.icon:not(.ng-hide)'');

Esto te devolverá todos los i.icon s visibles