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

J'essaie de tester si un élément est visible à l'aide d'un rapporteur. Voici à quoi ressemble l'élément:

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

Dans la console Chrome, je peux utiliser ce sélecteur jQuery pour tester si l'élément 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')
[]

Cependant, lorsque j'essaie de faire la même chose dans rapporteur, j'obtiens cette erreur au moment de 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 valable? Comment puis-je vérifier la visibilité à l'aide du rapporteur?

Cela devrait le faire:

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

Rappelez-vous que le rapporteur $n'est pas jQuery et :visiblene fait pas encore partie des sélecteurs CSS + pseudo-sélecteurs disponibles

Plus d'informations sur https://stackoverflow.com/a/13388700/511069

La méthode correcte pour vérifier la visibilité d'un élément avec Protractor est d'appeler la isDisplayedméthode. Vous devez cependant faire attention car isDisplayedne renvoie pas un booléen, mais plutôt un promisefournissant la visibilité évaluée. J'ai vu de nombreux 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 (par opposition à l'obtenir) car le rapporteur corrige Jasmine expect () afin qu'il attend toujours que les promesses soient résolues. Voir github.com/angular/jasminewd

Vous pouvez donc simplement faire:

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

Puisque vous utilisez AngularJSpour contrôler la visibilité de cet élément, vous pouvez également vérifier son attribut de classe ng-hidecomme ceci:

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

J'ai eu un problème similaire, en ce sens que je ne voulais que des éléments de retour visibles dans un objet de page. J'ai trouvé que je suis capable d'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 objet de page, vous pouvez également obtenir UNIQUEMENT les éléments visibles de cette manière. Par exemple. étant donné une page avec plusieurs éléments, dont seuls certains sont visibles, vous pouvez utiliser:

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

Cela vous rendra tous visibles i.icons

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 pour les éléments qui ne sont pas sur la page, échouant donc correctement (ne lançant pas d'exception) si le sélecteur ne parvient pas à 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 les éléments visibles

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

 element(by.className('your-class-name')).isDisplayed().then(function (isVisible) {
if (isVisible) {
    // element is visible
} else {
    // element is not visible
}
}).catch(function(err){
console.log("Element is not found");
})

Voici les quelques extraits de code qui peuvent être utilisés pour les frameworks qui utilisent Typescript, rapporteur, jasmine

browser.wait(until.visibilityOf(OversightAutomationOR.lblContentModal), 3000, "Modal text is present");

// Affirmer un texte

OversightAutomationOR.lblContentModal.getText().then(text => {
                    this.assertEquals(text.toString().trim(), AdminPanelData.lblContentModal);
                });

// Affirmation d'un élément

expect(OnboardingFormsOR.masterFormActionCloneBtn.isDisplayed()).to.eventually.equal(true

    );

OnboardingFormsOR.customFormActionViewBtn.isDisplayed().then((isDisplayed) => {
                        expect(isDisplayed).to.equal(true);
                });

// Affirmation d'un formulaire

formInfoSection.getText().then((text) => {
                        const vendorInformationCount = text[0].split("\n");
                        let found = false;
                        for (let i = 0; i < vendorInformationCount.length; i++) {
                            if (vendorInformationCount[i] === customLabel) {
                                found = true;
                            };
                        };
                        expect(found).to.equal(true);
                    });