Comment tester si un élément a de la classe à l'aide de Rapporteur?

Je suis en train de sortir Rapporteur pour e2e test Angulaire de l'application et n'ont pas compris comment détecter si un élément a une classe spécifique ou pas.

Dans mon cas, le test clique sur le bouton soumettre et maintenant, je veux savoir si la forme[nom="getoffer"] a la classe .ngDirty. Quelles peuvent être les solutions?

describe('Contact form', function() {
    beforeEach(function(){
        browser.get('http://localhost:9000');
        element(by.linkText('Contact me')).click();
    });

    it('should fail form validation, all fields pristine', function() {
        element(by.css('.form[name="getoffer"] input[type="submit"]')).click();
        expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); //<-- This line
    });
});

InformationsquelleAutor Allan Tatter | 2013-11-28

angularjs protractor

99

Un gotcha, vous avez à regarder dehors pour, avec l'aide de toMatch(), comme dans l'acceptation réponse, les correspondances partielles. Par exemple, disons que vous avez un élément qui pourrait avoir les classes correct et incorrect, et vous voulez tester qu'il a la classe correct. Si vous utilisez expect(element.getAttribute('class')).toMatch('correct'), qui retourne vrai si l'élément a de la incorrect classe.

Ma suggestion:

Si vous voulez pour n'accepter que les correspondances exactes, vous pouvez créer une méthode d'assistance pour elle:
```
var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
        return classes.split(' ').indexOf(cls) !== -1;
    });
};
```
Vous pouvez l'utiliser comme ceci (en tirant parti du fait que expect résout automatiquement les promesses Rapporteur):
```
expect(hasClass(element(by.name('getoffer')), 'ngDirty')).toBe(true);
```
- Cela a fonctionné pour moi, avec le mod que le nom de la classe a à trait d'union pas le format de chameau cas, je.e expect(hasClass(element(by.name('getoffer')), 'ng-dirty')).toBe(true);
- Je suis peu dans le flou sur ce que la fonction a est la classe, en particulier l'emplacement ou les classes, c'est quand passé dans le .ensuite, la fonction, quelqu'un pourrait-il m'éclairer?
- Le hasClass fonction reçoit deux arguments - un élément html et du nom de la classe pour vérifier. La fonction devient alors l'attribut "class" (classe) que l'élément a de. Il divise la classe string pour obtenir un tableau de classes. Il vérifie ensuite si la classe que vous cherchez n'est en aucun indice positif de la matrice. Je suppose que c'est un moyen de vérifier l'existence.
- J'ai réécrit votre ligne de quatre fonction de ce sexy ES6 un liner: hasClass = (element, className) => élément.getAttribute('class').puis( (classes) => les classes.split(' ').indexOf(className) !== -1 );
InformationsquelleAutor Sergey K
53

Si vous êtes en utilisant un Rapporteur d'angles avec le Jasmin, vous pouvez utiliser toMatch pour correspondre à une expression régulière...
```
expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');
```
Notez également que toContain va correspondre les éléments de la liste, si vous avez besoin que.
- Je ne suis pas sûr si c'est le moyen idéal de le faire, mais au moins il fonctionne comme prévu 🙂
- Non, je dirais que c'est probablement pas. Je m'attends à element pour retourner un objet avec un hasClass méthode, que vous pouvez envelopper à l'intérieur d'un expect appel...
- toContain pourrait être un meilleur choix que toMatch dans ce cas.
- Si vous souhaitez vous prémunir contre les correspondances partielles, essayez quelque chose comme /(^|\s)ngDirty($|\s)/.
- vous pouvez probablement utiliser .not.toContain pour vérifier si il n'a pas la classe ou .toContain pour vérifier si il existe
InformationsquelleAutor ryan.l
16

La plus simple est:
```
expect(element.getAttribute('class')).toContain("active");
```
- Cela renvoie l'erreur java.util.ArrayList cannot be cast to java.lang.String sur Microsoft Bord
InformationsquelleAutor Fidel Gonzo

Basé sur la réponse de Sergey K, vous pouvez également ajouter une correspondance personnalisée pour ce faire:

(coffeescript)

  beforeEach(()->
    this.addMatchers({
      toHaveClass: (expected)->
        @message = ()->
          "Expected #{@actual.locator_.value} to have class '#{expected}'"

        @actual.getAttribute('class').then((classes)->
          classes.split(' ').indexOf(expected) isnt -1
        )
    })
  )

Alors vous pouvez l'utiliser dans des tests de ce genre:

expect($('div#ugly')).toHaveClass('beautiful')

Et vous obtiendrez l'erreur suivante si elle n'est pas:

 Message:
   Expected div#ugly to have class beautiful
 Stacktrace:
   Error: Expected div#ugly to have class 'beautiful'

InformationsquelleAutor Ed Hinchliffe

3

Avez-vous essayé...
```
var el = element(by.name('getoffer'));
expect(e.getAttribute('class')).toBe('ngDirty')
```
ou une variation de la ci-dessus...
- Le problème, c'est que le formulaire a plus d'une catégorie qui leur sont attachés.
InformationsquelleAutor James Dykes

J'ai fait cette correspondance, j'ai eu l'envelopper dans une promesse et d'utilisation 2 renvoie

this.addMatchers({
    toHaveClass: function(a) {
        return this.actual.getAttribute('class').then(function(cls){
            var patt = new RegExp('(^|\\s)' + a + '(\\s|$)');
            return patt.test(cls);
        });
    }
});

dans mon test, je peux maintenant faire stuf comme ceci:

   var myDivs = element.all(by.css('div.myClass'));
   expect(myDivs.count()).toBe(3);

   //test for class
   expect(myDivs.get(0)).not.toHaveClass('active');

cela fonctionne aussi quand un élément a plusieurs classes ou quand un élément n'a pas d'attribut de classe à tous.

InformationsquelleAutor Michiel

Ici un Jasmin 1.3.x custom toHaveClass matcher avec la négation .not support et attendre jusqu'à 5 secondes (ou ce que vous indiquez).

Trouver une correspondance personnalisée pour être ajouté sur votre onPrepare bloc dans ce gist

Exemple d'utilisation:

it('test the class finder custom matcher', function() {
    //These guys should pass OK given your user input
    //element starts with an ng-invalid class:
    expect($('#user_name')).toHaveClass('ng-invalid');
    expect($('#user_name')).not.toHaveClass('ZZZ');
    expect($('#user_name')).toNotHaveClass('ZZZ');
    expect($('#user_name')).not.toNotHaveClass('ng-invalid');
    //These guys should each fail:
    expect($('#user_name')).toHaveClass('ZZZ');
    expect($('#user_name')).not.toHaveClass('ng-invalid');
    expect($('#user_name')).toNotHaveClass('ng-invalid');
    expect($('#user_name')).not.toNotHaveClass('ZZZ');
});

InformationsquelleAutor Leo Gallucci

function checkHasClass (selector, class_name) {
    //custom function returns true/false depending if selector has class name

    //split classes for selector into a list
    return $(selector).getAttribute('class').then(function(classes){
        var classes = classes.split(' ');
        if (classes.indexOf(class_name) > -1) return true;
        return false;
    });
}

C'est comment je le fais au moins, sans la nécessité d'utiliser la fonction d'attente. Cette fonction retourne true si la classe est à l'intérieur de l'élément, et false sinon. Cela utilise aussi les promesses de sorte que vous pouvez l'utiliser comme:

checkHasClass('#your-element', 'your-class').then(function(class_found){
    if (class_found) console.log("Your element has that class");
});

Edit: je viens de réaliser que cela est essentiellement la même que la réponse sommet

InformationsquelleAutor Sir Neuman

Une façon d'y parvenir serait d'utiliser xpath et l'utilisation contains()

Exemple:

var expectElementToHaveClass = function (className) {
    var path = by.xpath("//div[contains(@class,'"+ className +"')]");
    expect(element.all(path).count()).to.eventually.be.eq(1);
};

InformationsquelleAutor Chanthu

0

Vous pouvez utiliser le CSS analyseur de gérer cela en vérifiant si un élément avec la classe donnée existe:
```
expect(element(by.css('.form[name="getoffer"].ngDirty')).isPresent()).toBe(true);
```
InformationsquelleAutor splintor

Vous devez vous connecter pour publier un commentaire.