Comment utiliser le protractor pour vérifier si un élément est visible?

J’essaie de tester si un élément est visible en utilisant un protractor. Voici à quoi ressemble l’élément:

 

Lorsque dans la console chrome, je peux utiliser ce sélecteur jQuery pour tester si l’élément est visible:

 $('[ng-show=saving].icon-spin') [ ​ ] > $('[ng-show=saving].icon-spin:visible') [] 

Cependant, lorsque j’essaie de faire la même chose avec le protractor, je reçois cette erreur à l’exécution:

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

Pourquoi n’est-ce pas valide? Comment puis-je vérifier la visibilité en utilisant un protractor?

    Cela devrait le faire:

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

    Rappelez-vous que $ n’est pas jQuery et :visible ne fait pas encore partie des sélecteurs CSS disponibles + des pseudo-sélecteurs

    Plus d’infos sur https://stackoverflow.com/a/13388700/511069

    La méthode correcte pour vérifier la visibilité d’un élément avec Protractor consiste à appeler la méthode isDisplayed . Vous devriez cependant faire attention car isDisplayed ne retourne pas un booléen, mais plutôt une promise fournissant la visibilité évaluée. J’ai vu beaucoup d’exemples de code qui utilisent cette méthode à tort et n’évaluent donc pas sa visibilité réelle.

    Exemple pour obtenir la visibilité d’un élément:

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

    Cependant, vous n’en avez pas besoin si vous ne faites que vérifier la visibilité de l’élément (plutôt que de l’obtenir) car les correctifs du protractor, Jasmine, attendent () donc il attend toujours que les promesses soient résolues. Voir github.com/angular/jasmineewd

    Donc, vous pouvez juste faire:

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

    Comme vous utilisez AngularJS pour contrôler la visibilité de cet élément, vous pouvez également vérifier son atsortingbut de classe pour ng-hide comme suit:

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

    J’ai eu un problème similaire, en ce sens que je voulais uniquement des éléments de retour visibles dans un object de page. J’ai trouvé que je pouvais utiliser le css :not . Dans le cas de ce problème, cela devrait vous faire …

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

    Dans le contexte d’un object page, vous ne pouvez obtenir que les éléments visibles de cette manière. Par exemple. étant donné une page avec plusieurs éléments, où seuls certains sont visibles, vous pouvez utiliser:

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

    Cela vous renverra tous les i.icon s visibles

    S’il y a plusieurs éléments dans DOM avec le même nom de classe. Mais un seul élément est visible.

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

    Dans cet exemple, le filtre prend une collection d’éléments et renvoie un seul élément visible à l’aide de isDisplayed () .

    Cette réponse sera suffisamment robuste pour fonctionner avec les éléments qui ne figurent pas sur la page, et échouera avec élégance (sans lancer une exception) si le sélecteur n’a pas pu trouver l’élément.

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

    Attendre la visibilité

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

    Astuce Xpath pour ne trouver que des éléments visibles

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