web-dev-qa-db-fra.com

Comment utiliser un 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>

Lorsque vous vous trouvez dans la console chrome, je peux utiliser ce sélecteur jQuery pour vérifier 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 le 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 d'un rapporteur?

angularjsvisibleprotractor
107
limp_chimp

Cela devrait le faire:

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

Rappelez-vous que $ du rapporteur n'est pas jQuery et :visible n'est pas encore fait partie de sélecteurs CSS disponibles + pseudo -sélecteurs

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

140
Leo Gallucci

Pour vérifier la visibilité d'un élément avec Protractor, la méthode correcte consiste à appeler la méthode isDisplayed . Soyez prudent, car isDisplayed ne renvoie pas de booléen, mais plutôt un 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 vérifiez simplement la visibilité de l'élément (au lieu de l'obtenir), car le rapporteur corrige Jasmine expect (), de sorte qu'il attend toujours que les promesses soient résolues. Voir github.com/angular/jasminewd

Donc, vous pouvez juste faire:

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

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

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

J'ai eu un problème similaire, en ce sens que je voulais uniquement renvoyer des éléments visibles dans un objet 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 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, où seuls certains sont visibles, vous pouvez utiliser:

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

Cela vous rendra tout visible i.icons

8
Brine

S'il existe 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 retourne un seul élément visible en utilisant isDisplayed ().

5
A Qadeer Qureshi

Cette réponse sera suffisamment robuste pour fonctionner avec des éléments qui ne figurent pas sur la page. Elle échouera donc normalement (ne lève pas d'exception) si le sélecteur n'a pas réussi à 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()
    })
})
1
activedecay

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"]))
1
Drew Royster
 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");
})
1
Anil Kumar

Voici le peu d’extrait de code utilisable pour les frameworks utilisant TypeScript, rapporteur, jasmine

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

// Assertion d'un texte

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

// Assertion d'un élément

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

    );

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

// Assertion 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);
                    });
0
Khyati Sehgal