Wie verwende ich den Winkelmesser, um zu prüfen, ob ein Element sichtbar ist?

Question

Ich versuche zu testen, ob ein Element mit Winkelmesser sichtbar ist. Hier ist, was das Element wie folgt aussieht:

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

Wenn in der Chromkonsole, kann ich diesen jQuery-Selektor verwenden, um zu testen, ob das Element sichtbar ist:

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

aber wenn ich versuche, das gleiche zu tun im Winkelmesser bekomme ich diesen Fehler zur Laufzeit:

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

Warum ist das nicht gültig? Wie kann ich mit dem Winkelmesser auf Sichtbarkeit prüfen?

Answer 1

Dies sollte es tun:

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

Winkelmesser Erinnern $ nicht jQuery ist und :visible ist nicht noch ein Teil available CSS selectors + pseudo-selectors

Mehr Infos unter https://stackoverflow.com/a/13388700/511069

Answer 2

Der richtige Weg für Wenn Sie die Sichtbarkeit eines Elements mit dem Winkelmesser prüfen, rufen Sie die Methode isDisplayed auf. Sie sollten jedoch vorsichtig sein, da isDisplayed keinen booleschen, sondern einen promise liefert, der die bewertete Sichtbarkeit liefert. Ich habe viele Codebeispiele gesehen, die diese Methode falsch verwenden und daher ihre tatsächliche Sichtbarkeit nicht bewerten.

Beispiel die Sichtbarkeit eines Elements für immer:

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

Allerdings müssen Sie diese nicht benötigen, wenn Sie nur die Sichtbarkeit des Elements überprüft (im Gegensatz zu bekommen es im Gegensatz), weil Winkelmesser Patches Jasmine erwarten() So wartet es immer darauf, dass Versprechen gelöst werden. Siehe github.com/angular/jasminewd

So können Sie einfach tun:

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

Da Sie verwenden AngularJS die Sichtbarkeit dieses Elements zu steuern, können Sie auch seine Klasse überprüfen Sie das Attribut für ng-hide wie folgt aus:

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

Answer 3

Ich hatte ein ähnliches Problem, in dem ich nur Rückgabeelemente wollte, die in einem Seitenobjekt sichtbar waren. Ich habe festgestellt, dass ich die css :not verwenden kann. Im Falle dieser Ausgabe, das sollten Sie tun, ...

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

Im Rahmen einer Seite Objekt können Sie nur diejenigen Elemente erhalten, die auch auf diese Weise sichtbar sind. Z.B. eine Seite mit mehreren Positionen gegeben, wo einige sind nur sichtbar, können Sie verwenden:

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

Dies wird Ihnen alle sichtbar i.icon s zurückkehren mehrere Elemente in DOM mit dem gleichen Klassennamen

Answer 4

Wenn es. Aber nur eines der Elemente ist sichtbar.

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

In diesem Beispiel Filter nimmt eine Sammlung von Elementen, und gibt ein einziges sichtbares Element unter Verwendung wirdangezeigt().

Answer 5

Diese Antwort wird robust genug sein, um für Elemente zu arbeiten, die nicht auf der Seite sind und daher fehlerfrei ausfallen (keine Ausnahme auslösen), wenn der Selektor das Element nicht finden konnte.

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 6

Um die Sichtbarkeit zu warten

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

Xpath Trick, um nur sichtbare Elemente finden

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